自前のブログサイトを作って10年目となりました,,,長いですねぇ。
最初はWordpressから始まり、静的サイト化し、Ghost CMSと渡り歩いてきました。
おまえさん、ずっとブログのデザイン変えてるな...
ええそうなんです、しょっちゅうです。
リッチなデザインにしたり、シンプルなデザインにしたり、おもしろくしたり試行錯誤したんですが
最終的に私がパフォーマンスとセキュリティを求めるキチガイだということがわかりました。
すでにSSGサイトとして運用はしていましたが、ページが遅かったり、SEOが不十分だったりという課題がありました。
また、コンテンツ量が多くなるにつれ管理がどえれー面倒になったのも、デザイン変更に至ったきっかけです。
Jamstackについて
今回は完全なJamstack構成にしました。
細かく書くと面倒なので、ざっくりとしたまとめで、技術的なことは書きません。あしからず。
以下は拾い物ですが、Jamstackとはこういうものです。はい。
ヘッドレスCMS
今回はMicroCMSを採用しました。
最初はstrapiとかで自前でCMS構築しようと思ったんですが、EC2立ててメンテナンスするの面倒だったのでやめました。
※サーバレスアーキテクチャに対応したCMSではない、というのも理由のひとつ。
採用に至った経緯など特に理由はないですが、強いて挙げると
- すごい昔にアカウント作ってて、今でも残ってたから（当時使おうとして放置してた説）
- 機能やドキュメントが充実してるし、拡張性が高い、なによりサーバの管理がない
- 今の会社のコーポレートサイトでも使っているらしい？という噂だったので
ですかね。個人ブログだけなら、無料枠で全然使えますね。
Jamstackの黎明期から国産メーカーで安定して実績を積んでいるあたり、開発力のすごさに頭が下がります🙇♀️
SSG
静的サイトジェネレーターにはAstroを使いました。
SSG, SSR, ISR をパパっと実装する場合、Next.jsが上がってくるんですが、より新しいAstroを利用してます。
Next.jsと比較したときと比べて
- Astro のコンテンツファーストな設計
- Jamstack から Markdown + SSG への移行
- Astro IslandによるJavaScript の最適化
- Astro のコード可読性 が高い
などのメリットがあります。
ホスティング
AWS大好きマンなので、AWS Amplifyを利用しています。
ただ、Astro公式ではNetlifyやVercelなどのデプロイ先のガイドが用意されているので、こちらとの親和性が高そうです。
というか、ビルド時間とか料金体系とか手軽さを考えると圧倒的にこちらのほうがいいと思っています。
私はAWSを愛しています。
ブログテンプレート
MicroCMSでは、スターターとしてブログのテンプレートが豊富に用意されているのも魅力。
私は以下のテンプレートを使わせていただきました。
なお、テンプレート側はSSRでセットアップされていたので、手動でSSG buildに対応するようにソースコードを改変しています。
その他、パフォーマンスのチューニングやカスタムCSSなども入れてます。
面倒だったところ
MicroCMSはCSVインポートというコンテンツの取り込み機能があるのですが、Ghost CMSは1つのjsonレスポンスに全データ（記事、Category、執筆者）が格納されるため
CSV形式に変換するときに、列とデータがずれたり、想定外のヘッダーにより取り込み失敗したりと、色々とつまづきました。
また、画像データのリンクの形式が
https://images.microcms-assets.io/assets/xxxx/yyyy/image.png
という形式になるのですが、xxxxはユニーク生成で、yyyyが画像単位のランダム生成ということがわかりました。
オリジナルのコンテンツの画像データのURLを、インポートした画像のリンクに置き換えるのが結構面倒かったです（）
パフォーマンスと運用コストについて
Lighthouseの結果は、スマートフォン・PCともにほぼ100点でした！すばらしいい！！🎉
運用コストについても、今まではCMSサーバとデプロイの仕組みを自前で用意していましたが、ここの手間から離れたのはでかいです。
EC2を開発・運用サーバとして作成していたのですが、これがなくなるのは結構楽で節約もできて嬉しいです！！！
唯一の懸念はMicroCMS Hobbyプランの制限ですかねぇ
- 転送量：20GB/月で止まる
- API数：5個まで
- メンバー：3人まで
- APIキー：1個のみ
- 権限管理・環境分離などの運用機能が使えない
あと画像ファイルのアップロードは可能なのですが、それ以外のファイルはHobbyプランではアップロードできません。
サンプルコードをまとめたzipファイルなど直接あげられないので、ここはS3に格納してダウンロードできるようにしてます。
おわりぃ！
これであと数年は戦えると信じている！！
え？コメントとか検索機能がほしいって？しらん