ビジネスに使える無料Webツールを公開しました

Notionの独自ドメインWebサイトを無料で作る方法

Notionで独自ドメインのWebサイトを作る方法【ほぼ無料】

ふきげん猫ちび

Notionで独自ドメインのWebサイトを作りたい
出来るだけ簡単で10分以内で出来る方法がいい

ふきげん猫ちび

ふきげん猫ちび

ドメイン代以外の費用は払いなくない

このような方にとって朗報です。

お手軽にNotionで独自ドメインのWebサイトを作る方法を発見しました。

参考 Fruition: Free, Open Source Toolkit for Building Websites with Notion

以下が僕が作ったサンプルサイトになります。

参考 Web School JP (Webマーケティング勉強会グループ)

ヘイショー

ちなみにこちらのグループは本物の勉強会グループなので、良かったら参加してみてください。

今回の記事では、Fruitionで書いてあるサイトの作り方を日本語で解説していきます。

ヘイショー

ちなみにこちらのメソッドはCloudflareを利用しているのでホスティングは無料ですが、ドメイン取得は自分で行います。ドメイン代は年間1000円くらいですが、自腹で払う必要があります。

Fruitionについて

ちなみにNotionにカスタムドメインを割り当てるサービスは、SuperHostingPotionHostNotionなど他にもいくつかあります。

サービスの作者はこれらのサービスを参考に、Cloudflareを利用して無料でお手軽にNotionで独自ドメインを実現するコードを書いたそうです。

ヘイショー

ただし無料なので、Superなどとは違ってサイトに何か問題があってもサポートなどを受けることは出来ません。

Fruitionを使ってNotionに独自ドメインを割り当てる方法

STEP 1. Notionでページを作る

まず、Notionで独自ドメインのトップページとなるページを作り、共有権限で「Search engine indexing」を選びます。

STEP 2. Cloud Flareでアカウントを作る

https://dash.cloudflare.com/sign-up からCloudflareにサインアップください。

Add Siteをクリック

独自ドメインを入力して、「Add site」をクリック

無料プランを選択

IPアドレスを割り当てます。

STEP 3. ネームサーバーを設定する

Cloudflareのネームサーバーをコピーします。

ドメインを取得したサイトから、今回使用する独自ドメインのネームサーバーの設定を変更します。

Cloudflareに戻って、「Done, check nameservers」をクリックします。

「Always Use HTTPS」をOnに切り替えます。

Auto Minifyの箇所で、JavaScript/CSS/HTMLのすべてのチェックボックスにチェックをして保存。

これでページロードスピードが速くなります。

最後に「Finish」をクリックして完了。

あとはネームサーバーの設定変更が完了するまで待ちます。

普通は数時間でされます。長くて1日。

ネームサーバーの設定が反映されると、以下のメッセージが表示されます。

STEP 4. Deployする

ここから少しテクニカルな内容になりますが、スクショの通り操作すれば大丈夫です。

Manage Workersをクリック。

こちらは適当な名前で設定すればよいです。

 

料金はフリープランを選択。

トラフィックが増えれば有料プランに切り替える必要があります。

「Create a Worker」をクリック

するとこちらのJavaScriptを入力する画面に遷移しますので、Fruitionのページに戻ってコードを取りに行きます。

https://fruitionsite.com/ に以下のフォームがありますので、独自ドメインとSTEP 1で作ったNotionページのURLを入力します。

もう一度Cloudflareに戻って、Fruitionからコピーしたコードを1に貼り付けます。

確認画面がもう一度出てきますので、Save and Deployをクリック。

次にCloudflareのロゴの横にあるドメイン名をクリックして、ダッシュボートに戻ります。

ダッシュボードからWorkersをクリック。

Add routeをクリック。

以下の通り、独自ドメインの後に/*をつけて、Workerの項目は選択出来るものを選択してSaveをクリック。

これで設定は完了です。

STEP 5. 公開されたサイトを確認

独自ドメインを検索バーに入力して、Notionのページが表示されていれば成功です。

その他のカスタマイズ方法

ダークモード、ライトモードの切り替えボタンが効かない

Fruitionが公開されたのは数年前だったのですが、その後のNotionのアップデートにより上手く動作しない事象が起こっているようです。

現在は「ダークモード、ライトモードの切り替えボタンが効かない」「戻るボタンをクリックした時に、Notionのサインアップページが表示される」という現象が発生していますが、以下の記事にある内容を適用すると解決されます。

参考 Dark/light mode on/off button Not working | Github

Google AnalyticsやGoogleタグマネージャーを導入する

以下の記事を参考ください。

参考 Cloudflareで公開したNotionのWebサイトにGoogleアナリティクスのタグを貼る

その他:フォーラム

カスタマイズしたいことがある場合や、困ったことに遭遇したら以下のフォーラムを参考にするとよいです。

参考 Fruitionsiteのフォーラム | github

Goole検索にも表示されていました

その後Google検索でちゃんとインデックスされているか確認したところ、1日後にはインデックスされていました。

まとめ

利用してみた感想ですが、Notionで編集したページがリアルタイムでWeb上で反映されるのがすごく便利ですね。

興味があれば試してみてください。

ヘイショー

ご精読ありがとうございました。