Notionを使ってみる前に #2 Notionを独自ドメインで公開ウェブサイト化

IT／インターネット
スポンサーリンク

前回は、Notionって何？ということで事前調査した

ここから一歩踏み込んで実際に使おうとしているのだけど、利用目的、活用領域が複数あると思っていて、現在想定しているのは以下のあたり

  • ウェブサイト(CMS)としての利用
    • 独自ドメインで公開(サードパーティー的なサービスか自作か？)
    • コンテンツは、固定系のページと、ブログエントリー的な流れる情報
  • 非公開コンテンツ、メモ用途
    • ネットサーフィン中のURLや気づきをサクサクっと残しておく
  • プライベートプロジェクトの管理ツール
    • タスク管理
    • スケジュール(マイルストーン)計画のアウトプット
    • 仕様などのドキュメント
    • 公開非公開は未定

今回は特に、外部公開するようなウェブサイトのCMSとしてNotionを使う場合に、独自ドメインで公開したいのだけれど、どうも簡単ではなさそうなので、その方法を調べる

Notion上のコンテンツを独自ドメインで公開する時の障壁

これまでの事前調査で気になることが、いくつか見つかっている

  1. 独自ドメインをNotion自体がサポートしていない(いなさそう)
  2. Notionの有料プランを使わないと検索エンジンにインデックスされない

外部公開のウェブサイトを構築するときに、この2つは結構致命的な話で解決方法を把握しておかずにツールを使い始めても、後でガッカリ… なんてことになりかねないので、実作業を始める前に対策を把握しておく必要がある

Notion単体で検索エンジンにインデックスさせるには課金必須

検索エンジンに関しては、公式のドキュメントで言及されている

Add your page to search engines

By default, your public page will not appear in search engine results. But, you can allow Google and other search engines to display your page in results for relevant queries if you want.

Note: You’ll need to have a paid subscription to enable search engine indexing on your public pages.

Public pages & web publishing

サブスクで課金しないと検索エンジンにインデックスさせないよ、と…

後述の「Wraptas」や「Notion Blog」などの静的ページに変換する仕組み以外は、課金しないと解決しない問題と思われる… もしくは、動的に書き換えるか？

Notion単体で独自ドメインはできないが、サブドメインが提供されている

どうやら去年、notion.siteのサブドメインが利用できるようになった模様

Public Notion pages are now hosted at yourdomain.notion.site

Now, all your public Notion pages are live on: [yourdomain].notion.site!

Personalize your public Notion pages with a notion.site domain

[yourdomain].notion.site が提供されるならCNAMEで関連付けすれば良さそうだけどページ間のリンクなどはNotion側の内部的な処理なので、CNAMEで独自ドメインの名前解決ができても、その後ページに辿り着いた後、サイト回遊しちゃうと、結局notion.siteのサブドメインに戻ってしまいそう

このサブドメインは、公開ページにだけ有効で(適用され)、非公開のページに対しては、以前の共通ドメイン notion.so/your-space-name*** のままらしい

Note: The unique acme.notion.site URL is only used for publicly shared pages within your workspace. Internally, you will still see the URL as notion.so/acme.

Public pages & web publishing

同ページのFAQsに、フルカスタムドメインは「今の所」はサポートしていない、という書かれ方がされているので、計画としては完全な独自ドメインのサポートを「計画」か「検討」はしているってことかな？

FAQs

For example, if your company is Acme, Inc., you could customize your URL to acme.notion.site, but not www.acme.com.

That said, fully custom domains are not supported at the moment.

Public pages & web publishing

Notionを独自ドメインで公開する方法

Notionのコンテンツを独自ドメインで公開する方法は、複数の手段がサードパーティのサービスや有志(個人)が作ったスクリプトやサービスとして、提供(公開)されているようなので、それらの情報をクリッピングして内容を整理する

Wraptas

1つ目のクリッピングから、主題から外れるけどw
女子大生に人気なのか？っ？最近の学生は、IT感度が高いというか…
むしろ、ITで仕事している方が疎かったりするんじゃないw

最近ではその便利さ・カスタム性の高さから女子大生のなかでも講義ノートとして人気になってきているようです。

Wraptas × NotionでWebサイトを公開する方法

Superを解約して、Wraptasに変更したと

