😺
そういえば、ちょっと前に自作ブログを作成した話
いきなりですが、ちょっと前に自分用のブログを自作しました！
世の中にはブログサービスも、Headless CMS も、静的サイトジェネレータも山ほどあります。
それでも作成した理由としては、
- Next.jsを用いて何かを作ってみたかった
- Markdownを中心にした開発フローをそのままブログにもちこみた
この2つが大きな理由です
採用した技術スタック
- Next.js
- velite
- xterm.js
一見ちょっと変わった組み合わせですが、これがかなりしっくりきました。
velite を使った理由
velite は、
Markdown / MDX を型安全に吸い上げてくれる Content Loader
のような存在です。
普通はContentlayerやCMSを使うところですが、veliteは
- 記事はただの
MDX - フロントマターも型で管理できる
- ビルド時に静的データ化される
という、「Markdown が主役」の思想がとても強いライブラリです。
さらに、ブログのためのデータベースやCMSも不要です。
posts/
├─ 2026-01-01-foo.md
├─ 2026-01-10-bar.md
これだけでブログが成立します。最高です。
詳しくはveliteのドキュメントを確認してみてください！
xterm.js を入れた理由
ブログなのに、なぜ xterm.js を入れたのか。
これは完全に好みの問題なのですが、、、
私はターミナルの世界観が意外に好きです。
そのため、xterm.jsを使い以下を実現しています
- ターミナル風の UI
- コマンドを打って記事を読むような体験
slコマンドも用意しています！！！
記事を書く流れ
ブログを書くときにやることはこれだけです。
- Markdown ファイルを作る
- Git に push する
- Vercel がビルドして公開
管理画面はありません。ログインもありません。
エディタだけで完結します。
これは想像以上に快適です。
まとめ
ブログを自作する理由は人それぞれだと思います。
でももし、
- Markdown で書くのが好き
- Git 管理したい
- CMS がしっくりこない
- CLI やターミナルの世界観が好き
という人には、
velite + Next.js + xterm.jsの構成は意外に刺さると思います！
見た目を作ったというより、自分の思想をそのまま Web に持ち込んだという感じのブログになりました。
出来はまだまだで、改善する場所がたくさんありますが、興味があれば、ぜひ触ってみてください。
そして、もっと良い構成やアイデアがあれば、ぜひ教えてほしいです。
Discussion