Notion│独自ドメイン公開の過去の設定例│Fruition・Cloudflare

2024.02.212026.10.21

現在はNotion公式の独自ドメイン接続もあります。以下のFruition方式は非公式の過去の検証記録です。導入前に現行の提供条件と、自分で保守できるかを確認してください。公式方式は有料プランと独自ドメイン用アドオンが必要で、ドメイン自体は別途用意します。今回、Fruitionの新規デプロイやDNS変更は再実行していません。

日々まとめているNotionの情報を、そのままWebサイトとして公開したいと考えたことが、今回の検証のきっかけです。

そのまま編集できて、即座に公開できるNotionは、文書をまとめて共有する方法の一つです。

そこでこのNotion自体をCMSとして独自ドメインで公開できるか調べてみました。

本記事ではNotionを独自ドメインで公開する方法を紹介します。

Fruitionの説明と公開例は以下の開発元ページにあります。開発元もNotion側の変更で動作しなくなる可能性と、自主管理が必要な点を案内しています。

stephenou on Notion

Fruition: Free, Open Source Toolkit for Building Websites with Notion | Notion If your site doesn’t work, please read this section.

Notionを独自ドメインで公開する方法

Notionを独自ドメインで公開する方法、サービスはすでにたくさん存在します。

しかし月額の維持費が有料だったり、独自ドメイン自体が作成も維持も有料だったりするので、

なかなか無料にすることはできません。

以下は当時FruitionとCloudflare Workersを組み合わせた記録です。Notionの画面構造へ依存するため、現在も同じコードで動くことや最小コストであることは確認できていません。

STEP

独自ドメインを用意する（当時はお名前.comを利用）

お名前.comにアクセスして、アカウントを作成。

取得したいドメインを作成します。

取得費用・更新費用・追加費用はドメインと申込条件で変わります。初年度無料とは限らないため、申込時の料金と翌年以降の更新条件を確認してください。

他社への移管も検討する場合は、移管料金だけでなく更新料金と手続き条件を比較します。次の記事はXServerドメインを使った移管例です。

あわせて読みたい

ドメイン移管の手順と注意点｜XServerドメインの料金確認毎年の更新料がかかるドメイン。どこが一番良いのか？悩みますよね。個人的に以下のようなサービスを使ってました。お名前.com ムームードメイン Googleドメイン Clo…

STEP

Notionのページを公開する

公開したいページを右上の共有から公開します。

検索エンジンへの掲載許可と、ページの一般公開は別の設定です。検索への掲載を許可しなくても、公開URLを知る人が閲覧できる場合があります。

当時の例では検索への掲載を許可しました。これは検索結果への登録や順位を保証する設定ではありません。

STEP

Fruitionのコードを生成

Notionを公開するためのコード（Fruition）を生成します。

下記のURLにアクセスしましょう。

stephenou on Notion

Fruition: Free, Open Source Toolkit for Building Websites with Notion | Notion If your site doesn’t work, please read this section.

文字検索で下記を検索します。

Step 2: Customize and generate the script (2 mins)

変換フォームがあるので、下記を入力しましょう、

Your Domain：設定したい独自ドメイン
Notion URL：公開したNotionのURL

COPY THE CODEのボタンを押して、コピーしたコードを控えておきましょう。

STEP

CloudFlare Workersの設定

CloudFlareのアカウントを作成しましょう。詳細は割愛します。

ログイン後、左側のメニューのWorkers & Pagesを選択。

Create Workerボタンを押します。

次にNameで名前を入力。

Deployボタンを押します。

Edit Codeボタンを押します。

worker.jsのところを先ほどコピーしたFruitionのコードをコピーします。

最後にSave and deployボタンを押します。

STEP

CloudFlare Websiteの設定

最初の画面に戻り、Websiteメニューを開きます。

ドメインを入力して、Continueボタンを押します。

無料のFreeを選択して、Continueボタンを押します。

しばらくするとReview your DNS recordsが表示されます。

既存のA・AAAA・CNAME・MX・TXTなど必要なレコードがそろっているか確認してから進みます。取り込み漏れがある状態でネームサーバーを変更しないでください。

次の画面でネームサーバーの情報が出るのでコピーしておきましょう。

コピーしたら画面はそのまま保持しておきましょう。

STEP

お名前.comでネームサーバーの設定

お名前.comにログイン。

上部のメニューからドメインの設定、ネームサーバーの設定を選択します。

あとは先ほどコピーしたネームサーバーを入力して、案内に従ってネームサーバーを設定しましょう。

STEP

CloudflareのHTTPS設定

先ほど開いていたCloudflareの画面に戻ります。

Continueボタンを押すとHTTPSの設定の画面が表示されます。

①当時はAutomatic HTTPS Rewritesを有効にしました。これは対応可能なHTTPリソースのURLをHTTPSへ書き換える機能で、証明書の準備やすべての混在コンテンツの解消を保証しません。

