title | emoji | type | topics | published | published_at | ||
---|---|---|---|---|---|---|---|
Notionのページを独自ドメインでwebに公開する手順 |
🌤️ |
tech |
|
true |
2023-07-16 17:04 |
Notion で MarkDown のページをいろいろ管理しているので、それをそのまま公開できたら便利だなと思っていたら、そういう方法、ありました。
以下のサービスを使用します。
- Notion
- CloudFlare
- Fruition
Notion で作ったページを公開、そのリンクを Cloud Flare でプロキシ、その際 CloudFlare Workers によって Fruition で生成した Javascript を付与して見た目いい感じに。という構成ですね。
独自ドメインは CloudFlare で取得可能です。CloudFlare 以外でドメインを持っている場合も NS を登録することで利用可能ですが、subdomian では登録できません(正確には、Enterprise プランであれば可能な模様)。CloudFlare に登録したのち、subdomain を使用することはできます。
- 公開したいページの右上「Share」より、「Publish」から公開します。
- ページに誰でもアクセスできる Link が生成されます。あとで link 使います。
- option は Search engine indexing のみ有効にしておくのが無難だと思います。(Notion の Plan によって選べるオプション違うかも)
- Fruitionを開く。
Step 2: Customize and generate the script (2 mins) の箇所で、使用するドメインと、先ほど生成した Notion の URL を入力。
- 「COPY THE CODE」でコードをコピーしておく。
CloudFlare の登録は済んでいる前提です。
-
Edit Code より、workers.js を先ほど Fruition で取得したコードに書き換えて、
-
save and deploy
一旦ここまで。
- Website の設定(site が使える状態まで)
- DNS レコードの設定
- 設定した domain の Site のページにアクセスし、「DNS」⇒「Records」から、以下で作成する
- Type:
A
- Name:
xxxx
(使いたいサブドメイン. root の場合は@
) - Content:
104.18.23.110
(これは Notion のドメイン。ref: https://zenn.dev/link/comments/c48afeb5c77d07 )
- Type:
- 設定した domain の Site のページにアクセスし、「DNS」⇒「Records」から、以下で作成する
- Workers Routes の設定
以上です。
サンプルとして作った私のプロフィールページを置いておきます。
Fruition に書いてある手順で基本的に大丈夫なんですけど、キャプチャが古かったり不明なところがあったので解消しつつ書きました。
使ってみた所感
- 簡易的なページを作るにはコンテンツの管理も Notion でできるのはとても楽。
- ネストした Notion のページも問題なく表示できたけどブラウザバックには対応しておらず。単体のページに収めるのがよさそう。
- console に API 呼び出し失敗してるエラーがでてる。サイトとして安定感はないと思う。本格運用には向いてないかも。