Notion+Cloudflare 無料カスタムドメインでウェブサイトをデプロイ

ページを作成したら → ページを公開する

Notion ウェブサイトを公開した後、 Site settings をクリックして簡単な設定を行うことができます。例えば、ウェブサイトのロゴのアップロード、ウェブサイトのテーマカラー、機能ボタンの表示切り替え、SEO などです。

実際には、ドメインの要件がない場合は、ウェブサイトを公開してリンクを共有するだけで十分です。他の人がウェブサイトに正常にアクセスできます。

もし Notion が割り当てたドメインが十分にクールではないと思った場合、ちょうど自分自身のドメインがあって、偶然にも Cloudflare で管理している場合、少し手を加えてみたい場合は、以下を続けて読んでください👇

Cloudflare でメインドメインのサブドメインを作成します。

タイプ：CNAME；名前：例えば gallery；内容：notion.so；プロキシステータス：プロキシのみ。

Workers を作成し、名前を入力します（任意の名前で構いませんが、識別できるものであれば）、「デプロイ」をクリックします。

右側の「コードを編集」を見つけてクリックすると、以下のような画面になります。心配しないでください！

このウェブサイトを開きます：https://fruition-stephenou.vercel.app/

Fruition は、Cloudflare Workers を使用して Notion ページのカスタムドメインを設定するための無料オープンソースプロジェクトです。

注意：コードをコピーしたら、Cloudflare に戻り、右側の編集ボックスの元のコードを削除し、Fruition のコードを右側の編集ボックスに貼り付けて、「デプロイ」をクリックします。

Workers の設定は完了しました！

Cloudflare に戻り、ドメインのページに戻ります。最初に作成したサブドメインの作業場所に入ります。

ここで迷子になるかもしれませんが、ドメインの Workers ルートと Workers は別の作業領域です。サイドナビゲーションの機能が明らかに異なるので、混同しないでください。

ドメインにバインドする必要のある Workers ルートを選択して、ルートを追加します。複数のドメインを持っている場合は、間違ったドメインに入らないように注意してください。

ドメインを入力し、URL の後ろに /* を追加してください。最初は追加していなかったため、ウェブページがエラーになり表示されないことがありますので、お忘れなく！worker はコードを貼り付けてデプロイした「Workers プロジェクト」です。

🎉 Workers のルート設定が完了しました。予期しない場合は、カスタムリンクを使用して Notion ウェブサイトに正常にアクセスできるはずです。

Notion でウェブサイトを設計して公開する → サブドメインを申請する → Workers を作成する → Fruition のコードを Workers に貼り付けてデプロイする → ドメインに戻り、Workers ルートを追加する

原理は、Workers をデプロイして、ドメインをそれに向けることです。

初心者が混乱しやすいポイントは、Workers と Workers ルートを混同しやすいこと、およびルートを追加する際に URL の後ろに /* を追加しないことにより、ウェブページが正常に表示されないことです。

次回予告： Obsidian と Notion を連携させる方法、Obsidian で記事を編集し、Notion で構築したウェブサイトに記事を一括公開する方法。