NotionとSuperを使ってたった15分でWebサイトをつくる方法メモ

Created
Jan 17, 2021 2:14 PM

はじめに

チームのドキュメンテーション、プロジェクト管理、パーソナルなメモまで。おどろくほど使い勝手よく幅広い用途につかえるソフトウェア Notion は、インターネッツなお仕事をしているひとたちの中では認知率90%を超えるのではないだろうか。

NotionにはつくったページをワンクリックでWebに公開できる機能がある。Super を使えば公開したページにカスタムドメインを割り当てたり、Webフォントやスタイルを調整できたり、簡単なSEOができたりするので超便利。

Notionがあっという間に簡単なCMSになっちゃうのだ。無料でつかえるPersonal Planでも、PageとBlockは無限に追加できるので最強だ。

ためしに https://shinyawatanabe.info/ をつくってみたのでやり方のメモ。

用意するもの

3つだけ!

  1. 好きなドメイン
  2. Google Domainsで好きなドメインを取得しよう。ちなみに今回取った shinyawatanabe.info は¥1,400 / 年だった。

  3. Notionの公開ページ
  4. 無料でも使えるがお好きなプランでどうぞ。いまなら Personal Pro でも年間契約で$4 / 月で格安ですね。いまのところ学生や教職員は無料だぞすごくない?

  5. Superのアカウント
  6. ちょっと前まで$4 / 月だったが最近強気の値上げをして$12 / 月になったぞ!

手順

おどろくほど簡単!

ドメインを取得する(45秒)

  • Google Domains でお気に入りのドメインを見つけたらカートに入れて購入手続き進めてカード情報入れてポチッとして終了。だいたい45秒で終わる。

Notionの公開ページをつくる(15秒)

  • WorkspaceにPageを作成
  • Page右上メニューの Share > Share to web をアクティブにする以上終了!5秒で終わる。
  • image

買ったドメインを、公開したNotionに、Superを使って割り当てる(4分)

  • Superにsign in したらメニュー Sites > New site + をクリック
  • image
  • Site Methodは好きな方を選択する。レコメンドされるのはSuper Staticだ。
  • image
  • Site Settingsは下記項目を埋める。
    • image
    • Site name:気の利いたサイトのタイトルを適当につける(あとで変更できる)
    • Custom domain:買ったドメインを入れる
    • Public Notion URL:さっきNotionでつくった公開ページのURLを入れる
  • Pretty URLsはサブディレクトリを好きにつくれるので必要があれば設定する(あとから追加できる)
  • image
  • DNS Recordsでドメインとサイトを繋げる。
  • Super Optionsでそのほかいろいろ設定する
    • image
    • Custom fonts:お好みのWebフォントを指定できるぞ
    • Site image:OGP Imageを設定できるぞ(1200px*630px)
    • Custom favicon:ファビコンを設定できるぞ(32px*32px)
    • Snippet injection:GAのトラッキングコードとかCSSを仕込めるぞ 今後いろいろ拡充されるっぽい cf. How to change the colors on your Super site
      • Google Analyticsのアカウント登録は2秒で終わる cf. アカウントを追加する
      • トラッキングコードの発行は2秒で終わる
        • Google Analyticsの管理画面から 管理 > プロパティ列のデータストリーム > ウェブ を選択
        • タグ設定手順 > 新しいページ上のタグを追加する > グローバル サイトタグ(gtag.js) をSuper側にコピペする
    • Site description:気の利いたdescriptionを書こう
    • Enable or disable site search:好きな方を選ぼう
    • Show or hide page properties:好きな方を選ぼう

あとはDNS浸透をまつ(10分くらい)

image

以上、終了!!!

  • サイト公開までにかかった時間 15分
  • このブログを書いた時間 10分
  • かかった初期費用 だいたいドメイン取得の¥1,540だけ(ただしサイト公開してから1週間後には+¥1,200ちょっとかかる)
    • ドメイン取得 ¥1,400+消費税¥140=¥1,540 
    • Notion とりあえずPersonal Planで無料
    • Super 7日間無料トライアル / その後$12=¥1,246.08(1月17日 9:52 UTC時点)

できあがったWebサイトはこちら

まだなにもつくってないけどこれからちまちまブログとかポートフォリオ更新しようと思います。とにかくNotionの使い心地そのままにコンテンツを更新できるの最高体験だ。

Webサイトづくりがこんなに簡単でいいのか!? とびっくりした人はこちらの アフィリエイトリンク からSuperに登録してサイトつくってみてください俺がちょっと喜びます。

👋🏻Notes < NotionとSuperを使ってたった15分でWebサイトをつくる方法メモ