NotionとSuperを使って、独自ドメインのWebサイトを公開する。
関連リンク
Notionの公式サイトからダウンロードしてください。
▶︎ 無料でNotionをダウンロード
Super — Build websites with Notion
https://super.so
Super Docs
https://docs.super.so
Script
Notionと連携できる、さまざまなサービスがあります。
Googleカレンダーと同期したり、ウィジェットを追加したり。
静的なページを作れるのはもちろんですが、Notionのデータベースを使えば、常に新しい記事のタイトルが表示されるなど、自動的に更新される動的なページも作れます。
01
Superは、Notionを使ってサクッとWebサイトを作成できるサービスです。Notionのページをそのまま独自ドメインで公開することができるので、サイトの更新もNotionでできます。
02
まずはSuperのアカウントを作成します。「SIgn in」へと進み、まだアカウントを持っていない状態なので「Signup」をクリックします。メールアドレスとパスワードを入力しますが、1Passwordなどで強固なパスワードを生成してください。パスワードは頭で覚えられるものであってはいけません。もしSuperのアカウントがハッキングされてしまったら、これから公開するWebサイトやNotionの内容などが改変されてしまうことにも繋がります。必ずセキュリティレベルを高めておきましょう。
03
管理画面はいたってシンプルです。「Community」はSuperのコミュニティサイトで、質問をしたりアップデート情報が入手できます。「Docs」はSuperのドキュメントで、カスタマイズするための情報がそろっています。
04
独自ドメインのWebサイトとして公開したいNotionのページを開いて、「共有」からリンクをコピーします。「Webで公開」がオンになっていないとリンクを取得できないので注意してください。
05
Superの管理画面の「Sites」から「New site」をクリックします。Webサイトの名前を入力して、先ほどコピーしたNotionのリンクをペーストします。
06
「Details」は、Site NameとNotion Page URLの変更ができます。
「Pages」は、Notionのページ構成が反映されています。それぞれのページにCustom Codeを書いたりできます。
次に「Options」の部分です。
「Site Language」は、左から右だけではなく、右から左へと読む言語にも対応するための設定なので、日本語はあまり関係ないと思います。
言語を日本語に変更する場合は、セレクトボックスを選択して、キーボードの「J」を押すと「Japanese」に行くかと思いますので、選択して「Save」してください。
「Site Favicon」は、ブラウザのタブや、ブックマークに追加したときに表示されるアイコン画像です。
「Search Engine Indexing」は、検索エンジンからのクロールを防いで、検索結果に表示されないようにできます。
「Page Properties」は、ページのプロパティを、Notionと同じように表示させるかどうかです。見せたくない場合はDisable、Notion的な表示をしたいならEnableです。
「Database Views」は、データベースのビューを、Notionと同じように表示させるかどうかです。見せたくない場合はDisable、Notion的な表示をしたいならEnableです。
「Site Search」は、Super特有の機能で、サイト内検索のエリアを追加するかどうかです。
「Calendar start day」は、週の始まりの曜日です。
「Code」は、Notionだけではできないような、HTMLのheadとbody、CSSをカスタマイズすることができます。
「Theme」は、カラー、ナビゲーション、フッター、フォントなどをカスタマイズできます。
「Domains」を選択して、「Custom Domain」の「Add a custom domain」を選択します。$12/月の請求がされますので、問題なければクレジットカード番号を入力します。必要なくなったら、管理画面からSubscriptionのキャンセルができます。
07
支払いが完了したら、カスタムドメインを設定します。今回は、ドメインの頭に「roadmap.」がついたサブドメインを設定していきます。
08
ドメインを管理しているサービス側で、DNSレコードの設定を行います。ここは、ドメイン管理サービスごとに異なりますが、今回は、お名前.comの管理画面で設定します。「DNSレコード設定を利用する」から、「CNANEレコード」を追加します。「TYPE」を「CNAME」にして、「ホスト名」にサブドメインを入力します。「Value」は、Superの管理画面に表示されているものを入力します。
09
「Domain」からステータスを確認すると、無事に接続されているのがわかります。
10
設定したサブドメインでアクセスしてみて、Notionのページが表示されれば完了です。
だいたいの場合が数分でアクセスできるようになります。数時間〜数日たってもアクセスできない場合は、設定を見直してみましょう。