ブログのソフトウェアをHugoからPelicanに切り替えた

2017-02-19

はじめに

Hugo はビルドも速くて快適に使わせてもらっていました。ただ、コードブロックのシンタクスハイライトを使いたいと思って Syntax Highlighting を読んだときにHugo独自の記法に依存するのが好ましくないなと思いました。Markdownには拡張の仕組みがないので仕方ないのですが。以前から reStructuredText を使うようにしたいと思いつつ使えてなかったので、この機会に reStructuredText を使ってブログを書くようにしたいと思いました。

Hugoにも Add support for native Go implementation of reStructuredText (reST) · Issue #1436 · spf13/hugo というイシューがあったのですが、まだ先は長そうな感じです。また Syntax Highlighting を見るとシンタクスハイライトで行番号を付けたい場合は Pygments というPythonで書かれたパッケージを使うということがわかりました。それと reStructuredText 関連もGoよりPythonのほうが充実しています。

ということで、 Python で reStructuredText を扱えるブログパッケージを探してみると Pelican Static Site Generator, Powered by Python というのが見つかったので、これに乗り換えました。

この記事は乗り換えた時の作業メモと今後の記事を書く時の私用の手順メモです。

Pelicanのインストール

CentOS 7環境を作りました。 IUS のレポジトリから python36u パッケージをインストールした状態で以下のコマンドでインストールしました。

python3.6 -m venv venv
source venv/bin/activate
pip install pelican pygments ghp-import

その後 pip freeze > pip_requirements.txt`` してあるので、後から hnakamur/blog: hnakamur’s blog at github を git clone したときは以下の手順で構築できます。

python3.6 -m venv venv
source venv/bin/activate
pip install -r pip_requirements.txt

設定

私は Octporess → Hugo → Pelican と移行しているので記事のURLがそのままになるように設定を調整しました。

pelicanconf.py#L43-L47

43
44
45
46
47
RELATIVE_URLS = True
ARTICLE_URL = '{slug}/'
ARTICLE_SAVE_AS = '{slug}/index.html'
PAGE_URL = 'pages/{slug}/'
PAGE_SAVE_AS = 'pages/{slug}/index.html'

他にも、日付のフォーマット、出力先ディレクトリ名、Google Analyticsの設定などを行っています。

記事のメタ情報書き変え

Pelican は Markdown と reStructuredText の両方が扱えるので、既存のMarkdownの記事は流用することにしました。ただし作成日などのメタ情報は File metadata の形式に合わせる必要があります。そこでPythonでその場限りのスクリプト hugo2pelican.py を書いて変換しました。

その後 slug の値に blog/`` が入っていたのを削るため hugo2pelican2.py で更に変換しました。本来はデータを戻してスクリプトを書き変えて再実行するのが良いのですが、変換後にコミットしたりタグを手動修正したりしていたので、追加で変換しました。

テーマのカスタマイズ

デフォルトのテーマ notmyidea のディレクトリ venv/lib/python3.6/site-packages/pelican/themes/notmyidea を themes ディレクトリ以下に notmyidea-custom という名前に変えてコピーしカスタマイズしました。

シンタクスハイライト用のCSS追加

themes/notmyidea-custom/static/css/pygment.css#L1-L12

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
.highlighttable td {
padding: 0;
}
.highlighttable td.linenos {
width: 4rem;
}
.highlighttable td.linenos pre {
text-align: right;
}
.highlighttable pre {
margin: 4px;
}

トップページの内容を記事一覧に変更

Hugoを使っていた時はトップページは記事一覧にしていたので、テンプレートを大幅に書き変えて同じような内容にしました。 Adjust theme for article list · hnakamur/blog@b59771b

Pelicanはテンプレートエンジンとして Jinja2 を使っています。 Ansibleでも使っていて私は慣れているのでさくっと変更できました。

幅を広げる

文章メインのブログでは元のテーマのほうが読みやすいと思いますが、コードブロックはなるべく幅を広くしておきたいので調整しました。 Modify theme to widen nav to 940px and content to 900px · hnakamur/blog@b6fba1e

記事を書く手順

以下のコマンドを実行して、 content ディレクトリ以下のファイルに変更を検知したらサイトのHTMLを自動生成するようにします。

source venv/bin/activate
pelican -r content

別の端末で以下のコマンドを実行して開発サーバを起動してプレビューできるようにしておきます。

source venv/bin/activate
(cd public && python -m pelican.server)

この状態で contents/YYYY/MM/DD/my-super-title.rst という形式でファイルを作って編集します。件名とメタ情報を File metadata の reStructuredText の形式で書きます。

My super title
##############

:date: 2017-02-19 23:20
:modified: 2017-02-20 16:34
:tags: thats, awesome
:category: blog
:slug: YYYY/MM/DD/my-super-title

保存する度に自動生成が動きます。さくらのVPS の1Gプランの環境で記事数119で12秒前後かかります。 Hugoのときに比べると長いですが、許容範囲です。

code-block`` によるとシンタクスハイライトで使える言語一覧は Available lexers — Pygments にあります。

記事を書き終わったら、以下のコマンドを実行して変更をコミットします。

git add .
git commit -v

実際はbashのエイリアスと ~/.gitconfig でサブコマンドもエイリアスを付けているので以下の通りです。

g a .
g ci

記事をGitHub Pagesに公開

Publishing to GitHub に説明があります。私は Hugo のときに使っていた deploy.sh を以下のように書き変えました。

deploy.sh

#!/bin/bash

echo -e "\033[0;32mDeploying updates to GitHub...\033[0m"

pelican content
ghp-import public
git push origin master gh-pages

今まで通り以下のコマンドで公開できます。

./deploy.sh