Notionいいですね。最近はNotionにドキュメント系を移行中です。
スタートアップを中心にNotionが流行ってますが、Notionはデータベースと言われるように、その汎用性と表現力の高さが魅力です。
これだけコンテンツを作り込めるのなら、そのままWebサイトとして公開してしまおうということでコーポレートサイトやマニュアルなどをNotionで公開する事例も増えています。
今回はSuperというサービスを使って、Notionで作られたページをWebサイトとして公開してみます。
目次
アカウント作成
まずはアカウントを作成します。アドレスとクレジットカードを登録するとメール経由で認証が完了し、アカウントが作成できます。
管理画面はこんな感じ。シンプルなUIいいですね。
コミュニティにも参加しやすいように設計されています。こういう作る系のサービスはコミュニティを重視した運営になっていることが多く、参考になります。
サイトのタイプを選ぶ
実際にサイトを作成していきます。
Super Staticを選択して次に進みます。
サイト設定
実際にNotionのページを公開していくんですが、サイトのトップにするページのShareからURLを取得します。
その際、「Share to web」を有効にし、コメントや編集はオフにしておきます。
サイト名、カスタムドメイン、公開するNotionのページURLを設定します。
サイトマップを作成する
Pretty URLs設定では、サイトマップを作成することができます。トップからページ遷移したときに、デフォルトだとランダムなURLが発行されますが、各ページにslugを設定することで覚えやすいURLで公開することができます。
How to add Pretty URLs to your Super site
独自ドメインを割り当てる
ネームサーバープロバイダを選択してDNSレコードを設定していきます。
今回ムームードメインで取得したドメインを使用するので、Otherから進みます。
こちらで表示されたDNSレコードをネームサーバーのプロバイダに設定します。
ムームードメインのコントロールパネルでドメイン管理＞ムームーDNSから対象のドメインの設定変更を行います。
カスタム設定から先ほど取得したレコード値を設定します。
オプションを設定する
最後にサイトに関するオプションを設定します。
どのような内容を設定できるか見ていきます。
サイトを公開する
設定が完了するとサイトの公開に移ります。
公開直後はDNSサーバーチェックのステータスになります。
ステータスがLiveになると公開された状態になります。
実際にNotionのページが独自ドメインで公開されています。
Notionのページを編集すると、
サイトも即時に反映されています。
ここまでで30分もかからずにサイト公開まで行けました。
スタイルを設定する
スタイルを設定することでサイトにデザインをあてることができます。
Super OptionsからSnippet injectionに以下のタグを設定します。
|
1 2 3 4 5 6 7 |
<style> :root { --color-bg-default: #000 !important; --color-text-default: #FFF !important; } </style> |
背景とフォントカラーが変更されています。
マーケットプレイスでいくつかのデザインテンプレートが公開されているので、そこから購入してみるのも面白いですね。
さいごに
WordPressの場合はホスティングするサーバーの準備やWordpressの初期設定、投稿の公開作業など、多くの作業が必要になります。SuperならNotionにページさえ用意しておければ簡単にサイトの公開または更新を行うことができました。
メモ帳を編集するかのようにWebサイトを公開＆編集できるので、サイト運営体験が劇的に変わりますね。
個人のサービスサイトやポートフォリオ、ブログなど、サクッと作れて公開したいプロジェクトにおすすめです。
ぜひ試してみてはいかがでしょうか。
