静的サイトジェネレーターを自作してブログ作成システムを作成
この度新規に技術ブログを作成しようと思い、静的サイトジェネレーター（static site generator）をいろいろと調べていました。
JekyllやHugoなど、魅力的なものはあったのですが、この際勉強を兼ねて静的サイトジェネレーターを自作しました。
このブログも今回自作したシステムで作成しています。（amp htmlにも対応しています。）
以下、gulpで静的サイトジェネレーターを自作したときの作業メモです。
ブログに必要な機能
作成するにあたって、ブログに必要な機能を洗い出しました。
ウィジェット
最新記事、関連記事など、ブログのメインの記事以外の、サイドバーなどに表示される全ページ共通の機能です。
ブログパーツやガジェットなどと呼ぶこともありますが、ここではウィジェットと呼ぶことにします。
このブログを見ていただけるとわかるように、以下のウィジェットを実装しました。
- 最新記事
- カテゴリー一覧
- 関連記事
- 古い記事、新しい記事
カテゴリーは記事の大分類となる項目で、１記事に１つのみ指定可能としました。
動的に生成するページ
記事のページやトップページなどは自分で作成した分だけ生成すれば良いのですが、カテゴリー一覧はページ制御を考慮すると、記事の数に応じて動的に生成する必要があります。
以下のページを動的生成するページとしました。
- カテゴリー一覧
- 記事に設定されたカテゴリーの数生成
- 同一カテゴリーで１０件以上ある場合はページ制御をして、２ページ目、３ページ目．．．と生成する
- サイトマップ(xml)
- rss(xml)
実装方法
ブログ作成に必要な機能が洗い出せたので、実装方法を考えます。
nodejsnpmを使用gulpでコンパイルなどのタスク管理babelを使ってES2015で実装
- 記事は
markdownで記述titledescriptionなどファイルごとの設定はfront-matterを使用front-matterの情報をjsonファイルでまとめて管理
- ウィジェットや
htmlファイル作成のテンプレートエンジンはnunjucksを使用 - cssは拡張言語の
lessで実装 amp htmlに対応するためJavaScriptは未使用
記事の情報はjsonファイルにまとめてデータベースのように管理すると、最新記事や関連記事などの実装がとても簡単になります。