WordpressからPelicanに移行した手順のメモ

長年、WordpressとPukiwikiで運用してきた個人ブログを、Python製の静的サイトジェネレータPelicanに移行したので、その記録です。

Pelicanを導入した理由

ホスティングサービス側でPHPやMySQLが定期アップデートされるので追従するのが面倒になった。10年以上ほったらかし運用してきただけに、この先も工数をかけるのを避けたい。合わせてPukiwikiも廃止した。ZennやQiitaなどブログサービスも充実してきたし。

Pelicanを選んだ理由は、たまたまローカルでJekyllが動かせなかったから。あと、ReactやVueの静的サイトジェネレータだと、10年先の環境維持が大変かなぁと思って。

移行の結果、3本のブログに集約しました。

• デジタルをわかりやすく - catch.jp blog
• １本指で入力OK！パソコン初心者のキーボード入門
• Heppocode Garage

Wordpressから記事データの入手

Wordpressの管理画面でデータをエクスポートして、markdownに変換するだけ。

記事データのダウンロード

管理画面の[ツール] > [エクスポート] で「すべてのコンテンツ」を選んで、エクスポートファイルをダウンロードする。

markdownへの変換と画像ファイルのダウンロード

ダウンロードしたファイルは、単一のxmlファイルになっている。これを、次のコマンドでmarkdownファイルに変換する。画像ファイルも引っ張ってきてくれる。

npx wordpress-export-to-markdown

次の記事が参考になった。

• WordPressの記事をMarkdown形式に一括出力する方法 | Webクリエイターボックス

フォルダ構造など指定できるので、移行先の構成を事前に確認しておいたほうがいいかも。

markdownファイルには、タイトルや投稿日など記事のメタ情報も反映されている。

Wordpressで設定していたアイキャッチ画像は、メタ情報に「coverImage:」として反映されている。

Pelicanブログのセットアップ

まず、Pelicanのインストール。

python -m pip install "pelican[markdown]"

次は、ローカルにPelican環境を構築する

mkdir -p ~/projects/blog3
cd ~/projects/blog3
pelican-quickstart

これで、質問に答えていくとPelican環境がローカルにできあがる。

設定内容は、pelicanconf.py に格納されている。

contentフォルダに動作確認用のmarkdownファイルを作成したら、次のコマンドで動作確認する。

pelican content
pelican --listen

　　Serving site at: http://127.0.0.1:8000
　　Tap CTRL-C to stop

とりあえずデプロイしてみる

デプロイ先の設定は、publishconf.pyに記述する。

生成内容のpublishconf.py に出力先フォルダを次のように指定した。

publishconf.py

OUTPUT_PATH = 'deploy'

で、次のデプロイ用ファイルの生成コマンドを実行。

pelican content -s publishconf.py

これで、デプロイ用ファイルが作成される。
deployフォルダの内容をサーバーにアップロードして動作確認。

テンプレートを導入する

Pelicanの動作が確認できたら、実際にサイトを作っていく。

まず、見た目をテンプレートで整える。Pelicanでは「テーマ」と呼んでいる。

テーマギャラリーから手ごろなものを選択できる。

• Pelican Theme

導入したテーマ

今回は、Bootstrap3ベースの「voidy-bootstrap」を採用した。

• voidy-bootstrap

Bootstrapベースなら、テンプレートを修正したい場合もノウハウが色々なところにありそうだと思ったから。これ以外にもBootstrapっぽいテーマがいくつかあった。

テーマのセットアップ

• テーマファイルをダウンロード
• themesフォルダを作成して、テーマファイルをフォルダごとそこへコピー
• 設定ファイル(pelicanconf.py)で、テーマファイルを指定する

pelicanconf.py

THEME = './themes/voidy-bootstrap'

# Theme for Voidy-bootstrap

FONT_AWESOME_CDN_LINK = {
    'href': 'https://use.fontawesome.com/releases/v5.0.13/css/all.css',
    'integrity': 'sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp',
    'crossorigin': 'anonymous'
}

## Extra stylesheets, for bootstrap overrides or additional styling.
STYLESHEET_FILES = ("pygment.css", "voidybootstrap.css",)

## Put taglist at end of articles, and use the default sharing button implementation.
CUSTOM_ARTICLE_FOOTERS = ("taglist.html", "sharing.html", )
CUSTOM_SCRIPTS_ARTICLE = "sharing_scripts.html"

