このブログを Markdown で自作した話
今あなたが読んでいるこのブログは、既存のブログサービスではなく、サイトの中に自分で作ったものです。仕組みはシンプルで、Markdown ファイルを置くだけで記事が増えるようにしました。この記事では、その構成を実際のコードを見せながら紹介します。
なぜ自作したのか
ブログサービスを使う選択肢もありました。でも、せっかくサイトを自分で作っているので、ブログも同じデザインの中に自然に収めたかったのです。
それに、記事を「ただのテキストファイル」として手元に持っておけるのは安心感があります。サービスに縛られず、内容は全部自分のものとして残せます。サービス終了や仕様変更に振り回される心配もありません。
仕組みのざっくり
やっていることは、それほど複雑ではありません。
- 記事は Markdown ファイルとして
content/blog/に置く - ファイルの先頭に、タイトルや日付などの情報（フロントマター）を書く
- ビルド時にそれらをまとめて読み込み、HTMLに変換してページにする
記事ファイルの先頭は、こんな形です。
---
title: "記事のタイトル"
date: "2026-06-02"
tags: ["Next.js", "個人開発"]
category: "article"
draft: false
---
ここから本文を Markdown で書く。
変換は gray-matter と marked で
このフロントマターと本文を分けるのに gray-matter、Markdown を HTML にするのに marked を使っています。中心の処理は、たったこれだけです。
import matter from 'gray-matter'
import { marked } from 'marked'
const raw = fs.readFileSync(filePath, 'utf8')
const { data, content } = matter(raw) // data=フロントマター, content=本文
const html = marked.parse(content) // 本文をHTMLへ
data から取り出したタイトルや日付を一覧表示に使い、html を記事ページに流し込むだけ。新しい記事を書きたくなったら、ファイルを一つ足すだけで公開できるので、書くことに集中できます。
下書き（draft）と読了時間も仕込む
フロントマターに draft: true を付けた記事は、本番ビルドのときだけ一覧から除外するようにしています。書きかけを安全に置いておけるので便利です。あわせて、本文の文字数から読了時間をざっくり計算して「約◯分で読めます」と出すようにしました。日本語は1分あたり約500文字で見積もっています。こうした小さな工夫を後から足せるのも、自作の良いところです。
カテゴリで「お知らせ」も兼ねる
記事には「カテゴリ」を持たせていて、category: "news" を付けた記事は、トップページの「お知らせ」欄にも出るようにしました。お知らせと記事を別々に管理しなくて済むので、運用がぐっと楽になっています。
道具を自分の手になじむ形にできるのは、自作の良いところ。Next.js での全体方針は「Next.js（App Router）で個人サイトを作るとき、最初に決めたこと」にまとめています。これからも少しずつ手を入れていくつもりです。