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 ルートを選択して、ルートを追加します。2 つ以上のドメインがある場合は、間違ったドメインに入らないように注意してください。

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

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

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

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

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

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