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

heysho.com

Fruition - Build Your Next Website With Notion, For Free

Perfect for your portfolio, blog, landing page, or business site. Features: pretty links, custom domains, Google Fonts, SEO support, script injection.

fruitionsite.com

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

自社の企業サイトをできるだけ楽に構築するためにNotionをCMSとして活用したく、WEB公開のための手段を検討した。 要件は以下の通り。 独自ドメインが付与できること 作り込みが不要なこと Notionで作った見た目をそのまま公開できることが望ましい ファビコンやヘッダ部分にあるNotionロゴなどを消せること いくつか選択肢を探すなかで、 Fruitionが要件にマッチしており、実際簡単にサイト構築することができた。 本稿では、Fruitionを使ったサイト構築方法と、簡単なカスタマイズ方法を記載する。 NotionをWEB公開する手順としていくつか候補があったが、以下の理由により利用を見送った。 Super NotionをWEB化する有料サービス。多機能/安定していそうで、日本語での紹介記事も多く見かける。 Pros 独自ドメイン,作り込み不要,ロゴ消せる(CSSカスタマイズできる) Cons 有料（月$12 2021/5現在) => とりあえず無料でできるものを使いたかったので見送り notion-blog VercelでWEB公開することを前提にしたOSSのツール。Next.js+Vercelで見た目を作り、NotionをHeadlessCMSとして使う Pros Cons だいぶ作り込みが必要。Cloneしたそのままだと、オリジナルのブログの見た目そのままなので、ほぼNext.jsで見た目を１から作っていく必要あり=> Next.jsでブログ作る気がなかったので見送り Notionデフォルト機能でサイト公開 + DNSサービスで独自ドメイン付与 Pros シンプル。Route53とかを使えば簡単にできそう Cons Notionのページがそのまま表示される（ファビコンやヘッダのアイコンなど） WEB公開しているNotionページを、 Cloudflare Workersを使ってProxyさせることで、 - サイトの独自ドメイン化 - カスタムスクリプト(JS/CSS/HTML)の注入 を実現するToolkit。 Toolkitと謳うだけあって、上記実現のための手順及び、Cloudflare Workersで動かすJavaScript(300行程度のシンプルなスクリプト)を、サイト上で無料公開しているのみ。 トラフィック量次第では有料になるが、小規模な企業サイト程度のアクセスであれば、Cloudflareも無料枠で問題ない。 なお, Downsides: self-managed solution とあるが、やっていることは極めてシンプルなので、多少なりともHTML/CSS/JSの知識があれば、運用・カスタマイズも難しくない（と思われる） 手順は Fruitionのサイトに詳しく記載があるため、 あくまで、上記サイトの補足として記載する。 Notionでページをつくり、WEBでshareする。ここは割愛。 Cloudflareでアカウントを作り、DNSレコードを設定する。 CloudflareのDNSレコード設定画面で、Aレコードを追加する。 ここでは以下のように設定するといい 名前 コンテンツ 1.1.1.1 ※ Cloudflareネームサーバーの値は、⇓の手順で利用する ドメイン取得したサイト(お名前comとか)の管理画面にいき、ネームサーバーをCloudflareのそれに変更する。 今回はGoogleドメインで名前取得したので、以下のように設定した。 ここでCloudflare Workerで動かすスクリプトを取得する。画面に従って操作するといい。 なお、スクリプトには一部カスタマイズを加えた。具体的なカスタマイズ箇所は後述。 300行程度のシンプルなJavaScriptなので、プラスアルファのカスタマイズも簡単に行える。 Step2で取得したスクリプトをCloudflareにセットする。ここは手順どおりなので、割愛。 上述の Step 2: Customize and generate the script (2 mins) で取得したスクリプトに対して以下の修正を加えた。 ⇓の部分を隠す ※ もとのスクリプトでも隠そうとしている気配はあるので、もしかするとNotionの実装が変わり、Fruitionが追従できていないのかもしれない。。 ここはFruitionの画面上 TOGGLES STYLE AND SCRIPT SETTINGS -> Paste Your Custom Scriptで設定してもよい。 直接スクリプト書き換える場合は、以下のように実施。

qiita.com