logoChibiham
cover
📒

Notionのページを独自ドメインでwebに公開する手順

Notionのページを独自ドメインでwebに公開する手順

Notionで色々なページを作成して管理しているので、それをそのまま公開できたら便利だなと思っていたら、そういう方法、ありました。

サンプルとして作った私のプロフィールページを置いておきます：https://profile.cbmrham.com/

概要

以下のサービスを使用します。

  • Notion
  • CloudFlare
  • Fruition

    • Notionで作ったページを公開、そのリンクをCloud Flareでプロキシ、その際CloudFlare WorkersによってFruitionで生成したJavascriptを付与して見た目いい感じに。という構成ですね。

    独自ドメインはCloudFlareで取得可能です。CloudFlare以外でドメインを持っている場合もNSを登録することで利用可能ですが、subdomianでは登録できません(正確には、Enterpriseプランであれば可能な模様)。CloudFlareに登録したのち、subdomainを使用することはできます。

    手順1: Notionでページを作成し、Publishする

  • 公開したいページの右上「Share」より、「Publish」から公開します。
    • ページに誰でもアクセスできるLinkが生成されます。あとでlink使います。
  • optionはSearch engine indexingのみ有効にしておくのが無難だと思います。(NotionのPlanによって選べるオプション違うかも)
      Notion image block

    • 手順3: Fruitionでスクリプトを生成する

  • Fruitionを開く。
      Step 2: Customize and generate the script (2 mins)

      の箇所で、使用するドメインと、先ほど生成したNotionのURLを入力。

  • 「COPY THE CODE」でコードをコピーしておく。

    • 手順3: CloudFlare Workersの設定

    CloudFlareの登録は済んでいる前提です。

  • 「Workers & Pages」より、「Create application」
      Notion image block
  • create worker
      Notion image block
  • この段階で編集できないので、名前をつけてdeploy
      Notion image block
  • Edit Codeより、workers.jsを先ほどFruitionで取得したコードに書き換えて、
      Notion image block
  • save and deploy
      Notion image block

    • 一旦ここまで。

    手順4: CloudFlare Websiteの設定

  • Websiteの設定（siteが使える状態まで)
      CloudFlare以外のネームサーバーからsiteを登録する場合
      CloudFlareで新規にドメインを作る場合(有料, 大体1ドメイン1000円〜)
  • DNSレコードの設定
    • 設定したdomainのSiteのページにアクセスし、「DNS」⇒「Records」から、以下で作成する
  • Workers Routesの設定
    • SiteのページのWorkers Routesより、「Add route」
      • Route: {domain}/*
      • Worker: さっき作ったworkerの名前
        • Notion image block

    • 以上です。

    所感

    fruitionに書いてある手順で基本的に大丈夫なんですけど、キャプチャが古かったり不明なところがあったので書きました。

    使ってみた所感

  • 簡易的なページを作るにはコンテンツの管理もNotionでできるのはとても楽。
  • ネストしたNotionのページも問題なく表示できたけどブラウザバックには対応しておらず。単体のページに収めるのがよさそう。
  • consoleにAPI呼び出し失敗してるエラーがでてる。サイトとして安定感はないと思う。本格運用には向いてないかも。
  • CloudFlare触ったことなかったのですがいいですね。workerも応用が効きそう。