解約した1番の理由は、まったくアップデートされなかったことです。正確には、いつになるか聞いてみても「数週間以内に」「すぐに」というあいまいな答えは返ってくるものの一向に実装されないことに不満を感じていたからです。

Wraptas × NotionでWebサイトを公開する方法

こういう裏話？は直接サービスと関係ないけど、なんか好感持てるなぁ

ユーザーさんのことを考えると、このまま1人で運営するのはあんまり良くないなというのがあって。たとえば私が病気にでもなったらサービスは止まっちゃうので、ペライチと一緒になることを決めました。

(snip)

アル株式会社のけんすうさんが「ラクスルさんとか買収したらいいのに…」って過去にツイートしてくださっていて。それだけじゃなく「ラクスルの社長紹介しますよ」ってDMしてくださいました。

個人開発したWraptasを1年経たずしてスピード売却。開発者に聞くヒットするプロダクト作り

フル活用している人の実際の実装例

以前はGitHub Pagesを使ってポートフォリオを公開していたのですが、今回Notion+Wraptasという構成に乗り換えることにしました。

Notion+Wraptasで気軽に編集可能なポートフォリオを実現する – Qiita

いくつかWraptasで作成されたサイトを見て気になったのが、URLの階層化ができないかも？だったけど、/blog とか /service としているページもあるので、できるのかな… 公式にも

パーマリンク設定（URL変更）機能

Notionに書くだけでWebサイトが作れるWraptas

とあるので、できそうだけど、各サイトの末端のページは、ランダムな文字列のURLが多いので、おそらく、このランダムな文字列のURLについて1つ1つマッピング設定をするんじゃなかろうか… トライアルがあるので試す場合は、その辺りの設定や挙動を確認してみよう

海外だと、このURLを独自定義する仕組みを「Pretty URLs」などと呼ぶらしい

Super

Wraptasとも比較しながらSuperを紹介してるページがあった

やはりAnotion最大の魅力は、「サポート体制」および「コミュニティ」にありそうです。

英語が得意ではない方、Webの知識についてあまり詳しくない方はAnotionのほうが安心かもしれません。

Notionをwebサイトとして公開する方法 : SuperとWraptas（Anotion）

WraptasとSuperでできることに大きな差はなさそう

上記サイトでは他にも以下のようなサードパーティツールがあると、軽く紹介されていた

Notion blog

JavaScriptで動くツールってことかな

This is an example Next.js project that shows Next.js’ upcoming SSG (static-site generation) support using Notion’s private API for a backend.

GitHub – ijjk/notion-blog: A Next.js site using new SSG support with a Notion backed blog

静的ページを生成する仕組み(SSG)を利用して、裏ではNotionのAPIを動かしていると
で、これを動かす場合、Vercelを使う例が載っているが…

Vercelが何なのか… 知らんっwww

元祖？はNetlifyで、その対抗馬としてVercelが出てきたと

自分でサーバーをホストすることなく、JavaScriptを使ったアプリの稼働をサーバーレスで実現してくれるサービスってことね

Notionアンパサダーと呼ばれる方が国内に数名いるようで、その中の1人の方がブログエントリーを上げているので、この辺りも一通り目を通せば、構築はできそう

有料記事も出している

運用に入ってからカスタマイズで拡張とかしたくなるだろうし、そもそもの仕組みとしてReactからのNext.jsあたりも理解しておいた方が良いだろうなぁ…

easy-notion-blog

Notion Blogをより使いやすくしたものらしい

Notion Blog はデータ取得部分を公式 API に切り替える必要に迫られていました。

しかしながら、本家は公式 API に対応しませんでした。すると、公式 API に対応した Notion Blog を自作し始める熱狂的な Notion ブロガー達が現れました。

何を隠そう、私もその1人です。

Notion Blog が簡単に始められる easy-notion-blog の紹介

GitHubの日本語のREADME

設置に必要な前段の準備作業の解説

他にも色々とエントリーがあるので、利用するなら製作者のブログは必読

Fruition

Cloudflareでドメイン取得したので、本命は、このFruitionを使う実装なんだけど…

解説してくれているページ

おおよその手順は下記のStep0〜3の通りで、ドメインの取得、Cloudflareのアカウントやドメイン設定、FruitionによるCloudflare上に登録するworkerのJavaScript生成、JavaScriptをClodflareに登録という手順になります。

