Next.js + Github GraphQL API + Vercelの組み合わせでブログを作成

世の中にはいろいろなプラットフォームがあるが、自分自身の好みの規約を取り入れて
表現の方法を試してみたいことがある。しかしそれをやるにはプラットフォームの制約から離れなければならない。
メンテナンスの面倒さを自分自身で受け止めなければならないが、ブログのシステムを作成して運用をしてみることにした。

構成はオーソドックスなものを利用

構成はオーソドックス(2021年11月現在)なものを採用した。

• Next.jsを利用してSSGにてページを生成する
• ページコンテンツの元となるデータはGitHub Issueで管理を行う
• GitHub IssueのデータはGitHub GraphQL APIを利用して取得する(issue, issues query)
• Vercelを使ってNext.jsで作成したブログコンテンツを配信する
• GitHub Actionsにより、Issueが作成された時にVercelにてコンテンツデータが反映されるようにした

おまけとして

tailwindを利用してみた。プリミティブな要素を組み合わせてcss classを作成するというやり方が楽しい。
おかげでDarkmodeの対応も簡単にできた。

GitHub Issueに書いた下書き的なものも工夫しなければ全てがコンテンツとして扱われてしまうため、
GraphQL QueryによってGitHub IssueのLabelがpublishedなものに限ってコンテンツとしてSSGにより
静的ファイルに書き出されるようにしている。

テストしてみます

const { id, name, email } = user;

if (name == undefined) return null;