このサイトの出力方法

方針

  • 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 を出力するスクリプト

npm コマンドで、ビルド後のタイミングでそれぞれ呼び出す。

インフラ

  • S3
  • CloudFront
  • Github Actions

リリースブランチが更新されたら、Github Actions で S3 のファイルを全更新して CloudFront のキャッシュをクリアする。

使わなかったもの

  • ヘッドレスCMSサービス

記事を書いて保存しておき、API 経由で利用するサービス。

思想的にはこのような形態のサービスは素晴らしいのだが、営利目的となると事業戦略が機能やサービス継続性に影響を与える。端的には使いづらいので、個人サイトは自分で管理したほうが良いという結論に至った。