ブログをFUNSTACK Staticで作り直したよ

目次

この記事はOpus4.8で生成してます!

こんにちは。6月も半ばですね。梅雨らしい天気が続いていて、洗濯物の行き場に困っています。

さて、去年の暮れに個人ブログを作った話を書いたばかりなのですが、性懲りもなくまた一から作り直しました。今回はFUNSTACK Staticという仕組みに載せ替えています。記事の中身はそのまま移してきたので、見た目だけ知らないうちに変わっていた、という方もいるかもしれません。

なぜまた作り直したのか

前回はNext.js + Fumadocsで、これはこれですごく良かったです。デザインも機能も最初から揃っていて、ほとんど書くことなく立ち上がりました。

ただ、ありものが良くできているぶん、自分で手を動かす余地があまり残っていなくて、「盆栽」として育てるには少し物足りなさもありました。せっかくの個人ブログなので、中身を全部自分で把握できるくらい小さく作って、気が向いたときにいじり倒したい。ちょうどRSC(React Server Components)でSSGする構成や、最近元気なRust製のツールチェーンを一度きちんと触ってみたかったのもあって、勢いで作り直すことにしました。

三日坊主の人間がブログそのものを作り直してしまうのは、たぶん現実逃避の一種です。そういうものですね。

FUNSTACK Staticについて

FUNSTACK Staticuhyoさんが作られているフレームワークで、React Server Componentsをベースにした静的サイトジェネレータです。ビルド時に全ページをHTMLとして吐き出すので、ランタイムにサーバーがいりません。生成物を静的ホスティングに置くだけで動きます。

嬉しいのは、記事本文やMarkdownの変換をビルド時のサーバー環境だけで描画して、クライアントに送るJavaScriptを最小限にできるところです。インタラクティブにしたい「島」の部分だけがスクリプトになる、という感じですね。

ルーティングはFUNSTACK Routerというのが別であって、こちらはNavigation APIベースになっています。普通のリンクを踏むとクライアント側でぬるっと遷移してくれます。Navigation APIを実戦で使うのは初めてだったので、地味に楽しかったです。

Rust製ツールチェーンが楽しい

今回いちばん遊べたのがこのあたりです。気づけばビルドまわりがRust製だらけになっていました。

  • Markdown変換・全文検索: ox-content。Markdownをmdastに変換するのも、全文検索のインデックスを作るのもこれ1つ。検索はCJK対応のBM25ランタイムが吐き出されて、それだけがクライアントに乗ります。

  • OG画像生成: takumi-js。記事ごとのOG画像をビルド時に描いてくれます。ヘッドレスブラウザがいらないのが偉い。この記事のOG画像も、サイトと同じトンマナになるように作り直しました。

  • シンタックスハイライト: shiki。ビルド時に色をHTMLへ焼き込むので、ハイライタ本体はクライアントに送られません。light/darkのデュアルテーマにCSS変数で追従させています。

Rustそのものを書いているわけではないのですが、こういう速いツールが裏で動いているのを眺めるのは気持ちがいいですね。コンパイラまわりの勉強も続けているので、いつかは中身も読めるようになりたいところです。

TypeScriptはネイティブ版に

型チェックはネイティブ版のTypeScripttsgo)に一本化しました。tscの代わりにtsgo --noEmitで型を見ています。速いし、せっかくなので新しいものを使ってみたい、という軽い気持ちです。

デザインを「余白」の方に寄せた

前回はありもののデザインに乗っていたぶん、見た目がいかにもテンプレート然としていたのが、実はちょっと気になっていました。今回は温かい紙の地・墨色の本文・くすませた琥珀のアクセントで、本の余白に書き込みをするような落ち着いた雰囲気を目指しました。

ブランドの脇にちょこんと置いている手描き風のアスタリスク(✳)がお気に入りで、記事の区切りやファビコン、OG画像にも使い回しています。落ち着いてはいるけれど、ちょっとだけ遊びがある、くらいの塩梅にできていたら嬉しいです。

ついでに開発まわりも整備した

作り直したついでに、linter/formatterをoxlint / oxfmtに、Git hooksをlefthookに揃えました。push前にフォーマット・lint・型チェック・ビルドが通ることを確認してくれるので、雑にコミットしても後で気づける安心感があります。ファビコンもようやく設定しました。

まとめ

そんなわけで、ブログをFUNSTACK Staticで作り直したという話でした。小さく作れたぶん、これからは気軽にいじれそうで楽しみです。盆栽として、ぼちぼち育てていきます。

例によって三日坊主が顔を出すかもしれませんが、半年に一回でも書ければ御の字、くらいの気持ちでやっていきます。それでは。


最終更新: 2026年6月15日