どうもこんばんわ。
目次のところの見た目を若干変えてみました（色変えただけ）

本題

どうやらNetlifyと違って、日本にCDNがあるらしく、（日本からも）読み込みが早いらしい。
このブログはNetlifyにあるわけですが（記述時時点）、もし良さそうなら移行しても良いかも？

適当に Next.js でサイトを作る

作りました。
カラーコードのRGBをぞれぞれ取り出して、明るさを掛け算(0.0~1.0)することで簡易的にちょっと暗い色と明るい色を出すことができるサイトです。
カラーコード 明るさ とかで調べたらこれが一番早そうだったので...

https://github.com/takusan23/color-code-brightness

アカウントを作る

はい。言語設定から日本語が選べます。

アカウントを作るとすぐにダッシュボードみたいな画面が開きます。

Pages を押す

新しいプロジェクトを押すとこんなのが出る

今回はGitHubにあるNext.jsプロジェクトをホスティングしようと思います。
他にもローカルで開発したindex.html / index.css / index.jsをアップロードして公開する方法もあります。お手軽ですね

Next.jsを選んだらいい感じにビルドコマンドとかが埋まりました。楽だね

ビルドが始まりました！こんな感じ

そしたらなんかコケた

SyntaxError: Unexpected token '?'

Node.jsのバージョンが足りない？合ってないらしいので、合わせます。

https://developers.cloudflare.com/pages/platform/language-support-and-tools/

環境変数に入れる方法と、.nvmrcをリポジトリに置く方法（package.jsonと同じフォルダに入れる）がありますが、とりあえず後者でいきます。

手元の開発環境でnode -vしたらv18.13.0だったのでそうしました。

これでコミットしてプッシュすると自動でビルドが試行されるはずです。無事ホスティングに成功しました。

確かに早い気がする

Netlifyでも同じサイトをホスティングしてみたけど、ちょっとだけCloudflare Pagesのほうが読み込み早い気がする。
良さそう！！！

PageSpeed Insights（何使えばいいか知らないのでとりあえず）で測ってみましたが、やっぱCloudflareのほうがSpeed Indexの数値が良いですね。

GitHub Actions からホスティングできるか確認

別にCloudflare Pagesのビルド機能で十分なのですが、GitHub Actionsを使ってたのを辞めるのは寂しいので（？？？）（なんか動いてたほうがおもろい←？？？）

https://developers.cloudflare.com/pages/how-to/use-direct-upload-with-continuous-integration/#use-github-actions

ちょうどいい action があった

こちらを使わせてもらいましょう。thx!

https://github.com/cloudflare/pages-action

必要な環境変数を用意する

GitHub Actions で使う機密情報を作りに行きます。
多分2ついる

CLOUDFLARE_API_TOKEN

アカウントページ？を開いた後、APIトークンから作成できます。

多分これで良いはず。トークンは一度しか表示されないのでメモ帳とかにすぐにメモしておきましょう。

CLOUDFLARE_ACCOUNT_ID

ダッシュボードにログインしたときの、ドメインから後のURLについている(dash.cloudflare.com/ から)値のことらしい。ドキュメントみるとなんか複雑なこと書いてあるけど
（↓ちょうど塗りつぶしたところ）

GitHub に登録

ここからできます。
New repositroy secretで追加することが出来ます。

GitHub Actions を作る

そのまえに、自動デプロイを止めておきます

そしたら以下のようなyamlを書きます。
projectName（Cloudflare Pages 上での名前）とdirectory（出力先のパス）は皆さんのプロジェクトごとに合わせて直してください。

# GitHub Actions から Cloudflare Pages へ公開
 
# 名前
name: Publish Cloudflare Pages
 
# 起動条件。pushと手動起動
on:
  push:
  workflow_dispatch:
 
# やらせること
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      
      # Node.js インストール
      - name: Install Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 18.13.0
 
      # 依存関係
      - name: Package install
        run: npm i
      
      # 書き出し
      - name: Build page
        run: npx next build && npx next export 
 
      # 公開
      - name: Publish to Cloudflare Pages
        uses: cloudflare/pages-action@v1
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          projectName: color-code-brightness
          directory: out

あとは push すれば動くはずです。以下のように

ドメイン

Apexドメイン（サブドメイン以外）を使う場合はCloudflare DNS ???とか言うやつに登録しないといけないらしい。
レジストラではなく、ネームサーバーが変わるだけなのでそこまで大変じゃなさそうな気はする。（何もわからない）

今回はサブドメインを使ってみます。サブドメインの場合はネームサーバーの変更は必要ないらしいです。

こんな感じにドメインを入力して

自分の DNS プロバイダー を選べば良さそうです。

私は Google Domains を使っているので、 DNS の設定を開き、Cloudflare Pagesの指示通りに入力します。

ボタンを押した、多分これで待ってれば完了するはず。楽ですね

歯磨きから戻ってきたら開けるようになってました！ちゃんと https です！

終わりに

よさそう！！！
全然関係ないけど GitHub Actions 失敗したらメールで教えてくれるのね。