zukucode
主にWEB関連の情報を技術メモとして発信しています。

静的サイトジェネレーターを自作してブログ作成システムを作成

この度新規に技術ブログを作成しようと思い、静的サイトジェネレーター(static site generator)をいろいろと調べていました。

JekyllやHugoなど、魅力的なものはあったのですが、この際勉強を兼ねて静的サイトジェネレーターを自作しました。

このブログも今回自作したシステムで作成しています。(amp htmlにも対応しています。)

以下、gulpで静的サイトジェネレーターを自作したときの作業メモです。

ブログに必要な機能

作成するにあたって、ブログに必要な機能を洗い出しました。

ウィジェット

最新記事、関連記事など、ブログのメインの記事以外の、サイドバーなどに表示される全ページ共通の機能です。

ブログパーツやガジェットなどと呼ぶこともありますが、ここではウィジェットと呼ぶことにします。

このブログを見ていただけるとわかるように、以下のウィジェットを実装しました。

  • 最新記事
  • カテゴリー一覧
  • 関連記事
  • 古い記事、新しい記事

カテゴリーは記事の大分類となる項目で、1記事に1つのみ指定可能としました。

動的に生成するページ

記事のページやトップページなどは自分で作成した分だけ生成すれば良いのですが、カテゴリー一覧はページ制御を考慮すると、記事の数に応じて動的に生成する必要があります。

以下のページを動的生成するページとしました。

  • カテゴリー一覧
    • 記事に設定されたカテゴリーの数生成
    • 同一カテゴリーで10件以上ある場合はページ制御をして、2ページ目、3ページ目...と生成する
  • サイトマップ(xml)
  • rss(xml)

実装方法

ブログ作成に必要な機能が洗い出せたので、実装方法を考えます。

  • nodejs npmを使用
  • gulpでコンパイルなどのタスク管理
    • babelを使ってES2015で実装
  • 記事はmarkdownで記述
    • title descriptionなどファイルごとの設定はfront-matterを使用
    • front-matterの情報をjsonファイルでまとめて管理
  • ウィジェットやhtmlファイル作成のテンプレートエンジンはnunjucksを使用
  • cssは拡張言語のlessで実装
  • amp htmlに対応するためJavaScriptは未使用

記事の情報はjsonファイルにまとめてデータベースのように管理すると、最新記事や関連記事などの実装がとても簡単になります。


関連記事

  • gulp 引数を受け取って開発時とリリース時で処理を分岐する

    コマンドラインでタスクを実行する際に、以下のようにパラメータを指定して、タスク処理では指定されたパラメータを受け取って処理を分岐するようにします。minimistを使えば上記の形式で指定したパラメータ...


  • gulp lessをcssにコンパイルする

    lessファイルをgulpを使ってcssにコンパイルします。gulp-lessとgulp-autoprefixerをインストールします。gulp-autoprefixerはなくても構いませんが、古いブ...


  • gulp markdownを変換してnunjucksで扱う

    実際に公開するhtmlファイルの中身はmarkdownから変換したhtmlの内容だけではなく、titleやdescriptionなどのmetaタグやヘッダ、フッタなどの情報が必要です。そのため、mar...


  • gulp markdownの内容をhtmlに変換する

    gulpでmarkdownの形式で記載したデータをhtmlに変換します。本ブログのように技術ブログの場合はコードをシンタックスハイライト(色付け)して表示したいので、highlight.jsもインスト...


  • gulp nunjucksをコンパイルしてhtmlに変換する

    nunjucksで記載されたテンプレートエンジンをhtmlに変換します。今回はnunjucksのコンパイルにgulp-nunjucks-renderを使用します。特に設定をしなくても正しく動作するので...


  • 静的サイトジェネレーターを自作してブログ作成システムを作成

    JekyllやHugoなど、魅力的なものはあったのですが、この際勉強を兼ねて静的サイトジェネレーターを自作してみようと思いました。以下、gulpで静的サイトジェネレーターを自作したときの作業メモです。


  • gulp front-matterの内容をdataとして使用する

    ブログの記事を作成するにあたって、titleやdescriptionのメタ情報やカテゴリー、タグなど、ファイルごとに管理する情報はfront-matterの形式で管理すると便利です。front-mat...


  • nunjucks includeで絶対パスを指定する

    nunjucksの便利な機能の1つにincludeがあります。ファイルパスはデフォルトでは相対パスで設定されます。なのでメインとなるnjkファイルのパスによって以下のようになってしまいます。これではフ...


  • gulpをES2015で実装する

    gulpをES2015で実装するための手順です。babelを使うと、ES2015 (ES6)などで書かれたソースコードを一般的なブラウザがサポートしているECMAScript5の形式に変換できます。


  • JavaScript 配列を検索して存在チェックをする

    JavaScriptで配列の中に指定した値が含まれているどうかの存在チェックをするにはindexOfを使用します。指定した値が存在する場合は、最初に存在した要素のインデックスを返します。存在しなかった...