Gatsby、Netlify、IFTTTでCI、Qiita連携対応なブログを作ってみた

はじめに

以前から興味があった静的サイトジェネレーター「Gatsby.js」でお試し的にブログを作ってみました。

高品質な Gatsby 製サイトとの出会い

これまでも巷で静的サイトジェネレータが話題になることがありました。その度に手を出してみようと思ったものの、すでに WordPress 製のブログがあることから実行には移りませんでした。ブログというアウトプット手段に時間をかけるなら、アウトプット自体に時間をかけたほうがいいのでは、という理屈です。

少し前に非常に品質の高い Gatsby 製サイトと出会いました。 takumon さんが開発されたものです。

まずサイトの品質に驚きました。どうしても静的サイトジェネレーター製のサイトは使えるテーマの成熟度から WordPress 製と同等のレベルに持っていくのは大変かと思います。上のブログは全体的なデザインはもちろん SNS の共有機能、Qiita との連携など、見た目も機能も非常に高いレベルでした。

加えて特に惹かれたのは、ブログのソースコードが GitHub でMIT ライセンスで公開されていることです。コードを自分用にカスタマイズして公開することが可能です。このレベルのコードを利用させてもらえるのは大変ありがたかったです。

Takumon さんとのブログとの出会いに後押しされ、静的サイトジェネレーターでブログを作ってみました。

構成

architecture

オリジナルから少し見た目とホスティングサービスを変更したことに加え、CI/CD を強化するためインフラ面も多少改良しました。

Qiita との連携

Qiita にも多少記事を投稿しているため、ブログと Qiita との連携機能は個人的にマストでした。一番気にしていた点でしたが、Takumon さんが開発している Gatsby プラグインを使えば簡単に実現できます。

公式ドキュメントや Takumon さんのブログのコードが参考になります。

Netlify での公開

ブログのホスティングサービスはオリジナルは GitHub Pages を利用しているようでした。こちらも手軽にデプロイできるいいサービスですが以下の点から Netlify を利用しました

読み込み速度 (参考情報:比較記事)
Build hooks
- HTTP リクエストを投げると GitHub の最新コードでビルド&デプロイが可能
ビルド環境の統一

Qiita 更新時の自動反映

Qiita と連携し Qiita 記事をブログで表示するのであれば、常に最新の記事を取得、反映したいというもの。そこで IFTTT を使い対応しました。IFTTT の Feed トリガーを用いて Qiita の RSS(Atom)を監視し、新しい投稿が検出された際には Netlify の Build Hooks にリクエストを投げる仕様です。