今までいくつかのブログサービスを使ってきたけど、使ってきた各サービスに対して色々と思うことがあって、今回この自作のブログ(https://blog.s2terminal.com)に乗り換える事にした。プログラミング的な内容は今まで通りQiitaに書いていくので、このブログにはそれ以外の内容を書いていく事になると思う。
パフォーマンス
ほとんど何もないサイトなので速いのは当たり前だけど、何も考えずに作った割にはそこそこのパフォーマンスが出ていると思う。
Google Lighthouse
Google Core Web Vitals
Microsoft webhint (旧称Sonarwhale)
使った技術
Web開発者を名乗りながら最近あまりWebに触れていなかったので、ブログ構築は技術的なリハビリを兼ねている。そのため本当はもっと色々と自前でやりたかったけど蒙古軍が攻めてきたせいで時間が取れなくなったので、最低限のシンプルな構成にした。
- Backend(Headless CMS): Contentful
- Frontend: Next.js
- Hosting: Vercel
概ねVercelの公式ガイドを参考に作った。
Backend(Headless CMS): Contentful
Headless CMSにはContentfulを使った。私はCMSに詳しくないので、なんとなく一番情報が集めやすそうな物を選んだ。Contentfulは様々なメタ情報を自在に設計できる(たとえば、タイトルをナシにしてTwitterみたいにしたりできる)のが特徴のCMSだけど、そこまで凝った事をしたいわけではないので、必要最低限の情報しか使っていない。
このような感じでコンテンツモデルを定義して使っている。コツとしては、本文をMarkdownで書くならばRich TextではなくLong Textにするということぐらい。
CMS部分にはあまり機能は必要ないので、最終的にはここはRuby on Rails等で自作してGCP CloudRunあたりに載せたいけど、使いやすいエディタを自前で作るのは結構面倒だろうなと思う。
Frontend: Next.js
フロントエンドはNext.jsにした。本当はMicrosoft ASP.NET Core Blazorとか使ってみたかったけど、C#は触ったことが無いので私のスキルレベルでは完成するビジョンが見えなかった。
Next.jsは何度か触ったことはあるもののStatic Generationでしか使ったことがなく、ふつうにサーバを立てて使うことでNext.jsからもたらされる様々な恩恵を受けながら"ちゃんと"使ってみたいと思っていた。
開発者(not Designer)がWebサイトを作るとなると一番困るのはデザインだと思う。ここでCSSフレームワークとかもTailwindなどの流行りの物に触れておきたいと思ったけど、ここに学習コストを払う気乗りがしなかったのでやめた。Microsoft FluentUIを使いたかったけどライセンス関係が単純なMITではないようでやめた。結局スクラッチで30行程度のSCSSを書いた。一応flex boxを使っているためIEには非対応。
Hosting: Vercel
Next.jsを使うならインフラには同社が提供するVercelが第一候補になってくるので、とりあえず深く考えずにこれを選んだ。これも将来はAzure Static Web Appsに乗り換えたいと思っている。
Vercelは、何も考えなくても適当にデプロイするだけで全てがよしなに動いてくれるのが素晴らしい。持っているドメインのCNAMEを振り当てればSSL証明書もなんの操作もナシに自動取得してくれる。この辺の、裏側はすべて隠蔽して開発者がビジネスロジックやデザインの製作に集中できるようにしてくれる考え方は、Next.jsとVercelで一貫していてとても良い体験だと思う。
使用技術としてはこんな感じ。まだページングが無く全件取得しているため記事が増えるといずれ大変な事になる等の既知の問題があるので、そのうち対応しようと思う。あとはCloudflare CDNを使ったり意味もなくどこかでRustを使ったりしたい。
とりあえず動く物ができたので、蒙古軍の対応に戻る。