Obsidianからブログを更新できるようにした

2026-02-09

GitHub PagesからCloudflare Pagesに移行した

このブログのホスティングをGitHub PagesからCloudflare Pagesに移行した。

ブログを書くときの理想は「どこでも書けて、すぐ確認できる」ことだと思う。以前はMacでVimを開いて記事を書き、hugo serverでプレビューして、pushしてデプロイする流れだった。執筆環境をObsidianに移してからは出先でも書けるようになったが、プレビューだけはローカルでHugoを動かす必要があり、結局Macの前に座らないと記事を仕上げられなかった。

Cloudflare Pagesに移行した最大の理由は、PRプレビュー機能にある。PRを作るだけでプレビューURLが自動生成されるので、Obsidianで書いてpush¹すればブラウザ上で見た目を確認できる。ローカル環境は不要になり、書いてから公開するまでの一連の作業がモバイルだけで完結するようになった。

Pagesのビルド設定

項目	値
フレームワーク	Hugo
ビルドコマンド	`hugo --gc --minify`
ビルド出力ディレクトリ	`docs`
環境変数	`HUGO_VERSION` = `0.152.2`

Cloudflare PagesはHugoのフレームワークプリセットを持っており、環境変数HUGO_VERSIONを指定すれば対応するバージョンのHugoを自動でダウンロードしてくれる。

DNS移行

もともとムームードメインでドメインを取得し、GitHub Pages用のDNS設定をしていた。Cloudflare Pagesでカスタムドメインを使うにはネームサーバーをCloudflareに向ける必要がある。

手順としては:

Cloudflareにtellme.tokyoゾーンを追加
ムームードメインで「弊社サービス以外のネームサーバ」を選択
Cloudflareが提示するネームサーバーを設定
Pagesでカスタムドメインを設定し、tellme.tokyoをtellme-tokyo.pages.devに向けるCNAMEを追加する

同期ワークフロー

Obsidianで記事を書いたらGitHub Actionsでtellme.tokyoリポジトリにPRを作成する仕組みも同時に構築した。

`vault` repo (Obsidian)
vault/blog/tellme.tokyo/*.md
    │ git push (main)
    ▼
GitHub Actions (sync-blog.yaml)
    │ front matter変換 + page bundle化
    │ tellme.tokyo に PR 作成/更新
    ▼
`tellme.tokyo` repo (PR: preview ブランチ)
    │
    ▼
Cloudflare Pages
    ├── preview ブランチ → プレビューURL
    └── main (merge後) → https://tellme.tokyo

pushすると自動でPRが作成され、Cloudflare PagesのプレビューURLがコメントに投稿される。

移行前後の比較

	GitHub Pages	Cloudflare Pages
ビルド	GitHub Actions	Cloudflare Pages自動ビルド
DNS	ムームーDNS	Cloudflare DNS
PRプレビュー	なし	自動 (ブランチごとに固有URL)
Draftプレビュー	`hugo server`ローカルのみ	`--buildDrafts`でプレビュー環境に反映可能
デプロイ速度	1-2分	数秒〜1分

PRプレビューのおかげでローカル環境なしに記事の見た目を確認できるようになった。Obsidianで書いてpush¹するだけで、あとはブラウザ上で完結する。

pushはObsidianからできる ↩︎ ↩︎