Hello, World: このサイトの仕組み

ログへようこそ。この最初の投稿はドキュメントも兼ねている:今読んでいる内容はすべて、このサイトのgitリポジトリにある.mdxファイルからレンダリングされたものだ。

技術スタック

サイトの内部は、意図的に地味な作りになっている:

Next.js 14(App Router)——プロフィールページ、このブログ、~/toolsは、すべて単なるルートにすぎない
MDX——記事はcontent/posts/にあるMarkdownファイルで、gray-matterでパースしている
shiki——ターミナルグリーンのカスタムテーマによるコードハイライト
Vercel——git pushすれば約30秒で公開される

CMSもデータベースもない。記事を公開する手順はこれだけ:

publish.sh

git add content/posts/new-post.mdx
git commit -m "Post: something worth reading"
git push   # あとはVercelがやってくれる

なぜMDXなのか

普通のMarkdownでも執筆の95%は事足りるが、MDXを使えば必要なときに本物のReactコンポーネントを記事に埋め込める——インタラクティブなデモ、カスタムのコールアウト、もしかしたらホームページのピクセルペットだって。

example.tsx

export function Greeting({ name }: { name: string }) {
  const hour = new Date().getHours()
  const salute = hour < 7 ? 'zzz...' : `hello, ${name}`
  return <span className="glow">{salute}</span>
}

このブログのルール:図やデモの方が文章より分かりやすいなら、そのデモを記事の中に組み込む。

次にやること

~/toolsは今後、小さなユーティリティ群へと育てていく予定——まず最初は、学術論文の校正スキルから
RSSフィード、タグフィルター、もしかしたら検索機能も——記事が十分増えて必要になったら

以上。exit 0。