- Jekyll、Ghost、WordPress を使わずに自作したブログの事例
- 基本要件は、所有ドメインの利用、静的サイト生成、SEO 準拠、記事追加の容易さ
- 中核となる構成は
template.html と render.py スクリプトで、Markdown ベースの記事作成だけで すべてのページを自動レンダリングする
- Python ライブラリ
markdown2 を活用し、Markdown → HTML 変換とページ生成を自動化
- SEO と 現代的な Web 標準を満たしつつ、シンプルにコンテンツを追加できる構成を重視
ブログの要件
- 既存の所有ドメインを使うこと
- 現代的な Web 標準と SEO 親和性を維持すること
- 記事の追加が非常に簡単であること
- すべてのページが静的に生成されること
実装手順の要約
template.html ファイルを作成 → 基本 HTML レイアウトを構成
pip install markdown2 コマンドで Markdown レンダリングツールをインストール
O1 に レンダリング用 Python スクリプト(render.py)の作成を依頼
posts/ フォルダ内に eng.md 形式でポストを作成
render.py を実行して HTML 変換と出力フォルダを生成
中核となる HTML テンプレート(template.html)
- HTML 構造は シンプルでミニマルで、
{{ content }} の位置に Markdown のレンダリング結果を挿入
- CSS は
system-ui ベースのフォント、レスポンシブなパディング、color-scheme 設定などで 可読性を確保
中核となる Python レンダリングスクリプト(render.py)
markdown2 を使って各 Markdown ポストを HTML に変換
- 変換時に
<img> のパスを /posts/{post_code}/ に自動置換
- HTML のタイトルは Markdown の
# 見出しから抽出
index.html は greetings.md + 各ポストのタイトル一覧で構成
- 生成結果は
./blog/ フォルダに .html として保存される
5件のコメント
私も現在、自分のブログをちょうど上のように運営しています。個人的な要件を満たすSSGを作って使っているんですよ。サムネイル画像、カテゴリー、タグ機能を活用するために個別のカスタム機能を入れているというわけです。添付する画像は自動でwebpに変換して参照するようにしていて、そのおかげでレンダリング速度にもとても満足しています。
おお、そういうカスタム機能は直接コードを書きながら追加していかれるんですか? 私もいつもDIYでやろうと思いつつ、以前から使っていたSSGブログフレームワークが提供する拡張機能やプラグイン機能のせいで、ためらってしまうんですよね。
欲を手放し、欲さえ手放せば、あとはそれほど難しくありません。ssgもAIに頼めばコードは全部書いてくれるし、機能を追加してほしいと頼めば実際に全部追加してくれます(笑)
フォントさえきれいなものを選べば、かなり見られるものになりますね。
Hacker Newsの意見
ブログを始めるときにSSGを使ったが、最終的にはWordPressに移行して、より自由になった
ブログとして成立するために必要な2つの要素
独立したWebサイトへの愛着
ブラウザで
text/markdownとtext/geminiをネイティブサポートしてほしい"Minimum viable blog" という文字列が投稿タイトルに置き換わってしまうバグの指摘
シンプルなHTMLページでブログを運営していたが、今はAstroを使ってより発展したサイトを運営している
Bun JSと、HTMLをJS文字列として使う実験
15年間、最小限のブログを試行して学んだいくつかのコツ
Hugo/ZolaとCloudflare Pagesを使った標準的な静的ブログフレームワークの手軽さ
古いブログを復活させる過程でHexoの使いづらさを経験