Notion│無料で独自ドメインにして公開する方法
Notion│無料で独自ドメインにして公開する方法 2024 3/05 便利ツール・サービス 2024.02.212024.03.05独自ドメインを割り当てるCMSとして広告収入を得る手段としてWordPressが人気ですが、情報をアーカイブするとしては時間がかかりすぎます。
そのまま編集できて、即座に公開できるNotionこそが、情報をまとめるナレッジベースとして優秀なサービスです。
そこでこのNotion自体をCMSとして独自ドメインで公開できるか調べてみました。
本記事ではNotionを独自ドメインで公開する方法を紹介します。
実際の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. 目次著者
motokiWordPressのカスタマイズに困ったらご相談ください！
MOTOKI合同会社 カスタマイズの依頼・相談Notionを独自ドメインで公開する方法
Notionを独自ドメインで公開する方法、サービスはすでにたくさん存在します。
しかし月額の維持費が有料だったり、独自ドメイン自体が作成も維持も有料だったりするので、
なかなか無料にすることはできません。
いろいろ調べてみて、お名前.comとCloudFlareのサービスを組み合わせることで、最小のコストでサイトを公開することがわかったのでそのやり方を解説します。
STEPお名前.comで0円で独自ドメインを作成するお名前.comにアクセスして、アカウントを作成。
取得したいドメインを作成します。
ちなみに.comなどの基本的なドメインは初年度無料です。
もし更新する場合でできるだけ費用を抑えたいときはXserverドメインがおすすめです。
あわせて読みたい .comやco.jpの更新料が1円！ドメインの移管方法まとめ│Xserverドメイン 毎年の更新料がかかるドメイン。 どこが一番良いのか？悩みますよね。 個人的に以下のようなサービスを使ってました。 お名前.com ムームードメイン Googleドメイン Clo… STEPNotionのページを公開する公開したいページを右上の共有から公開します。
ネット検索を許可というところは、お好みで設定できます。
今回はindex（ネット検索を許可）しました。
STEPFruitionのコードを生成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のボタンを押して、コピーしたコードを控えておきましょう。
STEPCloudFlare Workersの設定CloudFlareのアカウントを作成しましょう。詳細は割愛します。
ログイン後、左側のメニューのWorkers & Pagesを選択。
Create Workerボタンを押します。
次にNameで名前を入力。
Deployボタンを押します。
Edit Codeボタンを押します。
worker.jsのところを先ほどコピーしたFruitionのコードをコピーします。
最後にSave and deployボタンを押します。
STEPCloudFlare Websiteの設定最初の画面に戻り、Websiteメニューを開きます。
ドメインを入力して、Continueボタンを押します。
無料のFreeを選択して、Continueボタンを押します。
しばらくするとReview your DNS recordsが表示されます。
そのまま下にあるContinueボタンを押します。
次の画面でネームサーバーの情報が出るのでコピーしておきましょう。
コピーしたら画面はそのまま保持しておきましょう。
STEPお名前.comでネームサーバーの設定お名前.comにログイン。
上部のメニューからドメインの設定、ネームサーバーの設定を選択します。
あとは先ほどコピーしたネームサーバーを入力して、案内に従ってネームサーバーを設定しましょう。
STEPCloudflareのHTTPS設定先ほど開いていたCloudflareの画面に戻ります。
Continueボタンを押すとHTTPSの設定の画面が表示されます。
①Automatic HTTPS RewritesをONにしてSaveボタンを押します。
②Always use HTTPSをONにしてSaveボタンを押します。
③Optimize performanceをONにしてSaveボタンを押します。
全てONにしてFinishボタンを押します。
STEPWorkers Routesの設定サイトに左メニューのWorkers Routesを選択します。
Add routeボタンを押して、下記を入力します。
ドメイン：exsample.com/*
Worker：先ほど作成した名前をプルダウンから選択
以上で設定は全て完了です。
STEP確認する取得した独自ドメインを開いてみましょう。
場合によってはシークレットモードで確認した方が良いと思います。
無事、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; }まとめ
NotionをCMSにするのは、新しい可能性を感じます。
WordPressはカスタマイズ性が高いものの、編集に時間がかかります。
しかしNotionであればカスタマイズ性は弱いものの、編集は即座にでき、また情報を書き留めるのにも便利です。
実際、個人のナレッジベースとして良さそうだと思ったので、可能性をいろいろ試してみようと思います。
気になった方はぜひ試してみてください。
便利ツール・サービス- URLをコピーしました！
WAZAの有料記事のサブスクリプションも開始しました。
あわせて読みたい アフィリエイト付き！有料記事のサブスクリプションについて WAZAでは特に有益な記事は有料記事とさせていただいてます。 本記事では有料記事をリストでまとめました。 また有料記事の読み放題のサブスクリプション、そして有料記...