このブログをGatsbyを使って丸っと作り直してみた。 元々はAWSでサイトをホストして知見を貯めたいというもくろみがあってずっとWordPressをEC2インスタンスに入れて自前で運用していたけど、 仕事でガンガンAWS使っている中、t2.microインスタンスに全部入りの構成から今学ぶことはないなと思っていた。
そしてなにより2008年前後からずっと運用する中で以下のような問題があった。
- Markdownで記事を書きたい
- WordPressでもプラグインを使えば実現できるけど…
- Amazon Linuxのアップグレード問題
- そもそもt2.microという小さいEC2インスタンスにミドルウェアを入れすぎていて重い
- Nginx(リバースプロキシ)、Apache
- WordPress
- MariaDB
- Let’s EncryptのSSL証明書を定期的に更新するスクリプトがコケる
- 実装が甘いだけ(ry
- Mackerelでの監視がFailした場合の対応
- プライベートでインシデントレスポンスしたくないw
- サイト内検索に使っているHyper Estraierがメンテされていない
- 高速な検索ができてGreat Productだと思っているけど、今サイト内検索を実装するなら他のプロダクトの方がよい
そんな裏事情があり、記事書きたいが重いサイト相手にするのが面倒で記事書けない(言い訳)という悪循環に陥っていたので、年末年始の空き時間を使って作り替えることにした。 やっぱりWebサイトの式年遷宮は必要よね。
SSG(Static Site Generation)サイトへの移行
WordPressは長い歴史があるCMSであることもあり機能的には不満はなかったけど個人ブログに使うには運用面考えるとToo muchな気もしていて(どこかのSaaS使う場合除く)、SSGに移行した方が幸せになるなというのは前から思っていた。
Jamstack周りの知識も仕入れたかったし。
Gatsby使うかNext.jsで迷ったけど個人ブログ用途にNext.jsで一から構築していくのはファットすぎる気が。ブログ用途であればGatsbyの方が欲しい機能はプラグインで実現できそう。 記事が増えるとビルド時間が増えるという情報もあったけど、商用サイトのように一日何十記事も書くわけではないので大丈夫でしょう。というわけでGatsbyを使うことに。
デザイン実装
Gatsby Starters: Library | Gatsbyに上がっているデザインを物色する。 “gatsby-starter-ghost: Gatsby Starter | Gatsby”とかかっこええやんと思ったけどHeadless CMS使う前提っぽいので断念。仕事でIT系ではないお客さんに提案するならHeadless CMS+Gatsbyもアリだと思うけど自分しか更新しないサイトなんで、Markdownでゴリゴリ記事書ければOK。
結局ブログ用の最小構成である“gatsby-starter-blog: Gatsby Starter | Gatsby”に必要なプラグインやデザイン足していく方が将来的なプラグインの後方互換問題も出にくそうなのでこちらを採用。
GatsbyもSSG事態もそこそこ歴史があり、先人達がノウハウを貯めてくれてるおかげでハマりポイントはそれほどなかった。 JSXのJS内にHTMLの要素埋め込んでいくスタイルは古き良きHTML+CSS+JS(jQuery)で育った身としては違和感あるけど、書いているうちに合理的な気もしてきた。
機能実装
欲しいプラグインは”gatsby-starter-blog”にほぼ入っていた。
- Markdown > gatsby-transformer-remark
- Google Search Console向けのsitemap.xml作成 > gatsby-plugin-sitemap
自分で独自にインストールしたのは
- gatsby-plugin-google-gtag > gatsby-plugin-google-analyticsの代替
ぐらい
ホスティング
候補はいくつか考えた。
- Netlify
- Gatsby Cloud登場以前の王道？
- Gatsby Cloud
- 公式の安心感？
- Github Pages
- AWS S3
- AWS Amplify
もろもろ考えた結果AWS Amplifyに移行することにした。
- ドメインはRoute53でホストしている
- ドメインも新ドメインに移行したかった。旧サイトからのリダイレクトにCloudFront+S3の静的ホスティング+ACM使おうと思っていたのでAWSに全部収めた方が管理しやすい
- AWS周りの知識を絶賛アップデート中
- デフォルトでCloudFront使って配信できるのでスケーラブルなサイトが作れる
- AWS WAFを使いたい場合やCloudFrontの細かい設定は変更できないが、SSGで生成している個人ブログにそこまで必要なさそう
実装としてはGithubのプライベートレポジトリにGatsbyのコンポーネントファイル+記事一式を保存していて、レポジトリのmainブランチにmerge/pushすると自動的にAWS Amplify上でビルドが走ってデプロイされる形にした。
最後に
式年遷宮終わったので真面目に記事も書いてく
