Zenn
🏠

NotionとSuperを使って爆速でWebサイトを公開する(独自ドメイン化)

2021/06/06に公開
Next.js
Web
Notion
super
idea

こんにちは、にくそです。

CloudflareのWorkerを使用して無料で独自ドメイン化する方法が金銭面では有利ですがSEO対策ができないことやサイトの読み込みに時間がかかるのであまりよろしくありません。

有料のNotionの独自ドメイン化にはいくつかサービスがありますが今回はその中でも爆速で公開できるSuperというWebサービスを使って公開してみます。

Superについて

Superは1サイト毎に1400円ほどかかるので独自ドメイン化サービスにしてはかなり高額です。
読み込みが多少遅くてもいいからお金をかけたくない方はこちらの記事を参考にCloudflareを使用して独自ドメイン化してみて下さい。

Superを使用すると

  • 自動SSL
  • SEO対策
  • NextJSでの爆速表示
  • 操作しやすい管理画面
  • OGP画像

がNotionで作成したページに対して行えます(結構いい)

それでは早速Superを使用してNotionのサイトを独自ドメイン化していきましょう

Superを使っている企業等

  • 株式会社ソウゾウ
    メルカリの社長がやっている会社です。
    ソースを見たらわかるのですが、Superを使用して作成されています。
    公式サイト

  • 株式会社ポインティ
    TikTokで人気な佐伯ポインティという人の運営している会社です。
    これも同様ソースを見るとSuperを使用していることがわかります。
    公式サイト

アカウントの登録

はじめにSuperの公式サイトにアクセスします

Super.so

この真中のCreate your siteをクリックします。

するとこのような美しいニューモフィズムの登録ページにアクセスさせられるのでこちらにメールアドレス、パスワード、クレジットカード情報を記入します。

するとダッシュボードにアクセスできます。
ニューモフィズムかわいい！

早速サイトをデプロイしていきます！

Let's Deploy

右上にあるNew siteをクリックします。
すると

  • Super Static
  • Super Default

の2つの選択肢が表示されます。
Super Defaultはただ独自ドメイン化するだけ、Super StaticはSEO対策や表示速度改善をしてくれるぽいです。

払う金は同じなのでSuper Staticを選択します。

すると

  • Site name
  • Custom domain
  • Public Notion URL

を入力する画面になります。

Site nameには管理画面に表示する名前、Custom domainには使用するドメイン、Public Notion URLにはNotionをシェアで出てきたURLをコピペします。

Continueを押すとPretty URLsというものを入力する画面が出ますがわざわざしなくてもいいと思います。

Pretty URLsに何も入力せずにContinueを押すとDNSの設定が始まります。

ここは各自設定して下さい。

最後にページの設定です。

  • Custom fonts
    お好きなフォントをどうぞ。
  • Site image
    Twitterとかにシェアした際のOGP画像です。
    きれいなのを作って設定しましょう
  • Custom favicon
    そのままサイトのfaviconです。
    適当な絵文字でいいと思います。
  • Snippet njection
    ここに文字を入力すると左上にサイトの説明文みたいなのを表示できます。
  • Site description
    Google検索とかで表示される説明文です。
    サイトのタイトルと同じワードをここにも入れるとSEO上位狙いやすいです。
  • 下のボタン3個
    基本的にデフォルトのままでいいです。
    左から順にサイト内検索、サイトのプロパティーを表示するか否か、Google検索などに表示されるようにするか否か

これで設定は終わりです！

Lighthouseスコア比較

最後にSuperで作成したページとCloudflare Workerで作成したページのLighthouseスコアを比較しようと思います！

左がSuper右がCloudflare Workerです！！！
あぁ！！一目瞭然ですね！！

じゃあの～

最後まで読んでいただきありがとうございます！
良ければZennやTwitterのフォローしていただければ嬉しいです！
ではまた！

Discussion