このサイトの出力方法
方針
- Markdown で記事を書いて、Next.js で静的ファイルとしてビルドする
- 静的な HTML ファイル1つで完結させる
- Next.js が自動で生成する JavaScript や CSS は削除する
- 他の Jamstack なシステムにも乗り換えやすくする
ソース上は20年前の HTML と大して変わらない状態にする。
npm
- Next.js 14
サンプルの blog-starter をベースに構築
- remark-gfm
- remark-html
Markdown を HTML 出力する。remark-gfm はテーブル用。
- csso
minify 用のライブラリ。CSS は外部ファイルにせず、すべてインライン出力している。
- pngjs
PNG を生成できるライブラリ。favicon 用の画像を出力するために使用。とはいえ 16x16 の黒いだけの画像。
- rss
RSS を出力するライブラリ。Markdown の Header matter の内容を見て、公開中の最新の記事10件を出力してる。
CSS フレームワーク
- chota
軽量な CSS フレームワーク。未圧縮 minify で 18kb、gzip で 3kbくらい。機能は丁度いい具合に抑えられている。
できれば CSS はデフォルトスタイルでいきたいが、見づらいこともあるので導入。
Next が出力したファイルに手を加える
- GTM タグを HTML に挿入するスクリプト
- 不要な script タグ、link タグ を削除するスクリプト
- 開発ブランチからリリースブランチにマージとプッシュを行うスクリプト
- sitemap.txt を出力するスクリプト
- robots.txt を出力するスクリプト
- feed.xml を出力するスクリプト
- favicon.png を出力するスクリプト
- Github からソースを取得してこのサイトのコンテンツとして公開するスクリプト
npm コマンドで、ビルド後のタイミングでそれぞれ呼び出す。
インフラ
- S3
- CloudFront
- Github Actions
リリースブランチが更新されたら、Github Actions で S3 のファイルを全更新して CloudFront のキャッシュをクリアする。
使わなかったもの
- ヘッドレスCMSサービス
記事を書いて保存しておき、API 経由で利用するサービス。
思想的にはこのような形態のサービスは素晴らしいのだが、営利目的となると事業戦略が機能やサービス継続性に影響を与える。端的には使いづらいので、個人サイトは自分で管理したほうが良いという結論に至った。