Pelicanで使う自分用テーマを作成した

静的サイトジェネレーター用の基本的なブログレイアウトを一つ作っておくと使い回しができると思い、Python製のPelicanから着手することにしてみた。

結論から言うと、なかなか時間がとれないのもあって、足掛け2ヶ月かかった。

その1：ベースとなるレイアウトを素組する

htmlとCSSのみでできるだけレスポンシブな簡易ブログ用のレイアウトを考えて作った。

https://github.com/sakadonohito/site-base-theme

flexboxを中途半端に使っているのと、Pelicanテーマ作り終わってからフィードバックしている部分もある。ホント適当。

CSSはSCSSからWebpackでビルドしているけど、限りなく必要ないレベル。 EmacsならSCSS保存する時にCSSをビルドしてくれるのでホント不要な構造、しかも作り終わる前にWebpackは2がでちゃってバージョンが古いというオマケつき。 そうです、Webpack使ってるぜアッピルがしたかっただけなのです。

その2：Pelicanのテーマを作る

1. ググって出てきたシンプルなテーマをコピーして
2. 作ったベースレイアウトにまるっと取り替えて
3. 変数部分がちゃんと展開されるように調整して
4. パーツをバラす

みたいな感じで作成。

結局よくりようしたのは公式ドキュメント

ハマったところ

1. 見本にしたテーマのパーツ毎の役割がよくわからなかった

categories.htmlとcategory.htmlってあって、最初複数形のはカテゴリ別の一覧表示で単数系のは1記事のパーツかと思ったら、複数形はカテゴリ名の一覧で単数系が特定のカテゴリでの記事一覧だった。 タグの場合はさらに1記事用パーツレイアウトにはめ込む用の記事に関連づいたタグを横一列に並べるtaglist.htmlなんてのもあって、さらに混乱した。

2. ビルド失敗した時どこでエラーが発生したのか分からない

ビルドのエラーログの出力設定があるのか調べていないだけなんだけど、テンプレート作成している時にビルドエラー発生したけど、どこの編集のせいか分からない(1行文法エラーで失敗したぜ！的なメッセージがでるだけ)のでこまめにビルドして確認しながらじゃないと迷路に迷い込む。

ショートカットキーのタイポとかで変な場所に意図せず文字を入力してしまっているのに気づかず、ビルドが失敗した時には、身に覚えがなかったので解決に時間がかかった(2分探索みたいにコードを消したり戻したりしながらビルドしてエラー箇所を探した)。

3. 記事データのリストオブジェクトは生成するページのコンテキストに依存するものがある

period_Archives.htmlっていう特定の期間の記事リストを表示するためのパーツの上でarticlesという記事リストオブジェクトは全体じゃなくて、その期間の記事リストオブジェクト。全記事のリストは代わりにall_articlesてのある。じゃぁ常にall_articlesを使えば？ってなるんだけど、TOPとか他の場所だとこのall_articlesは空欄。

4. 年月毎に記事のカウントを取ったりURL分ける方法の説明がおろそか

結論からいうと、URLについては設定ファイルに

MONTH_ARCHIVE_SAVE_AS = '{date:%Y}/{date:%m}/index.html'
他にも
AUTHOR_SAVE_AS とか
PAGE_SAVE_AS なんかもあるのよ

とか書いておくと、/2017/03/みたいなパスで2017年3月の記事の一覧ページが生成される。今にして思うと年のフォルダ&月を意味するファイルの組み合わせでよかったんじゃないか説もある。

年月の記事カウントについては全記事を年でまとめた記事リストの記事リストを作成して「記事リスト」をさらに月でまとめてカウントを取るみたいなことをやる。 これはそんなようなことをするサンプルのテーマがたまたま見つかったから作れたけど見つからなかったらアーカイブのページが断念したと思う。

こんな感じ

<section>
	<p>Archives</p>
	{% if all_articles|count %}
	<ul>
		{% for year, date_year in all_articles|groupby('date.year')|sort(reverse=NEWEST_FIRST_ARCHIVES) %}
		　　{% for month, articles in date_year|groupby('date.month')|sort(reverse=NEWEST_FIRST_ARCHIVES) %}
		　　　　<li><a href="/{{ year }}/{{ '%02d' % month }}/">{{ year }}年{{ month }}月</a>({{ articles|count }})</li>
		　　{% endfor %}
		{% endfor %}
	</ul>
	{% elif articles %}
	<ul>
	{% for year, date_year in articles|groupby('date.year')|sort(reverse=NEWEST_FIRST_ARCHIVES) %}
	　　{% for month, articles in date_year|groupby('date.month')|sort(reverse=NEWEST_FIRST_ARCHIVES) %}
		　　　　<li><a href="/{{ year }}/{{ '%02d' % month }}/">{{ year }}年{{ month }}月</a>({{ articles|count }})</li>
	　　{% endfor %}
	{% endfor %}
	</ul>
	{% endif %}
</section>

正直リストオブジェクトをパイプで次の処理に渡せるのjinjaのドキュメント見なかったら想像もできなかったので、このパターンのサンプルくらいPelicanのドキュメントにも載せておいてほしい。

Python製の静的サイトジェネレーターPelicanを試す

Hugo,Hexo,Jekyllと試してきて、せっかくなのでPython製のものも試そうとPelicanを試した。

インストール

mkdir <<blog>>
cd <<blog>>
pip install pelican Markdown
pelican-quickstart

なんかいろいろ聞かれるので適当に答える。今回はS3にFTPで物理コピーをする運用のため、デプロイに関する質問は全てNo。

記事を書く

記事はcontent以下にreStructuredTextもしくはMarkdownで書きます。 content以下にディレクトリを配置するとそのディレクトリ名がカテゴリ名扱いされるらしい。当分はいいや。 もちろん、カテゴリはテキストファイルないのヘッダー？に記述できますので、カテゴリが必要だからといってディレクトリでわかなければいけないわけではありません。

pelican content -s pelicanconf.py

でoutputディレクトリに静的ファイルが生成されます。

簡単ですな。