23年2月時点最新 Notionサイトをカスタムドメイン公開する方法（ひらがなドメイン）

# やりたかったこと
NotionのページをWebサイトとして公開
その際、ひらがなカスタムドメイン（`にほんご.com`みたいに）で公開したかった
# 問題点
- Notionページの公開にはCloudflareを使用することが一般的だが、
最近UIが変わったらしく、ネットに広まっている説明だと少しわかりにくかった
- ひらがなドメインなので少し工夫が必要だった
# 解決した方法
### とりあえず巷で広まっている手順で進めてみる
#### 0.とりあえず全体像をざっくり説明
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/968569/bdbca18a-4248-df63-be95-5e0f0d456c22.png)

#### 1.Notionの公開
右上からWebサイトで公開にする。この時のURLをメモっておく（A）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/968569/755398fd-b019-9058-bc9e-88d18fbdfd20.png)

----

#### 2.ドメインの購入
今回はお名前ドットコムで購入しました

----

#### 3.[Cloudflare](https://dash.cloudflare.com/)にサイトを登録
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/968569/fa4f4adf-4733-de23-32b4-e035c0fc36a6.png)
Cloudflareに新規登録し、サイトを登録します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/968569/f27d33a0-5316-26b5-7eb0-1a5a2fab8950.png)


さっき買ったドメインの名前を入れます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/968569/0006a2a6-36bd-2d24-a995-641688673fd5.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/968569/bf97e919-e07e-486c-4d2d-943098d5a9c0.png)
一番安い無料プランが下に隠れてます。これを選択して進む
#### 4.DNSレコードをCloudflareに登録する
お名前ドットコムで買ったドメインとCloudflareを連携させていきます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/968569/46009e0d-7c73-703e-5878-150360ef16ee.png)
名前は「@」で、IPv4アドレスには「1.1.1.1」を入れます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/968569/a0e7e266-bf8a-458b-0397-d53f626ee374.png)
Cloudflareネームサーバーというものが2つ出てくるので、それをコピーして
お名前ドットコム側に貼ります
（https://www.onamae.com/domain/navi/ns_update/input?btn_id=navi_domain_icon_nsmanage_nsupdate_ZwxbZzwaw8z9zSOup7tl_1）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/968569/3d714d91-c2a9-fc53-729d-32586d871f64.png)
お名前ドットコム側での設定が終わったら、Cloudflare側でも終了を押す
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/968569/4aa079ab-331c-0861-8689-1cc68944bd85.png)
クイックスタートガイドを設定します
セキュリティの改善 > HTTPSの自動リライト：オン
セキュリティの改善 > 常にHTTPSを使用：オン
パフォーマンスを最適化 > Auto Minify：すべてチェックマーク
パフォーマンスを最適化 > Brotli：オン
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/968569/0adcf1c2-f882-be4d-1aba-a0bd971ae987.png)

これが出たらサイトとCloudflareの設定は完了です
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/968569/c448757b-321e-dd8a-d1f3-79ee933a5613.png)
続いては、Cloudflare内部の設定をしていきます

#### 4.workersでCloudflareの詳細設定を行う
##### まずはWorkersの初期セットアップ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/968569/c0715237-14da-656b-fadc-4e56f5566695.png)
サブドメインはてきとーでいいです　プランも無料でOK
##### Workersで新規サービス作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/968569/a43f7a5c-59d3-d08a-c053-830c0b7c1a19.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/968569/3990a411-0063-87d4-3662-6d429f20bd98.png)
##### クイック編集からスクリプトを書き換える
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/968569/ff12e73f-5057-2959-9270-698e6cdb7fa4.png)
既存のコードを全部消します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/968569/f8839344-9505-8273-4474-f8d035d112eb.png)
Fruition（https://fruitionsite.com/ ）を用いて新しいスクリプトを生成します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/968569/b625324b-d293-066e-eed1-4a464099ae2d.png)


Get StartedのStep2から、ドメインとNotionの公開URL（メモA）を貼り付けます

:::note
1、ひらがなドメインの場合は、スクリプトを記載する場面でPunycodeに変換しなくてはいけません
例えば、`てすと.com`というドメインを買った場合は`xn--88jzah.com`と記載しなくてはいけません。
変換については下記サイトを参考にしましょう。
https://punycode.jp/
:::
デプロイを押して完了です

##### ルートを登録する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/968569/2fc42a11-728b-d73b-480d-113ef94e3726.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/968569/19c51444-4612-b800-db9e-0e0738014fba.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/968569/8d096e5a-46e6-7515-6394-b6d57378830a.png)
ルートのところには`てすと.com/*`みたいに入力
サービスは、さっきつくったWorkersサービスのIDを選択してください

# さいごに
こんな感じで公開できました
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/968569/65fd31e3-70d9-78bf-8f98-235feedf9b45.png)