<h1 id="notion-%E3%81%AE%E3%83%9A%E3%83%BC%E3%82%B8%E3%82%92%E7%8B%AC%E8%87%AA%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3%E3%81%A7-web-%E3%81%AB%E5%85%AC%E9%96%8B%E3%81%99%E3%82%8B%E6%89%8B%E9%A0%86">
<a class="header-anchor-link" href="#notion-%E3%81%AE%E3%83%9A%E3%83%BC%E3%82%B8%E3%82%92%E7%8B%AC%E8%87%AA%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3%E3%81%A7-web-%E3%81%AB%E5%85%AC%E9%96%8B%E3%81%99%E3%82%8B%E6%89%8B%E9%A0%86" aria-hidden="true"></a> Notion のページを独自ドメインで web に公開する手順</h1>
<p>Notion で MarkDown のページをいろいろ管理しているので、それをそのまま公開できたら便利だなと思っていたら、そういう方法、ありました。</p>
<h2 id="%E6%A6%82%E8%A6%81">
<a class="header-anchor-link" href="#%E6%A6%82%E8%A6%81" aria-hidden="true"></a> 概要</h2>
<p>以下のサービスを使用します。</p>
<ul>
<li>Notion</li>
<li><a href="https://www.cloudflare.com/ja-jp/" target="_blank" rel="nofollow noopener noreferrer">CloudFlare</a></li>
<li><a href="https://www.notion.so/Fruition-Free-Open-Source-Toolkit-for-Building-Websites-with-Notion-771ef38657244c27b9389734a9cbff44?pvs=21" target="_blank" rel="nofollow noopener noreferrer">Fruition</a></li>
</ul>
<p>Notion で作ったページを公開、そのリンクを Cloud Flare でプロキシ、その際 CloudFlare Workers によって Fruition で生成した Javascript を付与して見た目いい感じに。という構成ですね。</p>
<p>独自ドメインは CloudFlare で取得可能です。CloudFlare 以外でドメインを持っている場合も NS を登録することで利用可能ですが、subdomian では登録できません(正確には、Enterprise プランであれば可能な模様)。CloudFlare に登録したのち、subdomain を使用することはできます。</p>
<h2 id="%E6%89%8B%E9%A0%86-1%3A-notion-%E3%81%A7%E3%83%9A%E3%83%BC%E3%82%B8%E3%82%92%E4%BD%9C%E6%88%90%E3%81%97%E3%80%81publish-%E3%81%99%E3%82%8B">
<a class="header-anchor-link" href="#%E6%89%8B%E9%A0%86-1%3A-notion-%E3%81%A7%E3%83%9A%E3%83%BC%E3%82%B8%E3%82%92%E4%BD%9C%E6%88%90%E3%81%97%E3%80%81publish-%E3%81%99%E3%82%8B" aria-hidden="true"></a> 手順 1: Notion でページを作成し、Publish する</h2>
<ul>
<li>公開したいページの右上「Share」より、「Publish」から公開します。
<ul>
<li>ページに誰でもアクセスできる Link が生成されます。あとで link 使います。</li>
</ul>
</li>
<li>option は Search engine indexing のみ有効にしておくのが無難だと思います。(Notion の Plan によって選べるオプション違うかも)<br>
<img src="https://res.cloudinary.com/zenn/image/fetch/s--wslu2iyU--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/58d250415663e702b7bcad3750-20230716.png" alt="image" loading="lazy" class="md-img">
</li>
</ul>
<h2 id="%E6%89%8B%E9%A0%86-2%3A-fruition-%E3%81%A7%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%97%E3%83%88%E3%82%92%E7%94%9F%E6%88%90%E3%81%99%E3%82%8B">
<a class="header-anchor-link" href="#%E6%89%8B%E9%A0%86-2%3A-fruition-%E3%81%A7%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%97%E3%83%88%E3%82%92%E7%94%9F%E6%88%90%E3%81%99%E3%82%8B" aria-hidden="true"></a> 手順 2: Fruition でスクリプトを生成する</h2>
<ul>
<li>
<a href="https://www.notion.so/Fruition-Free-Open-Source-Toolkit-for-Building-Websites-with-Notion-771ef38657244c27b9389734a9cbff44?pvs=21" target="_blank" rel="nofollow noopener noreferrer">Fruition</a>を開く。
<blockquote>
<p>Step 2: Customize and generate the script (2 mins)<br>
の箇所で、使用するドメインと、先ほど生成した Notion の URL を入力。</p>
</blockquote>
</li>
<li>「COPY THE CODE」でコードをコピーしておく。</li>
</ul>
<h2 id="%E6%89%8B%E9%A0%86-3%3A-cloudflare-workers-%E3%81%AE%E8%A8%AD%E5%AE%9A">
<a class="header-anchor-link" href="#%E6%89%8B%E9%A0%86-3%3A-cloudflare-workers-%E3%81%AE%E8%A8%AD%E5%AE%9A" aria-hidden="true"></a> 手順 3: CloudFlare Workers の設定</h2>
<p>CloudFlare の登録は済んでいる前提です。</p>
<ul>
<li>
<p>「Workers &amp; Pages」より、「Create application」<br>
<img src="https://res.cloudinary.com/zenn/image/fetch/s--QSwkGvA_--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/8230893f20ebfa22e5f9501f.png%3Fsha%3D71ec153f29cf2a16f7aa10bb850f23658bab7596" alt="image" loading="lazy" class="md-img"></p>
</li>
<li>
<p>create worker<br>
<img src="https://res.cloudinary.com/zenn/image/fetch/s--8jC4cFFi--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/703d28002c084973d874bde2.png%3Fsha%3Df5ea537d8845a07b7cc79903b1fb27aff7a7c799" alt="image" loading="lazy" class="md-img"></p>
</li>
<li>
<p>この段階で編集できないので、名前をつけて deploy<br>
<img src="https://res.cloudinary.com/zenn/image/fetch/s--AcTUbFxY--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/50c423626c415738cbf9cfea.png%3Fsha%3Dc32ec1ff1d5eca6d1b62b3975924bed73035f9ff" alt="image" loading="lazy" class="md-img"></p>
</li>
<li>
<p>Edit Code より、workers.js を先ほど Fruition で取得したコードに書き換えて、</p>
<p><img src="https://res.cloudinary.com/zenn/image/fetch/s--wE2OeFjH--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/c7075d6bca2bc82c94c900ad.png%3Fsha%3Dc50823eb3adf3e13af3b9c5f43735282b84d5638" alt="image" loading="lazy" class="md-img"></p>
</li>
<li>
<p>save and deploy</p>
<p><img src="https://res.cloudinary.com/zenn/image/fetch/s--vLz33Pgv--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/b53a25fc398b8555f55592f6.png%3Fsha%3Dae5f454c1d5467812bdf02608e25b64e84f752f0" alt="image" loading="lazy" class="md-img"></p>
</li>
</ul>
<p>一旦ここまで。</p>
<h2 id="%E6%89%8B%E9%A0%86-4%3A-cloudflare-website-%E3%81%AE%E8%A8%AD%E5%AE%9A">
<a class="header-anchor-link" href="#%E6%89%8B%E9%A0%86-4%3A-cloudflare-website-%E3%81%AE%E8%A8%AD%E5%AE%9A" aria-hidden="true"></a> 手順 4: CloudFlare Website の設定</h2>
<ul>
<li>Website の設定（site が使える状態まで)
<ul>
<li>CloudFlare 以外のネームサーバーから site を登録する場合
<ul>
<li>Websites → Add a Site<br>
<img src="https://res.cloudinary.com/zenn/image/fetch/s--Hr6GFVBX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/c2f62bcf2eddff6aa8576df1.png%3Fsha%3D4ef81efd27c02ce8592dd15b1b85fe71de6d0339" alt="image" loading="lazy" class="md-img">
</li>
<li>使うドメイン名を入れて Add site<br>
<img src="https://res.cloudinary.com/zenn/image/fetch/s--8HzZaQqE--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/98af767894593db3fd026d1e.png%3Fsha%3D7c7416e3fc6403cc7d9565505d7d89e274003dfb" alt="image" loading="lazy" class="md-img">
</li>
<li>NS レコードを、以上元のネームサーバーに登録。</li>
</ul>
</li>
<li>CloudFlare で新規にドメインを作る場合(有料, 大体 1 ドメイン 1000 円〜)
<ul>
<li>Domain Registration → Manage Domain より、使いたい domain で検索、使えるものを購入できる<br>
<img src="https://res.cloudinary.com/zenn/image/fetch/s--r_O6wgDk--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/0d2563f3b6fc7820e7eeae55.png%3Fsha%3Df6c6a18b30c436dadfa30ce20601612607013a59" alt="image" loading="lazy" class="md-img">
</li>
<li>購入すると、Websites に購入した domain で site が登録されている。</li>
</ul>
</li>
</ul>
</li>
<li>DNS レコードの設定
<ul>
<li>設定した domain の Site のページにアクセスし、「DNS」⇒「Records」から、以下で作成する
<ul>
<li>Type: <code>A</code>
</li>
<li>Name: <code>xxxx</code>(使いたいサブドメイン. root の場合は<code>@</code>)</li>
<li>Content: <code>104.18.23.110</code> （これは Notion のドメイン。ref: <a href="https://zenn.dev/link/comments/c48afeb5c77d07" target="_blank">https://zenn.dev/link/comments/c48afeb5c77d07</a> )<br>
<img src="https://res.cloudinary.com/zenn/image/fetch/s--508Eoruj--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/0b730a500ef24107bd1791b2.png%3Fsha%3De549a2dc4fcfd4e3aad3c5919f31ea4d42cf6a32" alt="image" loading="lazy" class="md-img">
</li>
</ul>
</li>
</ul>
</li>
<li>Workers Routes の設定
<ul>
<li>Site のページの Workers Routes より、「Add route」
<ul>
<li>Route: <code>{domain}/*</code>
</li>
<li>Worker: さっき作った worker の名前<br>
<img src="https://res.cloudinary.com/zenn/image/fetch/s--gLyoXjOx--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/29ea88df7623c1f4b4d760ae.png%3Fsha%3D4a9c3f4f5b87e7374e4b5cc12bbfd77fb77bdbea" alt="image" loading="lazy" class="md-img">
</li>
</ul>
</li>
</ul>
</li>
</ul>
<p>以上です。</p>
<h2 id="%E6%88%90%E6%9E%9C%E7%89%A9">
<a class="header-anchor-link" href="#%E6%88%90%E6%9E%9C%E7%89%A9" aria-hidden="true"></a> 成果物</h2>
<p>サンプルとして作った私のプロフィールページを置いておきます。</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__df42e2b1fde56" src="https://embed.zenn.studio/card#zenn-embedded__df42e2b1fde56" data-content="https%3A%2F%2Fprofile.cbmrham.com" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://profile.cbmrham.com" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://profile.cbmrham.com</a></p>
<h2 id="%E6%89%80%E6%84%9F">
<a class="header-anchor-link" href="#%E6%89%80%E6%84%9F" aria-hidden="true"></a> 所感</h2>
<p>Fruition に書いてある手順で基本的に大丈夫なんですけど、キャプチャが古かったり不明なところがあったので解消しつつ書きました。</p>
<p>使ってみた所感</p>
<ul>
<li>簡易的なページを作るにはコンテンツの管理も Notion でできるのはとても楽。</li>
<li>ネストした Notion のページも問題なく表示できたけどブラウザバックには対応しておらず。単体のページに収めるのがよさそう。</li>
<li>console に API 呼び出し失敗してるエラーがでてる。サイトとして安定感はないと思う。本格運用には向いてないかも。</li>
</ul>


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

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

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

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

Discussion