②Always Use HTTPSはHTTPアクセスをHTTPSへ転送する設定です。対象ホストのHTTPS動作と、他のリダイレクト設定との整合を確認します。

③当時のウィザードにはOptimize performanceがありました。性能最適化はHTTPS接続の成立とは別の項目です。

現在の環境で一律に全項目を有効化する手順ではありません。Automatic HTTPS RewritesとAlways Use HTTPSの公式説明を確認してください。

STEP

Workers Routesの設定

サイトに左メニューのWorkers Routesを選択します。

Add routeボタンを押して、下記を入力します。

ルート例：example.com/*。説明用の値なので、自分の対象ホスト名へ置き換えます。

Worker：先ほど作成した名前をプルダウンから選択

当時のルート設定はここまでです。現在のCloudflare公式Routes手順では、アクティブなゾーン・Worker・対象ホストのプロキシ済みDNSレコードが前提です。ルートを追加するだけで名前解決やHTTPSが整うわけではありません。

STEP

確認する

取得した独自ドメインを開いてみましょう。

ログアウト状態で公開内容を確認します。シークレットモードだけでOSやDNSリゾルバーのキャッシュが消えるとは限りません。

表示が古い場合は、DNS応答、Workerのデプロイ版・ルート、ブラウザーとCloudflareのキャッシュを切り分けて確認します。

以下は2024年2月に独自ドメインで表示できた際の記録です。現行Notionとの互換性を今回確認した結果ではありません。

カスタマイズ方法

CloudflareのWorkers &PagesからQuickEditボタンを押す。

当時はCUSTOM_SCRIPTの設定箇所にJSやCSSを追加しました。行番号はコードの版によって変わるため、識別子と周辺の構造を確認します。

右上のトグルボタンを非表示

以下は当時のHTML構造に合わせたCSSです。要素の順番やrole="button"で広く非表示にするため、現在の画面では必要な操作ボタンまで隠す可能性があります。現在のNotionでそのまま使えるコードとしては扱わず、対象要素とPC・スマホの操作を個別に確認してください。

	  div.notion-topbar > div > div:nth-child(3) { display: none !important; }
      div.notion-topbar > div > div:nth-child(4) { display: none !important; }
      div.notion-topbar > div > div:nth-child(5) { display: none !important; }
      div.notion-topbar > div > div:nth-child(6) { display: none !important; }
      div.notion-topbar-mobile > div:nth-child(3) { display: none !important; }
      div.notion-topbar-mobile > div:nth-child(4) { display: none !important; }
      div.notion-topbar > div > div:nth-child(1n).toggle-mode { display: none !important; }
      div.notion-topbar-mobile > div:nth-child(1n).toggle-mode { display: none !important; }
      div.notion-topbar > div > div[role="button"] { display: none !important; }
      div.notion-topbar-mobile > div > div[role="button"] { display: none !important; }

まとめ

NotionをCMSにするのは、新しい可能性を感じます。

WordPressとNotionでは編集・公開・保守の仕組みが異なります。必要な機能と、管理できる範囲に応じて選びます。

Notionで書いた情報を公開する場合も、公式Sitesの契約条件と、非公式方式を自分で保守する負担を分けて考えます。

実際、個人のナレッジベースとして良さそうだと思ったので、可能性をいろいろ試してみようと思います。

過去の記録として参照し、新規導入は現行の公式方式と比較して判断してください。

この記事で紹介しているコードは、GitHubのMOTOKI-LLC/WAZA-codeにもまとめています。

公開前にNotionページと子ページに非公開情報が含まれていないか、ログアウト状態で確認します。DNS変更前にはレコード一式と元のネームサーバーを控えます。障害時はWorkerのルート設定やDNSの差分を戻しますが、DNSキャッシュにより即時復旧しない場合があります。非公開に戻すときは独自ドメインだけでなくNotion側の公開状態も見直してください。

よくある質問：Notionを独自ドメインで公開した過去の設定例について

Notionは、今でも独自ドメインで公開できますか？

現在はNotion公式の独自ドメイン接続もあるとしています。記事で紹介するFruition方式は非公式の過去の検証記録なので、導入前に現行の提供条件と、自分で保守できるかを確認してください。この記事では契約やDNS設定を変更していません。

この方法は、無料で公開できますか？

月額の維持費が有料だったり、独自ドメイン自体が作成も維持も有料だったりするため、なかなか無料にはできないとしています。記事の内容は当時FruitionとCloudflare Workersを組み合わせた記録で、現在も同じコードで動くことや最小コストであることは確認できていません。料金や条件の最新は公式で確認してください。

どんな流れで設定しますか？

独自ドメインを取得し、Notionのページを公開し、Fruitionのコードを用意してCloudflare Workersに設定します。そのあとCloudflareにWebsiteを追加し、お名前.comでネームサーバーを設定し、HTTPS設定とWorkers Routesの設定を行って、独自ドメインで表示されるか確認します。