GitHub Pages を使えば「Markdown ファイルを書いてアップするだけで」ウェブサイトをつくれる(ビルド作業も不要)

Markdown 愛用者で、かつ書いたテキストを公開したい私のような人種にとって障壁となるのは「テキストを見やすい形でウェブサイトに公開すること」だった。この障壁を取っ払う優れた方法は無かった。

今までの方法:

  • ブログサービスなど → ログインや管理画面など画面を経由するのがだるい
    • 例: はてなブログ
  • Wiki → Markdown に対応していない、自前でサーバーを用意する必要があるのがだるい
    • 例: Mediawiki
  • 静的ウェブサイトジェネレーター → ビルドがだるい、生成されたファイルの管理がだるい
    • 例: Hugo、MkDocs

しかし優れた方法が見つかった。その名も GitHub Pages。

成果物

本記事のやり方でつくっているのが、この Monolithic だ。これは一つのテーマを一つのページ(Monolithic/一枚岩)で記述した雑記帳であるが、このウェブサイトの更新に必要な作業は以下だけである。

  • ローカルで Markdown ファイルを書く
  • リポジトリに Push する

これだけで上記ウェブサイトにも反映される。ローカルでビルド作業する必要もない。ただただテキストだけ書いていたい私としては、これがすこぶる快適なのだ。

このやり方のメリット

  • ローカルで Markdown で書ける
  • ビルド作業が必要ない(環境も必要ない)
  • ビルドしてできた生成物を管理する必要もない
  • プライベートリポジトリにすれば Markdown の生原稿(やウェブサイトに公開してない他ファイル)は見られない

このやり方のデメリット

  • GitHub Pages に反映されるまでに多少のタイムラグがある
    • 10 秒あれば反映される時もあるし、1 分経っても反映されないこともある
  • 生成物がどう表示されるかを素早く確認できない(GitHub Pages 側で反映されるまで待つ必要がある)
  • デザインテーマが非常に限られている
  • 下準備がちょっと面倒くさい

なぜこんなこと(ビルド無しでウェブサイトを生成)が実現できるか

Ans: GitHub Pages 側でビルドしてくれてるから。

GitHub Pages では Jekyll という静的ウェブサイトジェネレーターを使っている。この Jekyll の設定ファイルとか書いてリポジトリに置いておけば、push するたびに GitHub で勝手にビルドを走らせてくれる。

導入手順

  • リポジトリをつくる
  • 最低 1 回は push する(これしないと次手順 GitHub Pages 有効化ができない)
  • リポジトリの Settings から GitHub Pages を有効にする&サイトテーマを適当に選択する
    • ウェブサイト URL が発行されるのでメモしとく
  • リポジトリに index.md をつくる
  • リポジトリに Jekyll 関連の設定ファイル(※1)をつくる
  • push

ウェブサイト URL にアクセスすると、index.md が HTML 化されて表示されるはず。index.md からリンクが張られた他ページも同様(逆を言えばリンクが張られてない Markdown ファイルは HTML 化されない)。

デモ

本記事のやり方で、todochute という自作タスク管理ツールのウェブサイトをつくってみた

参考