---
title: GitHub PagesをクリーンURL化した記録 〜Cloudflareプロキシ + Transform Rules〜
tags:  #cloudflare #github pages #dns  
author: [星影](https://www.docswell.com/user/unsoluble_sugar)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/PJR9181979.jpg?width=480
description: Zennで書いた記事のダイジェスト版です。  ▼Cloudflare プロキシ + Transform Rules で GitHub Pages をクリーンURL化した記録 https://zenn.dev/unsoluble_sugar/articles/f62f1fdc63b8e5
published: July 31, 26
canonical: https://www.docswell.com/s/unsoluble_sugar/ZJW61M-2026-07-31-cloudflare-clean-url
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/PJR9181979.jpg)

TECH TALK
GitHub Pagesを
クリーンURL化した記録
〜Cloudflareプロキシ + Transform Rules〜
2026/07/31
@unsoluble_sugar


# Page. 2

![Page Image](https://bcdn.docswell.com/page/PEXQY8Y3JX.jpg)

この発表の位置づけ
現在個人で開発中（未リリース）のWebアプリの話
リリースに先立って、ドメイン・ホスティング・配信の公開基盤を進めてきた
その基盤づくりの最後に残ったのが、URLの見た目の問題だった
URLは共有もブックマークも通る場所。リリース前に片付けたかった
今回の題材: 公開基盤を整える中でぶつかった、URLまわりの記録
2


# Page. 3

![Page Image](https://bcdn.docswell.com/page/3EK93K3NED.jpg)

今日話すこと
1 URLが汚い問題
消せないURLと構成
2 設定手順
順序が命の4手順
3 ハマりどころと運用
落とし穴と運用メモ
3


# Page. 4

![Page Image](https://bcdn.docswell.com/page/L73WGZGZ75.jpg)

CHAPTER 01
URLが汚い問題


# Page. 5

![Page Image](https://bcdn.docswell.com/page/87DK1R14JG.jpg)

前提：どこに何を置いているか
GitHub
Pages
1 HTML/CSS/JSを配信
Cloudflare
R2
2 75MBのアセット配信
Cloudflare
DNS
3 apexドメイン管理
つまり: Cloudflareはすでに構成の中にある。足りないのはリライトの仕組みだけ
5


# Page. 6

![Page Image](https://bcdn.docswell.com/page/VJPKQWQVE8.jpg)

なぜURLが汚れるのか
本体のHTMLはランタイムの制約で index.dc.html / app.dc.html になる。アプリ側
では変えられない
GitHub Pagesがルートに自動配信するのは index.html だけ。リライトエンジンもない
結果、訪問者のアドレスバーに .dc.html が残ってしまう
6


# Page. 7

![Page Image](https://bcdn.docswell.com/page/2EVV585REQ.jpg)

従来の対処と、その限界
これまで
リダイレクトスタブ
index.htmlを置いて.dc.htmlへ飛ばす。動
くがアドレスバーが書き換わるのは避けら
れない
採用
Cloudflareプロキシ
オレンジ雲（＝プロキシON）+ Transform
Rulesで、見えるURLはそのままに背後だ
け書き換える
7


# Page. 8

![Page Image](https://bcdn.docswell.com/page/57GL6566EL.jpg)

見えるURLは
/ と /app のまま
8


# Page. 9

![Page Image](https://bcdn.docswell.com/page/4EQY4Z42JP.jpg)

CHAPTER 02
設定手順


# Page. 10

![Page Image](https://bcdn.docswell.com/page/KJ4WQ3QP71.jpg)

順序が命
Step0
証明書の発行完了を →
確認
Step1
SSL/TLSをFull
(Strict)
→
Step2
Aレコードを
プロキシ化
→
Step3
Transform Rules
作成
ポイント: 順序を崩すと、リダイレクトループや証明書の発行失敗に直面する
10


# Page. 11

![Page Image](https://bcdn.docswell.com/page/LE1YP1PX7G.jpg)

⓪ 前提：証明書の発行完了を待つ
発行中にオレンジ雲化すると、GitHub側のDNSチェックを妨げることがある
プロキシ化は「証明書が発行されたあと」でなければならない
gh api repos/<owner>/<repo>/pages \
--jq '{cert_state: .https_certificate.state}'
11


# Page. 12

![Page Image](https://bcdn.docswell.com/page/GEWG282KJ2.jpg)

① SSL/TLSをFull (Strict)へ
Flexibleのままオレンジ雲にすると、Cloudflare ↔ オリジンがHTTPになる
GitHub PagesのHTTPS強制と衝突してリダイレクトループが発生する
ダッシュボード → SSL/TLS → 概要 → 暗号化モード を変更
順序の理由: ここを飛ばして雲を切り替えると、この後で必ずループにハマる
12


# Page. 13

![Page Image](https://bcdn.docswell.com/page/47ZLD8DNJ3.jpg)

② apexのAレコードをプロキシ化
Pages用のAレコード4本すべてを「プロキシ済み」へ
wwwのCNAMEはグレー雲のまま触らない
www → apexのリダイレクトと、約90日ごとの証明書自動更新を維持するため
185.199.108.153
185.199.109.153
nslookup myapp.app 1.1.1.1
185.199.110.153
185.199.111.153
# CloudflareのIPに変わるか確認
13


# Page. 14

![Page Image](https://bcdn.docswell.com/page/YJ6W1P19JV.jpg)

③ Transform Rulesを2本
ルール名 フィルタ式（http.request.uri.path） 書き換え先（Static）
index.dc.html
clean-url-root eq "/"
app.dc.html
clean-url-app eq "/app" or eq "/app/"
クエリ: 「保持」に設定して ?theme=dark などを落とさない
14


# Page. 15

![Page Image](https://bcdn.docswell.com/page/GJ5M4K4DJ4.jpg)

CHAPTER 03
ハマりどころと運用


# Page. 16

![Page Image](https://bcdn.docswell.com/page/9E29VWLM7R.jpg)

踏んだ落とし穴
パスが二重スラッシュに
→ 入力欄の / は固定表示。
値はスラッシュなしで書く
/app/
だけ404
→ 末尾スラッシュは別のパ
ス。 or で両方を拾う
デプロイ直後に古い応答
→ エッジ伝播のラグ。数十秒
待って再検証すれば収束する
16


# Page. 17

![Page Image](https://bcdn.docswell.com/page/D7Y43LQPEM.jpg)

確認はリダイレクト数で行う
check() { curl -s -o /dev/null \
-w "$1 -> %{http_code} (redirects:%{num_redirects})\n" -L "$1"; }
check https://myapp.app/
# 200 redirects:0
check https://myapp.app/app
# 200 redirects:0
check "https://myapp.app/app?theme=dark"
# クエリ保持を確認
diff <(curl -s https://myapp.app/) \
<(curl -s https://myapp.app/index.dc.html)
見るべき値: redirects:0 なら書き換えが効いている
17


# Page. 18

![Page Image](https://bcdn.docswell.com/page/VENYV4KMJ8.jpg)

R2のCORSにwwwを足す
wwwはapexへリダイレクトする。それ
でも外から到達しうるオリジンではある
{
"AllowedOrigins": [
"https://myapp.app",
"https://www.myapp.app"
apexだけ許可していると、wwwを起点
にした参照でR2が弾かれる
コードが参照しうるオリジンを洗い出
し、Origin付きcurlで1つずつ確認する
],
"AllowedMethods": ["GET", "HEAD"],
"MaxAgeSeconds": 86400
}
18


# Page. 19

![Page Image](https://bcdn.docswell.com/page/Y79P6QVWE3.jpg)

運用メモ
証明書の更新に失敗したら「グレー雲へ戻す → 再発行 → オレンジ雲」で復旧
リダイレクトスタブは削除しない。プロキシ外時のフォールバックになる
副産物として、Cloudflareのゾーン解析（リクエスト数・帯域）が使えるようになる
19


# Page. 20

![Page Image](https://bcdn.docswell.com/page/G78DZGPR7D.jpg)

まとめ
1 順序が全て。証明書の発行完了 → Full
3 経路が増えたら許可リストを見直す。R2
2 wwwのCNAMEはグレー雲のまま。リダイ
4 切り戻せる状態を残す。リダイレクトス
(Strict) → オレンジ雲 → Transform Rules
レクトと証明書の更新はGitHubに任せる
のCORSにwwwを足す
タブはフォールバックとして温存
20


# Page. 21

![Page Image](https://bcdn.docswell.com/page/L7LMDG12JR.jpg)

リポジトリ変更ゼロ
ダウンタイムゼロで
クリーンURL化
21


# Page. 22

![Page Image](https://bcdn.docswell.com/page/4EMYPQW9EW.jpg)

元記事
Cloudflareプロキシ + Transform Rules で
GitHub Pages をクリーンURL化した記録
zenn.dev/unsoluble_sugar/articles/f62f1fdc63b8e5
22


# Page. 23

![Page Image](https://bcdn.docswell.com/page/PER918Y9J9.jpg)

ご清聴ありがとうございました
@unsoluble_sugar