💡
Notionブログを無料で開発しWEB公開してみた！
はじめに
Notionブログは、WEBサイトとして独自ドメインを使って公開できます。
このブログもNotionを使って作成しました。
ここではNotionを独自ドメインで公開する4つの方法に加え、Cloudflareを用いた詳細な方法を説明します。
GoogleAnalyticsとの連携も含めて無料プランで完結しています！
目次
- ブログをつくろう
- 作ったブログを公開しよう
- 独自ドメインをつけよう
- GoogleAnalyticsと連携させよう
1. ブログをつくろう
まずは公開するためのブログを作りましょう。
１から作るのは相当大変なので、すでに公開されているテンプレートを引用すると良いでしょう！
テンプレートを引用したら、自分好みのデザイン。文言に修正を加え、完成させましょう！
【Notionのテンプレート】
【動画解説】
2. 作ったブログを公開しよう
ブログの作成が完了したら、Notionの右上にある「共有」メニューからWeb公開を選択します。
そこで公開を押せばURLが発行され、外部からのアクセスが可能になります。
とても簡単にWEB公開ができてすごいですね。
詳細の細かい設定については以下Notionのホームページを参考にしてください
3. 独自ドメインをつくろう
ここまでは無料のNotionプランでも可能ですが、Notionアプリ内で独自ドメインをつけようとすると有償のプランへの加入が必要になります。
しかし、本ブログは、以下サイトを
手順1. お名前.comにて独自ドメインを作成
レンタルサーバーは不要なので建てる必要はないです。
手順2. Fruition でスクリプトを生成する
- サイトの独自ドメイン化
- カスタムスクリプト(JS/CSS/HTML)の注入
を実現するツールです。
トラフィック量次第では有料になりますが、小規模な企業サイト程度のアクセスであれば、Cloudflareも無料枠で問題ないです
その後、「COPY THE CODE」でコードをコピーしましょう。
手順3. CloudFlare Workers の設定
以下サイトのSTEP3 に従って登録を進めました。
注意すべきなのは、IPアドレスについては「1.1.1.1」はセキュリティの観点で変更になっています。
2024年9月時点でのCloudFlereのIPアドレスは「192.0.2.0」なので、そちらで設定してください。
また、自分の場合、手順2で作成したコードについて、”https://”の文言を加えることでアクセス可能となりました。(147行目)
他は上記記事に従い進めれば、独自ドメイン化が完了するかと思います！
4. Google Analytics の設定
最後にGoogleAnalyticsとの連携をさせましょう！
notionの機能として、Googleアナリティクス連携を実施することは可能ですが、そちらは課金プランへの登録が必要になっています。
今回は、3.手順3で作成したCloudFlare WorkersのScriptを編集し、アナリティクスの導入を行いたいと思います。
手順1. Googleアナリティクスを作成し、新規に作成します。
以下サイトに遷移し、作成を進めてください
手順2. 作成後、測定ID(G-〇〇〇〇〇〇と記載されたコード)をコピーします。
- [ウェブ] タブを選択します。
- ウェブデータ ストリームをクリックします。
- 測定 ID は、ストリームの詳細の最初の行で確認できます。
手順3. CloudFlare Workers ファイルの修正
BodyRewriterClassに以下コードを挿入します。
G-〇〇〇〇〇〇部分には、手順2で取得した 測定IDを代入してください！
デプロイ完了後、数時間おき、Googleアナリティクス側でダッシュボードが表示されていたら完了です！
おわりに
以下手順を踏むことでNotionブログを無料で開発しWEB公開ができると思います！
notionは連携ライブラリや日本語でのドキュメントが多く、そこまで手間をかけずに実装することができました！
独自ブログに興味を持っていただいた方はこの記事を参考にぜひ実践してみてください！