(snip)

Notionのアクセスに使いたい独自ドメインがサブドメインになっているのであれば、Cloudflare側でのDomain登録はCNAMEでの登録が必要になります。例えば僕の場合は、corp.ab3.visionというドメインの接続先をNotionの公開URLにしたいのですが、その際にCloudflare側のDNS設定では、CNAMEとして、corp.ab3.visionの接続先をab3.visionにしました。(ab3.visionの接続先はAレコードとして、事前にIPを登録してあります)

Notionの共有URLを独自Domainで公開する｜菊池佑太｜note

Fruitionを利用するとき、サブドメインは要注意、みたいのを、どこかで見たが、こういうことか… と思いつつも、DNSレコードのイメージが湧かない…

解説ページに書かれているCNAME設定する場合って、その対になる名前解決できるFQDNが必要で、そのことに触れていない… やるとしたら以下のようになるはずだけど…

example.com A 192.0.2.1
corp.example.com CNAME example.com

例で挙げているサブドメインなしのexample.comのIPは何になるの？
Cloudflare Workerが処理するってことだよね？
そうすると、Cloudflareが提供するIPになるはず…

名前解決の流れとリクエスト先は以下のような流れ

Client --> corp.example.com --> example.com on Cloudflare Worker

で、Cloudflare Worker側に登録したJavaScriptが裏でNotionのコンテンツを拾ってきてクライアントにレスポンスを返しているって理解でいいのかしか？

Client <-- Cloudflare Worker w/ JavaScript <--> Notion

公式をよく見るとFAQsに記載があった

How do I use a subdomain?

Most steps are the same. The only differences are 1) in step 1.4, add an A record with your subdomain, 2) in step 2, enter your subdomain in the form, 3) in step 3.5, use your subdomain as the route.

Fruition: Free, Open Source Toolkit for Building Websites with Notion

公式には「CNAMEを設定せよ」とは書かれていないぞっ？

以下は、モザイクかかっているけど、サブドメインっぽいが、Aレコード設定で1.1.1.1 なので、やはりCNAMEである必要はないんじゃない？

CloudflareのDNSレコード設定画面で、Aレコードを追加する。

Fruitionを使ってNotionを無料・爆速でWEBに公開する – Qiita

あぁ、やはり、最初の想定であってそうだなぁ

もちろんDNSレコードの構成によってはCNAMEでもいいし、Aレコードでもいいし、いずれにしてもサブドメインで名前解決できるようにしてってことね

サブドメインにCNAMEだけ設定とかできないから、もし、CNAMEにするなら参照するFQDNに対してAレコードでの名前解決が必要

この設定をしておかないと、後でWorkerでサブドメインのルート追加と呼ばれる作業をしても、「そんなドメインは知らんぞ！」というエラーに遭遇します。

Notion を無料で独自ドメインのWebサイトの変換する Fruition を使ってみた | by toiee Lab 亀田 | Medium

ということで、CNAMEである必要はなくて、サブドメインに対してIP 1.1.1.1 でAレコードでいいわけ(何かそれ以外の理由があるんだろうか？あとでやってみて気づいていない考慮があったら、ココの記載を修正する)

検索エンジンとの相性

WraptasやNotion Blogのように静的ページに一度キャッシュしたものであれば、その静的ページにする際にちゃんと検索エンジンに拾われるようにHTML部分を書き換えたり変換してキャッシュしているはずなので、Notion側が有償プランでなくても問題ないという話は理解できる

例えば、Wraptasの導入事例に載っているサイトを site:example.com で検索すると下層のページがちゃんとインデックスされているのがわかる

が、Fruitionは動的に変換しているんじゃないだろうか？という気がしていて、その場合に検索エンジン対応がちゃんとできているのかが気になる

Wraptasのそれと同じように site:指定で検索してみると下層ページのインデックスが怪しい…

なぜか、fruition.comのドメイン配下のページとして、Notion(社)本体のサイトのコンテンツまでインデックスされていない？なんじゃこれ？あと、下層のRoadmapなどが同じ紹介文とページタイトルで検索結果に表示されている点も気になる

It supports custom domains, dark mode, Google Fonts, SEO, and script injection. The coolest feature is pretty URLs. 

Fruition: Free, Open Source Toolkit for Building Websites with Notion

