hugoで生成したブログをGitHub Pagesで生成するまでの流れ

• blogリポジトリ： https://github.com/yoshihara/blog
• ホスティングしてるGitHub Pagesのリポジトリ（今はもう使ってないので削除予定）：https://github.com/yoshihara/yoshihara.github.io

GitHub Pagesのリポジトリをsubmoduleとしてblogリポジトリの public/ ディレクトリに置いている。 いちいち記事を書くのにcommitしてサイト生成してpushして、という一連の作業をするのが面倒だった（体験談）のと、esaで記事を書きたかったので、esaで記事を書いたらpushされてCIでサイトをビルドしてGitHub Pagesにpushするようにした。詳しい流れは下記。

記事が公開されるまでの流れ

1. esa で blog/ カテゴリに記事を書いて Ship It! する
2. webhook で blog リポジトリの contents/posts/ディレクトリ に記事の markdown ファイルが push される
3. CircleCI がそのコミットをトリガーにして CI を走らせる
   1. CI の中で静的サイトジェネレータの hugo をインストール（aptで入れると古くてテンプレートが使えないので GitHub から持ってきている）
   2. ちょっと markdown ファイルに小細工してからインストールした hugo でサイトを（GitHub Pagesがある） public/ ディレクトリ配下に生成する
   3. submodule に対してコミット、 push する（ cd public/ && git hogehoge すると親への操作とみなされたので --git-dir を指定してディレクトリ移動しないようにしている。あとコミット直後にdetached HEADになるので git submodule update -i した後にmasterを明示的に見ている）
   4. GItHub Pagesの更新により、blog リポジトリの public の示す先が変わっているのでそちらをコミットしてpushする（普通にpushするとCIが走ってしまうので [ci skip] をつける）
4. Github Pagesのリポジトリが更新されたので、それにしたがってこのブログも更新される

小細工の内訳

content/posts 配下にあるmarkdownファイルが記事の元データとなる。が、hugo で記事を作るにはファイル内容をちょっと帰る必要があったり、あと記事のURLが微妙だった。ので、CIでサイト作る前にシェルスクリプトを実行して content/posts/配下のmarkdownファイルに下記の小細工している。

• ファイル内の ^created_at: を date: に置き換える
  • hugo が記事の日時と認識するキーが date なのでそれに合わせて調整
• ファイル名を #{id}.html.md から #{id}.md にする
  • hugo のURLだとたとえば https://yoshihara.github.io/posts/276.html/ みたいになってなんか微妙だったので

TODO

• 独自ドメイン
• httpsしたい→まずS3に置いてから（今やってる、ひとまずS3に置けたのでCIなど調整中）
• もうちょいデプロイ周り綺麗にしたい なんか他にもあるかもだけどひとまず