コンテンツにスキップ

Tips

  • in Tips

Cloudflare WorkersでMkDocsをデプロイする (2025年7月版)

調べるたびに新しくなるMkDocsデプロイ方法のメモ (2025年7月版)
GitHubのプライベートリポジトリにpushしたらCloudflareでサイトを公開できるようにする

MkDocsをセットアップ

割愛。git push origin main でリポジトリ更新までできている状態
リポジトリはprivateで構わない。

ディレクトリ構成は次のとおり。

./
│  mkdocs.yml
│  requirements.txt
│  wrangler.toml
└─docs/


requirements.txt...今回はmkdocs-materialなので次のように指定

requirements.txt
mkdocs
mkdocs-material


wrangler.toml ...Cloudflareの自動デプロイに必要

wrangler.toml
name = "<Cloudflare Workersのプロジェクト名>"
compatibility_date = "yyyy-MM-DD(動作確認できた日)"

[assets]
directory = "./site"

Cloudflareをセットアップ

  1. CloudflareダッシュボードでWorkersプロジェクトを新規作成 (Import a repository から)
  2. 対象リポジトリを選択
  3. Workers Project 名を指定 (GitHubリポジトリ名と異なっていてもいい)
  4. Build command に pip install -r requirements.txt && mkdocs buildと指定
  5. Deploy command は既定値 npx wrangler deploy
  6. Non-production branch deploy command, Pathも既定値でOK
  7. Create and deploy をクリックするとデプロイされる

ドメイン名も設定する

(Cloudflare Domainsで既に独自ドメインを持っている前提)

  1. WorkersプロジェクトのSettingsタブで、Domains & Routers セクションの workers.devとPreview URLsもEnableしておく
  2. 同じセクションで Add > Route から使いたいドメインをZoneで選択
  3. Routeには今回ルートでいいので www.mydomain.com/* と指定
  4. 保存すれば即時反映される
  • in Tips

MkDocs 構文早見表

  • 自分用構文早見表
  • Header level 1 is page title and url

Metadata

  • Future created date will be hidden as draft
  • slug is abbreviation for url

Syntax

フォント装飾

Markdown方言になるようなプラグインはなるべく使わない感じで。

  • 太字 ：__アンダーライン2個__ または **アスタリスク2個**
  • 斜体 ：_アンダーライン1個_ または *アスタリスク1個*
  • 太字斜体 ：___アンダーライン3個___ または ***アスタリスク3個***
  • ハイライト ：==イコール2個== pymdownx.markで有効化。Obsidianでも既定で使えるので採用
  • 取り消し線： ~~チルダ2個~~ pymdownx.tilde で有効化。Obsidianでも既定で使えるので採用

引用
> で行を開始

Codeblock

Code block with title
    ```toml title="wrangler.toml"
    name = "skoshbyte-mkdocs"
    compatibility_date = "2025-07-28"

    [assets]
    directory = "./site"
    ```
Mermaid Flowchart
%% タイトルをつけるとコードブロック表示になる
flowchart LR
    Start --> Stop

flowchart LR
    Start --> Stop

Admonitions

Material方言っぽいのであんまり使いたくないな～と思いつつ便利なので

https://squidfunk.github.io/mkdocs-material/reference/admonitions/

Note

Abstract

Info

Tip

Success

Question

Warning

Failure

Danger

Example

Quote

Kawaiiよね…虹色で