ふきげん猫ちび
ふきげん猫ちび
ふきげん猫ちび
このような方にとって朗報です。
お手軽にNotionで独自ドメインのWebサイトを作る方法を発見しました。
参考 Fruition: Free, Open Source Toolkit for Building Websites with Notion
以下が僕が作ったサンプルサイトになります。
参考 Web School JP (Webマーケティング勉強会グループ)
ヘイショー
今回の記事では、Fruitionで書いてあるサイトの作り方を日本語で解説していきます。
ヘイショー
目次
Fruitionについて
ちなみにNotionにカスタムドメインを割り当てるサービスは、Super、HostingPotion、HostNotionなど他にもいくつかあります。
サービスの作者はこれらのサービスを参考に、Cloudflareを利用して無料でお手軽にNotionで独自ドメインを実現するコードを書いたそうです。
ヘイショー
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」をクリックして完了。
あとはネームサーバーの設定変更が完了するまで待ちます。
普通は数時間でされます。長くて１日。
ネームサーバーの設定が反映されると、以下のメッセージが表示されます。
STEP 4. Deployする
ここから少しテクニカルな内容になりますが、スクショの通り操作すれば大丈夫です。
Manage Workersをクリック。
こちらは適当な名前で設定すればよいです。
料金はフリープランを選択。
トラフィックが増えれば有料プランに切り替える必要があります。
「Create a Worker」をクリック
するとこちらのJavaScriptを入力する画面に遷移しますので、Fruitionのページに戻ってコードを取りに行きます。
https://fruitionsite.com/ に以下のフォームがありますので、独自ドメインとSTEP 1で作ったNotionページのURLを入力します。
もう一度Cloudflareに戻って、Fruitionからコピーしたコードを１に貼り付けます。
確認画面がもう一度出てきますので、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検索でちゃんとインデックスされているか確認したところ、１日後にはインデックスされていました。
まとめ
利用してみた感想ですが、Notionで編集したページがリアルタイムでWeb上で反映されるのがすごく便利ですね。
興味があれば試してみてください。
ヘイショー
