Logo
    Notion + Super を使ってサイトを作る

    Notion + Super を使ってサイトを作る

    はじめに

    ゆとり世代の中野です。

    今回チャレンジした内容は【Notion + Super を使ってサイトを作る】です。

    さっそくチャレンジについて書いていきます。

    チャレンジする背景

    Notionを使ってブログやサイトを作りたい方や興味がある方が実際に作成できるようにしたい

    チャレンジ内容

    • Notion + Super を使ってサイトが作れるようになる

    作成手順

    アカウントの作成

    • Notionは下記からソーシャルログインもしくはメールアドレスを使ってアカウントを作成できます
    Notion - The all-in-one workspace for your notes, tasks, wikis, and databases.

    A new tool that blends your everyday work apps into one. It's the all-in-one workspace for you and your team

    www.notion.so

    Notion - The all-in-one workspace for your notes, tasks, wikis, and databases.
    • Superは下記からemailとpasswordを入力してアカウントを作成できます
    Super App

    app.super.so

    Notionの設定

    • アカウントを作成したらさっそくページを追加で今回のサイトのページを作成しました
    image
    • 右上の共有をクリックしてWebで公開を有効にします
      • この設定が抜けてるとSuperで表示されません
    • Webで公開に表示されているURLをコピーしておきます
    image

    Superの設定

    • 画面右上のNew siteをクリックします
    image
    • 必要な情報を入力していきます
      • 今回はお試し運用のためFree siteにしています
        • 独自ドメインが使えないなどいくつかの制限があります
        • Superの使い方を覚えたあと有料プランに以降もできます
      • Site name
        • Superに作りたいサイトの名前を入力してください
          • 画像では Super内に作りたいサイトの名前にしています
      • Notion page URL
        • 先程コピーしたURLを貼り付けます
          • 画像ではまた貼り付けていません
    • 必要な情報の入力が終わるとCreateをクリックしてください
    image
    • 下記のようにNotionの内容が表示されていれば成功です
      • 赤枠の文字をクリックすると実際にサイトを確認することができます
    image
    • ドメインを変更する
      • メニューのDomainsをクリックします
        • Default Domainを編集します
          • 使いたいドメイン名を入力しSaveをクリックしてください
      • 先程の赤枠の場所が設定したドメインに変わっているのが確認できます
      • 実際に設定したドメイン名でアクセスするとブラウザから作成したサイトを確認できます
    image

    まとめ

    • NotionとSuperのアカウントを作成する
    • Notionでサイトのコンテンツを作成しWebで公開する
    • Superでサイトを作成する
    • ドメインを変更する
    • 設定したドメインにアクセスして表示されることを確認する

    さいごに

    いかがでしょうか

    簡単にNotion+Superでサイトを作成できました

    紹介できてない機能もありますので興味ある方はぜひ触ってみてください

    yutanakano

    WEBエンジニア

    大阪生まれのゆとり世代です

    趣味はバイクでツーリングに行くこと

    愛車は Ninja ZX-25R SE KRT EDITION

    Expoでプロダクトを作っています

    image

    ©ゆとりちゃれんじ

    GitHubXInstagram