LoginSignup
1
1

More than 1 year has passed since last update.

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

Last updated at Posted at 2023-02-02

やりたかったこと

NotionのページをWebサイトとして公開
その際、ひらがなカスタムドメイン(にほんご.comみたいに)で公開したかった

問題点

  • Notionページの公開にはCloudflareを使用することが一般的だが、
    最近UIが変わったらしく、ネットに広まっている説明だと少しわかりにくかった
  • ひらがなドメインなので少し工夫が必要だった

解決した方法

とりあえず巷で広まっている手順で進めてみる

0.とりあえず全体像をざっくり説明

image.png

1.Notionの公開

右上からWebサイトで公開にする。この時のURLをメモっておく(A)
image.png


2.ドメインの購入

今回はお名前ドットコムで購入しました


3.Cloudflareにサイトを登録

image.png
Cloudflareに新規登録し、サイトを登録します
image.png

さっき買ったドメインの名前を入れます
image.png
image.png
一番安い無料プランが下に隠れてます。これを選択して進む

4.DNSレコードをCloudflareに登録する

お名前ドットコムで買ったドメインとCloudflareを連携させていきます
image.png
名前は「@」で、IPv4アドレスには「1.1.1.1」を入れます
image.png
Cloudflareネームサーバーというものが2つ出てくるので、それをコピーして
お名前ドットコム側に貼ります
https://www.onamae.com/domain/navi/ns_update/input?btn_id=navi_domain_icon_nsmanage_nsupdate_ZwxbZzwaw8z9zSOup7tl_1)
image.png
お名前ドットコム側での設定が終わったら、Cloudflare側でも終了を押す
image.png
クイックスタートガイドを設定します
セキュリティの改善 > HTTPSの自動リライト:オン
セキュリティの改善 > 常にHTTPSを使用:オン
パフォーマンスを最適化 > Auto Minify:すべてチェックマーク
パフォーマンスを最適化 > Brotli:オン
image.png

これが出たらサイトとCloudflareの設定は完了です
image.png
続いては、Cloudflare内部の設定をしていきます

4.workersでCloudflareの詳細設定を行う

まずはWorkersの初期セットアップ

image.png
サブドメインはてきとーでいいです プランも無料でOK

Workersで新規サービス作成

image.png
image.png

クイック編集からスクリプトを書き換える

image.png
既存のコードを全部消します
image.png
Fruition(https://fruitionsite.com/ )を用いて新しいスクリプトを生成します
image.png

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

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

デプロイを押して完了です

ルートを登録する

image.png
image.png
image.png
ルートのところにはてすと.com/*みたいに入力
サービスは、さっきつくったWorkersサービスのIDを選択してください

さいごに

こんな感じで公開できました
image.png

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1