GitHub PagesからCloudflare Pagesへの移行
Github Pages
から
Cloudflare Pages
に移行したときのメモを以下に記す。
背景
本ブログは、GitHub
でソース管理し、静的サイトジェネレーターHugo
で静的サイトを生成し、GitHub Pages
で公開している。
過去には、静的サイトホスティングサービスとして、Netlify
とCloudflare Pages
を使ったことがあったが、それぞれ次の理由で採用を見送っていた。
Netlify
: CDNのエッジサーバが日本になく、アクセスが遅いCloudflare Pages
: ビルド開始までに時間が掛かる(数分レベル)
しかし、2022年5月10日の記事
A new era for Cloudflare Pages builds
でCloudflare Pages
のビルド時間が改善したということを読んだ。
試してみると、確かにビルド時間が大幅に改善していたので、これを機会にCloudflare Pages
に移行した。
CDNの設定もうまくいっていなかったので今回合わせて対応した。
Cloudflare Pages側の操作
任意のGitHubリポジトリを選択するだけで、Cloudflare Pages
と連携できるのはNetlify
同様ありがたい。
次の手順で設定した。
PagesのCreate a project > Connect to Git
を選択
![Connect to Git](https://res.cloudinary.com/meganii/image/upload/v1660638411/ksj4kggulmmwjdyzeg3j.png)
「Deploy a site from your account」からHugoのリポジトリを選択
![Deploy a site from your account - Cloudflare Pages](https://res.cloudinary.com/meganii/image/upload/v1660717388/npbbtjyqwkufmsyfvuvj.png)
Set up build and deployments
![Set up build and deployments - Cloudflare Pages](https://res.cloudinary.com/meganii/image/upload/v1660717458/ep9kdirmtmfzoygrrhwy.png)
![Set up build and deployments - Cloudflare Pages](https://res.cloudinary.com/meganii/image/upload/v1660717483/giuzmm4wmtr2xasijzq9.png)
Building and deploying
![ALT](https://res.cloudinary.com/meganii/image/upload/v1660717514/kmtm5luiudojeyg4czom.png)
![ALT](https://res.cloudinary.com/meganii/image/upload/v1660717608/xokt2ghljvzeuynqpsvg.png)
![ALT](https://res.cloudinary.com/meganii/image/upload/v1660717626/tw91om4m2fdfu9upgwse.png)
Hugo versionの指定
Hugo
でTailwindCSS v3
を利用する場合、現時点ではNode.js 16系が必要となるため、HUGO_VERSION
と合わせてNODE_VERSION
、NPM_VERSION
を、Settings > Environment variables
から指定した。
![Cloudflare Pages Environment variables](https://res.cloudinary.com/meganii/image/upload/v1660723920/j5o8vibmbmwjwgmq32fc.png)
Webhook APIの生成
いまのところ、Cloudflare Pages
単体ではスケジュールビルドは実施できない。
そのため、スケジュールビルドのためにGitHub Action
を継続利用する。
Cloudfare Pages
では、Webhook APIが用意されている。
このWebhook APIをGitHub Action
から叩くことで、Cloudflare Pages
のビルドをキックする。
![Webhook API](https://res.cloudinary.com/meganii/image/upload/v1660733967/oi9jxvztaxw4jnjfkanu.png)
GitHub(GitHub Pages)側の操作
GitHub Pagesへのpushデプロイを停止(Cloudflare Page側の自動ビルドに任せる)
https://github.com/meganii/www.meganii.com/commit/a98b16d5e95414583cbecbebfb39d88091d3082a
GitHub ActionでCloudflare PagesのWebhookを叩く
name: cloudflare pages
on:
schedule:
- cron: '30 10 * * *'
jobs:
deploy:
runs-on: ubuntu-20.04
steps:
- name: Deploy
run: curl -X POST "${{ secrets.CLOUDFLARE_PAGES_WEBHOOK }}"
GitHub Pagesの停止とドメイン切り替え
この部分は順番が前後している可能性もあるが、次の対応をした。
- GitHub Pagesの
Unpublish site
- Custom Domainの削除
![GitHub Pagesの停止とドメイン切り替え](https://res.cloudinary.com/meganii/image/upload/v1660725166/icj8dsef1zxhdqs5dexo.png)
まとめ
Cloudflare Pages
は個人ブログとして使う分には申し分ない- Origin ServerとCDNをCloudflareにまとめることで、CDN配信周りを少し理解できた
Related contents
![Eyecatch](https://res.cloudinary.com/meganii/image/upload/v1574561130/AMP_%EF%B8%8F_Real_URL_a1iiwa.png)
TECH
2019.11.16
![Eyecatch](https://i.gyazo.com/6b699bab2307c88c91ee76b026fd981b.png)
TECH
2022.08.11
![Eyecatch](https://res.cloudinary.com/meganii/image/upload/f_auto,q_auto/v1594903789/sislab_hugo_j8ykf6.png)
TECH
2023.02.03
![Eyecatch](https://res.cloudinary.com/meganii/image/upload/c_scale,f_auto,q_auto/v1594902885/tech_ben4sq.png)
TECH
2020.05.11
![Eyecatch](https://res.cloudinary.com/meganii/image/upload/f_auto,q_auto/v1594903789/sislab_hugo_j8ykf6.png)
TECH
2020.03.13
![Eyecatch](https://res.cloudinary.com/meganii/image/upload/c_scale,f_auto,q_auto/v1594902885/tech_ben4sq.png)
TECH
2019.10.11
![Eyecatch](https://res.cloudinary.com/meganii/image/upload/c_scale,f_auto,q_auto/v1594902885/tech_ben4sq.png)
TECH
2019.10.06
![Eyecatch](https://res.cloudinary.com/meganii/image/upload/c_scale,f_auto,q_auto/v1594902885/tech_ben4sq.png)
TECH
2017.12.22