## Default sidebar template. Omit this setting for single column mode without sidebar.
SIDEBAR = "sidebar.html"

これで、指定したテーマが適用される。

あと、FontAwesomeやサイドバーの設定も追加している。

CSSのカスタマイズは、以下のファイルに反映していく。

./themes/voidy-bootstrap/static/css/voidybootstrap.css

デザインを整える

Jumbotronを設定する

一番目立つJumbotronは、次のファイルで設定する。

./theme/voidy-bootstrap/includes/jumbotron.html

固定ページを追加する

固定ページは、次のようにして作成する。

• pageフォルダを追加する
• そこにmarkdownファイルを作成する
• 設定ファイル(pelicanconf.py)に次の記述を追加する

pelicanconf.py

PAGE_URL = 'pages/{slug}/'
PAGE_SAVE_AS = 'pages/{slug}/index.html'

固定記事を上部タブに表示する

ローカルの動作確認用とデプロイ用で記述を分ける。

pelicanconf.py

SITEURL = ''
MENUITEMS = (
    ('記事一覧', '/'),
    ('このサイトについて', '/pages/about/'),
)

publishconf.py

SITEURL = "https://www.example.come/pelican-web"
MENUITEMS = (
    ('記事一覧', SITEURL + '/'),
    ('このサイトについて', SITEURL + '/pages/about/'),
)

記事を流し込む

Wordpressから引っ張ってきてmarkdownに変換すると、次のメタ情報が付与されている。

---

title: "アステロイド パトロール"
date: "2019-02-05"
categories:

• "game-scratch"
  tags:
• "scratch"
• "game"
  coverImage: "asteroid.png"

---

記事のslugが抜けているので、追加しておく。

記事の日付

日付のフォーマットを以下で指定する

pelicanconf.py

DEFAULT_DATE_FORMAT = "%Y-%b-%d"

ファイルパスの指定

記事中のリンクは、ファイル名でリンクする。

[リンクテキスト]({filename}/article.md)

記事中の画像を指定する。画像ファイルは、/content/images/に格納しておく。

![alt_text]({static}images/images.png)

テンプレート中のファイルパスを指定する。

<a href="{{ SITEURL }}/{{ article.next_article.url }}">

そのほか

アイキャッチ画像を表示する

voidy-bootstrapは、アイキャッチ画像に対応している。

./themes/voidy-bootstrap/templates/includes/article_header_title.html

{% if article.image %}
    <img class="article-image img-responsive" alt="article header image" itemprop="image"
        src="{{ SITEURL }}/images/{{ article.image }}" />
{% endif %}

プラグインを導入する

プラグインは、./plugins にフォルダごと格納して、設定ファイルで指定する。

pelicanconf.py

# Plug-ins

PLUGIN_PATHS = ['plugins',]
PLUGINS = ['neighbors',]

プラグインの使い方(英語)

• Plugins - PELICAN 4.10.2

プラグインリポジトリ

• pelican-plugins

Google Analyticsを設定する

publishconf.pyで、GAの測定IDを指定できる。

publishconf.py

# Following items are often useful when publishing
GOOGLE_ANALYTICS = "G-XXXXXXXXXX"

ただし、テンプレート側のコードがちゃんと動作していなそうだったので、以下のファイルの該当コードをGoogle提供のコードに入れ替えた。

./themes/voidy-bootstrap/templates/includes/analytics.html

{% if GOOGLE_ANALYTICS %}
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id={{ GOOGLE_ANALYTICS }}"></script>
<script>
    window.dataLayer = window.dataLayer || [];
    function gtag() { dataLayer.push(arguments); }
    gtag('js', new Date());

    gtag('config', '{{ GOOGLE_ANALYTICS }}');
</script>

{% endif %}

参考にしたWebページ

• Pelican – A Python Static Site Generator
  https://getpelican.com/

• Python製 Pelican を使ってサクッとブログを公開する #GitHub - Qiita
  https://qiita.com/saira/items/71faa202efb4320cb41d

• Python製の静的サイトジェネレーター「Pelican」を試してみた - kapieciiのブログ
  https://kapiecii.hatenablog.com/entry/2019/12/28/161500