Notion│無料で独自ドメインにして公開する方法

2024.02.212024.03.05

独自ドメインを割り当てるCMSとして広告収入を得る手段としてWordPressが人気ですが、情報をアーカイブするとしては時間がかかりすぎます。

そのまま編集できて、即座に公開できるNotionこそが、情報をまとめるナレッジベースとして優秀なサービスです。

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

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

実際のNotionサイトは以下のリンクで色々公開されています。

Stephen Ou 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を独自ドメインで公開する方法、サービスはすでにたくさん存在します。

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

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

いろいろ調べてみて、お名前.comとCloudFlareのサービスを組み合わせることで、最小のコストでサイトを公開することがわかったのでそのやり方を解説します。

STEP

お名前.comで0円で独自ドメインを作成する

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

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

ちなみに.comなどの基本的なドメインは初年度無料です。

もし更新する場合でできるだけ費用を抑えたいときはXserverドメインがおすすめです。

あわせて読みたい

.comやco.jpの更新料が1円！ドメインの移管方法まとめ│Xserverドメイン毎年の更新料がかかるドメイン。どこが一番良いのか？悩みますよね。個人的に以下のようなサービスを使ってました。お名前.com ムームードメイン Googleドメイン Clo…

STEP

Notionのページを公開する

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

ネット検索を許可というところは、お好みで設定できます。

今回はindex（ネット検索を許可）しました。

STEP

Fruitionのコードを生成

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

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

Stephen Ou 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が表示されます。

そのまま下にあるContinueボタンを押します。

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

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

STEP

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

お名前.comにログイン。

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

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

STEP

CloudflareのHTTPS設定

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

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

①Automatic HTTPS RewritesをONにしてSaveボタンを押します。

②Always use HTTPSをONにしてSaveボタンを押します。

③Optimize performanceをONにしてSaveボタンを押します。

全てONにしてFinishボタンを押します。

STEP

Workers Routesの設定

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

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

ドメイン：exsample.com/*

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

以上で設定は全て完了です。

STEP

確認する

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

場合によってはシークレットモードで確認した方が良いと思います。

DNSを設定したブラウザの状態は表示が古いままのことがあります。

無事、Notionの中身が独自ドメインで表示されました。

カスタマイズ方法

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

23行目あたりにCUSTOM_SCRIPTとあるので、そこにJSなりCSSの記述を足せばOKです。

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

コードの180行あたりの記述を下記に差し替えると右上の機能しないトグルボタンが消せます。

	  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; }