このサイトの出力方法 2024

方針

• 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 経由で利用するサービス。

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