このサイトの技術スタック

このサイトは、記事を読みやすく残しながら、開発者向けツールのような見た目で楽しめるように作っています。ページの内容も、サイト自身の設定ファイルをのぞくような形でまとめました。

{
  "site": {
    "architecture": "Static Site",
    "generator": "Python 3.11+",
    "source": ["Markdown", "TOML front matter"],
    "output": "HTML / CSS / JavaScript"
  },
  "features": {
    "search": "記事本文を対象にした AND 検索",
    "codeHighlight": "Highlight.js",
    "diagrams": "Mermaid",
    "codeThemes": [
      "VS Code",
      "GitHub Dark Dimmed",
      "Tokyo Night Dark",
      "Dracula"
    ]
  },
  "publishing": {
    "target": "Cloudflare Pages",
    "deploy": "GitHubにpushすると自動ビルド・デプロイ"
  }
}

コンテンツと生成

記事はMarkdownで管理し、TOMLのフロントマターからタイトル、日付、タグなどを読み取ります。Pythonの小さなビルドスクリプトがHTMLを生成するため、公開時にサーバー側のアプリケーションやデータベースは必要ありません。

読むための機能

検索は記事本文まで対象にし、スペースで区切った複数の語をすべて含む記事を探します。コードブロックはHighlight.jsで色分けし、好みに合わせて4種類のテーマを切り替えられます。記事中の図はMermaidで表示します。

公開

生成物は静的ファイルです。GitHubへpushするとCloudflare Pagesが自動でビルドして公開します。