6 ポイント 投稿者 GN⁺ 2025-05-04 | 5件のコメント | WhatsAppで共有
  • Jekyll、Ghost、WordPress を使わずに自作したブログの事例
  • 基本要件は、所有ドメインの利用静的サイト生成SEO 準拠記事追加の容易さ
  • 中核となる構成は template.htmlrender.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.htmlgreetings.md + 各ポストのタイトル一覧で構成
  • 生成結果は ./blog/ フォルダに .html として保存される

5件のコメント

 
ifmkl 2025-05-07

私も現在、自分のブログをちょうど上のように運営しています。個人的な要件を満たすSSGを作って使っているんですよ。サムネイル画像、カテゴリー、タグ機能を活用するために個別のカスタム機能を入れているというわけです。添付する画像は自動でwebpに変換して参照するようにしていて、そのおかげでレンダリング速度にもとても満足しています。

 
winterjung 2025-05-07

おお、そういうカスタム機能は直接コードを書きながら追加していかれるんですか? 私もいつもDIYでやろうと思いつつ、以前から使っていたSSGブログフレームワークが提供する拡張機能やプラグイン機能のせいで、ためらってしまうんですよね。

 
ifmkl 2025-05-07

欲を手放し、欲さえ手放せば、あとはそれほど難しくありません。ssgもAIに頼めばコードは全部書いてくれるし、機能を追加してほしいと頼めば実際に全部追加してくれます(笑)

 
ndrgrd 2025-05-04

フォントさえきれいなものを選べば、かなり見られるものになりますね。

 
GN⁺ 2025-05-04
Hacker Newsの意見
  • ブログを始めるときにSSGを使ったが、最終的にはWordPressに移行して、より自由になった

    • 記事を書く妨げになるツールは避けることが重要
    • 執筆に集中するため、先延ばしを避けるべき
  • ブログとして成立するために必要な2つの要素

    • 投稿を日付順に並べ、日付を表示する必要がある
    • RSSフィードが必要
  • 独立したWebサイトへの愛着

    • 25年前にASPで始めたWebサイトが、今ではCommon Lispで運営されている
    • 最小機能のWebサイトとして始め、徐々に機能を追加していった
    • 新しいアイデアは常に魅力的だが、プロジェクトが制御不能なほど肥大化しないよう注意している
  • ブラウザで text/markdowntext/gemini をネイティブサポートしてほしい

    • 他形式への対応は公開のハードルを下げ、ユーザーに制御権を取り戻させる
  • "Minimum viable blog" という文字列が投稿タイトルに置き換わってしまうバグの指摘

  • シンプルなHTMLページでブログを運営していたが、今はAstroを使ってより発展したサイトを運営している

    • Astroはコンテンツ中心のサイトに最適化されたプラットフォーム
  • Bun JSと、HTMLをJS文字列として使う実験

    • IntelliJ IDEがHTMLを検出し、フォーマットとハイライトをサポートする
  • 15年間、最小限のブログを試行して学んだいくつかのコツ

    • JSXはサーバーサイドの文字列ビルダーとして有用
    • GH PagesはJekyllより簡単に使える
    • highlight.jsはコードハイライトに今でも有用
  • Hugo/ZolaとCloudflare Pagesを使った標準的な静的ブログフレームワークの手軽さ

    • Hugo Blog Awesomeテーマを使用
    • ページサイズを512kb以下に保っている
  • 古いブログを復活させる過程でHexoの使いづらさを経験

    • テーマがきちんと動作せず、独自テーマを開発するか悩んでいる
    • 複雑さは増すかもしれないが、問題を解決しようと努力している