Svelteでブログサイト作った

Life

モチベーション

  • プログラミングにおけるトラブルシューティングなどを記録に残して後で見返せるようにしたい
  • たまにポエムを書きたい
  • 生きた証を残したい

技術スタック

Webフレームワーク: SvelteKit(SSG)
UIフレームワーク: Svelte
コンポーネント: shadcn-svelte
バンドラー: Vite
Markdownプロセッサー: unified + 自作remark/rehypeプラグイン
テスト: Playwright + Storybook を予定（未実装）

ホスティングサーバー: Cloudflare Pages (無料)
ドメインレジストラー: Cloudflare Registrar (年間11ドル)

技術選定の紆余曲折

最初はVike+Reactで進めようと思った
ドキュメントを見ながら、Vikeを少し触ったみたが、
公式ドキュメントが読みにくく、先達の技術記事なども少なかったので3時間ほどで撤退

次はAstro+Reactで進めた
これは時間をかけてロジックやデザインまで完成させたのだが、開発も終了間近となってからmarkdownの最終処理がカスタムできないことが発覚
code-blockを独自のReactコンポーネントで描画したかったが、rehype-pluginでhtmlレベルでのカスタムすることしかできず、断腸の思いでAstro撤退

Reactの他のSSGツールは、Next.jsとwakuを検討したが、総合的な観点で採用に至らず

Svelte+SvelteKitに挑戦して、そのまま完成を迎えた

Svelteで困ったところ

Svelteにおいてmarkdownを利用する際はmdsvexを使うというのが、公式でも推奨される手法なのだが
markdown内で波かっこが使えないなどの致命的な仕様？バグ？に遭遇した
.svelteファイル内でのmarkdown syntax利用を一級サポートとしているのかもしれない

結局、rehype-pluginを自作して自分でmarkdown=>svelteを実現させた

このブログで気に入ってるところ

  • SSGでホスティングサーバーなので、サーバー費が無料（ドメイン代だけ年間11ドル）
  • すべてのボタンが、Ctrl+Clickなどの特殊クリックに対応しつつ、通常のクリックは、ソフトナビゲーションで遷移するので、ページリロードが発生せず表示が速い
  • ダークモード/ライトモード 対応
  • 検索系がすべてURL Search Parameterと同期されており、履歴も完備でかつ、URLから直接アクセスも可能
  • 記事はMarkdownで記述する方式。Markdown処理の自作プラグインで、どんな記法も対応可能
  • コードブロックは、シンタックスハイライト、コピーボタン、ファイルタイトル、言語ロゴの表示に対応
  • ブログ記事のURLパスは/posts/[日付文字列]/index.htmlのようにフラット管理しており、カテゴリやタグはパスに反映させずにあくまでメタデータとして扱うことで、あとから変更可能にしている
  • すべての技術スタックに納得している。SSGなのでサーバー負荷が低いため維持費が安くて、Svelteがコンパイル言語なので表示が速くて、shadcn-svelteなどの利用で開発効率が高い手法であると強く確信している。
  • 検索は、入力中に検索結果が即時反映する。完全一致ではなくあいまい検索に対応している。

難しかったこと

remark/rehypeのpluginの自作が1番時間かかったと思う
ASTの編集だけではなく、markdownパーサーの部分からカスタムしたのだが、ドキュメントがまったくなかったので
ClaudeCodeにunifiedや既存のプラグインのソースコードを読ませて、解説してもらったりした
パーサーの作成自体が初めてだったので、理解するのに手間がかかった

デザイン面では、色の組み合わせの見つけ方の最適解が分からない
ダークモードのカラーリングは満足のいく出来に仕上げらず、あきらめた

待ってること

依存先ライブラリの新機能待ち

所感

ホームページというのは、開発者以外にとってもっとも分かりやすい成果物だと思うので、親兄弟に自慢して褒められたい