SEO対策しているとあるけど、されてなくない？

他のFruitionで実装されているサイトもいくつか同じように検索してみた

やはりうまくインデックスされていない感じがする、Wraptasを利用した各サイトとは異なるなぁ…

検索エンジン意識すると、Fruitionは、ちょっと処理が不足している感じがする

要件(やりたいこと)の整理と実現方法の検討

何したいの？

  • Notionを使いたい
  • 多少堅めのコンテンツのKnowledge base的なページを設置したい
  • 気軽に載せられるブログも載せたい
  • Contactフォームも設置
  • サイト内検索欲しい(Googleでもいいかなぁ)
  • 検索エンジンに拾ってもらいたい
  • URLはキレイにしたい

もう少しサイト構造で考えると以下のようにするのがいいのではないかと思っている

  • example.com (home)
    • about
    • profile
    • contact
  • kb.example.com
    • tags
  • blog.example.com
    • categories
    • tags
    • archives

どう実現する？

WraptasやSuper使って課金してサイト公開しても良いのだけれど年間1万かけなくてもOSSを利用すれば同じことが実現できるので、勉強兼ねて以下のようにしてみるかなぁ…

  • example.com (home)
    • fruition
  • kb.example.com
    • easy-notion-blog
  • blog.example.com
    • easy-notion-blog

fruitionはCloudflare Workerを理解したいので、使ってみたいけど、検索エンジン対応が今ひとつなので、その点をカスタマイズでカバーできるかどうか…

Knowledge baseなサイトと、Blogに関しては、GitHub内の Notion Blog を見てみたけど、なんとなく、一番良さそうなのが easy-notion-blog だったので使ってみようかなぁと

サイト開設するのに、もう少し準備が必要そうだ

おまけ

Notionでフォームを設置できる？

Forms for Notion

Create beautiful forms connected to your Notion pages

Chilipepper

Fruitionのダークモードにも対応しているよと

Using Fruition? You can add this custom script to make your form compatible with the dark mode toggle at the top of your site. 

Fruition + Chilipepper Dark Mode

Cloudflare Workersを少し理解する

公式サイトから概要見てみる

Workersサイトは、少数のターミナルコマンドで展開し、Hugo、Gatsby、Jekyllなどの静的サイトジェネレーターの生成するサイトならどれでもサポートできます。Wrangler(当社のCLI)を使用して、サイトのアセットをKVに直接アップロードできます。Workersサイトにリクエストが届くと、Wranglerが生成したCloudflare Workerが適切なヘッダーを使用し、KVからアセットを読み取って提供します(コンテンツタイプやキャッシュコントロールの心配は不要です、当社が対応します）。

Workersサイトを使用して、ブログ、マーケティングサイト、ポートフォリオなどの静的サイトを展開できます。 サイトを少し動的にしたいと判断した場合、Workerは単なるコードですから、編集し、拡張すれば世界中で動的サイトを運営できます。

Workersサイト:当社のネットワーク上で直接ウェブサイトを展開する

Fruitionも静的サイトってことなのかなぁ…

以下を読んで、なんとなく理解した気になれた

エッジサーバーで JavaScript が動くということは、アプリケーションサーバーに届く前段でそのリクエストを扱うことができます。ある種の L7 プロキシと言えるかもしれません。そのままアプリケーションサーバーにプロキシしてもよいし、もしキャッシュをもっていれば、アプリケーションサーバーに到達させずにエッジが自力でレスポンスを送ってしまうこともできます。

Cloudflare Workers それは Frontend / Node.js が CDN Edge Side まで拡張されるもの – mizdev

以下は、調査(学習習得)過程を後追いできる感じで、すごくいい

AWS Lambdaで問題になるコールドスタートのようなことが起きない仕組みになっているという話
なるほど、と思ったのでクリップしておく

リクエストが来る前にこの3way handshakeの間にJSランタイムを起動しておこうというわけ。

(snip)

通常この3way handshakeには5ms以上の時間がかかる。

よって、リクエストを開始する際にはすでにこのオーバーヘッド分の5msは経過してJSランタイムが起動されている状態になっているため、実質0msでリクエストを処理することができる。

Cloudflare Workersの0ms cold startsのしくみ | すな.dev
スポンサーリンク

コメント

タイトルとURLをコピーしました