Notionのページを独自ドメインで公開する方法
tag
ブログ開発
更新日時
2023/3/23
おすすめ
cover
カテゴリ親
sub-tag
NotionではページをWeb上へ公開できますが、URLが「https://www.notion.so」となってしまうため、独自ドメインを使って公開したり、他のスクリプトを合わせて実行することができません。
そこで本記事では、独自ドメイン利用・他スクリプトの実行を実現させる方法を紹介します。
NotionベースでWebサイトを構築すると、記事の編集・移動・バックアップが非常にスムーズにできるようになります。
Wordpressからの以降を検討してみてください。
実現方法の種類と比較独自ドメインでの公開手順（Super）0. ドメインの取得1. サービス利用登録2. 初期設定独自ドメインでの公開手順（Wraptas）0. ドメインの取得1. サービス利用登録2. 独自ドメイン設定 サブドメインでサイトを公開したい場合独自ドメインでの公開手順（Fruition）0. ドメインの取得1. CloudFlareでFruitionのスクリプトを保存2. サブドメインに紐付けたい場合
実現方法の種類と比較
独自ドメイン利用・他スクリプトの実行を実現させることができる主なサービスは下記の3つです。
| 利用サービス | 価格 | SEO対策 | その他利用条件 |
|---|---|---|---|
| Super | $16/月(約2000円) | ○ | なし |
| Wraptas | 1078円/月 | ○ | なし |
| Fruition | 無料 | × | CloudFlareを利用 |
Fruitionを使って無料でサイトを作りたかったのですが、検索エンジンへのインデックスが上手く作成されず…私は有料のサービスを使うことにしました。
SuperとWraptasのどちらを選択すべきかの検討材料として、各サービスを使ってみて良いなと感じた点を挙げておきます。（2023/3/23時点の情報）
Superの良い所
英語でサービス提供しているため、海外全体でサービス利用者数が多い。
そのため今後のサービス拡大も期待でき、導入事例も多め。
ページ表示スピードが爆速。
Wraptasの良い所
日本のサービスで日本語ドキュメントやサポートが充実しており、新機能も頻繁に公開されている。
以下のようなSuperには無い便利な機能がある。
・Notionの「code」ブロックを使い、ページ内の任意の場所にカスタムコードを埋め込める。
・各ページにTwitterでのシェアボタンを挿入できる。
このWebサイト「https://shukapin.com」は現在「Wraptas」を利用して運用しています。（以前はSuperを使っていました。）
Wraptas製のサイトとSuper製のサイト両方で、無事にGoogleアドセンスの審査にも合格できたため、ブログで収益化を目指している方もNotionを用いてのWebサイト構築を検討してみてください。
独自ドメインでの公開手順（Super）
0. ドメインの取得
1. サービス利用登録
Superの公式サイトへアクセスし、サービス利用登録を行います。
2. 初期設定
「Site Method」では、Webサイトの生成方法を選択します。
「Super Static」を選択すると、オリジナルのNotionのページに加工処理が加わり、静的サイトが生成されます。
Webページ表示までの時間をより早くできるのがメリットの１つです。
「Super Default」を選択すると、オリジナルのNotionのページをそのままリダイレクトして表示する形でサイトが生成されます。
こちらは「Fruition」と同様の仕組みでサイトが構築されます。
「Site Setting」では、使用したいドメインを登録し、TOPページとして紐づけたいNotionのページを指定します。
「Pretty URLs」では、TOPページ配下のページでURLを変更したいページがあれば任意のURLを登録できます。
「DNS Records」では、提示されている情報を参考にカスタムドメインのDNS設定を変更します。
ドメインを契約しているサービスの管理画面より、DNSレコードの設定を追加します。
「Super Options」では、フォント・ファビコンなどのサイト全体の設定を追加します。
自作のJavaScript, CSSを設定できるため、サイトを自分好みにカスタマイズできます。
独自ドメインでの公開手順（Wraptas）
0. ドメインの取得
1. サービス利用登録
Wraptasの公式サイトへアクセスし、新規登録を行います。
ログイン後に決済登録まで行います。
Wraptasは日本語のマニュアルが充実しているので、以下の記事を参考に初期設定を実施してください。
2. 独自ドメイン設定
画面提示されているDNSレコード情報を参考に、ドメインを契約しているサービスの管理画面より、DNSレコードの設定を変更して「ドメイン登録を申請」ボタンを押下します。
▼ エラーが発生する場合は公式のサポートページを参照
サブドメインでサイトを公開したい場合
ドメイン
shukapin.comを所有し、サブドメインwraptas.shukapin.comでサイトを公開したい場合の例です。以下のようにDNS設定で新たにAレコードを追加します。
（CloudFlareでレコード管理している場合の例）
Wraptasの独自ドメイン申請画面で「ドメイン登録を申請」ボタンをクリックします。
独自ドメインでの公開手順（Fruition）
基本的には下記の手順1に記載しているサイトの説明に沿って行えば良いですが、サブドメインへ紐付けたい場合は追加で手順2を実行してください。
0. ドメインの取得
1. CloudFlareでFruitionのスクリプトを保存
下記のFruition公式サイトの「Get Started」のステップに沿って行います。
2. サブドメインに紐付けたい場合
サブドメインにNotionのページを紐づける場合、フォワード設定を追加する必要があります。
ドメイン
shukapin.comにサブドメインjp.shukapin.comを追加し、そこにNotionのページを紐付ける例を紹介します。CloudFlareのメニューから
DNSを選択します。
以下の画像のようにCNAMEレコードを追加します。
手順1で登録したスクリプト内の
MY_DOMAINの値にサブドメイン情報を追加します。Python
ルート設定ではサブドメイン込みで指定します。
