目次
ブログ開設でやりたい事を整理する
- 無料で公開
- お金はかけない
- ブログ内に意図しない広告が挟まらないこと
- 見た目がいや
- デザインは将来的には凝りたい
- 公開の手間が掛からない
- 三日坊主にならないように
- 特定のPCでの作業に縛られない。
- スマホで公開作業できる
- プログラム関連の備忘録や日記としてブログが書きたい
- 不特定多数の人に見てもらうことを目的としない。
- 意見交換とかできると良い
- Xとの連携とか？
- 技術ポートフォリオを整理したい
- 目標管理に追加に使いたい
- 趣味のメモ
notion vs astro-notion-blog
仕事で使っているnotionでブログが書けるということで、調べてみたところastro-notion-blogというものにたどり着いた。
astro-notion-blogの仕組みは、Notionデータベースで記事を管理し、Astroで静的なHTMLを生成。HTMLはCloudflare Pagesでホスティングすることで、高速かつ安定したブログサイトを公開できるらしい。
Notion単体と、Astro-notion-blogでWeb公開する場合のメリット/デメリットを比較してみる。
| ホスティング方法 | メリット | デメリット |
|---|---|---|
| Notion単体 | ・記事作成が非常に簡単（NotionのUIだけで完結） ・リアルタイムで即時反映 ・コーディング不要 ・無料で始められる | ・デザインの自由度が低い ・SEO対策が不十分（メタタグやOGP設定が難しい） ・独自ドメインの設定ができない（または有料ツールが必要） ・表示速度が遅いことがある ・アクセス解析や広告の設置が難しい |
| astro-notion-blog | ・高速な表示（静的サイト生成） ・SEOに強い（メタ情報やOGP対応） ・独自ドメイン対応 ・デザインや機能のカスタマイズが可能 ・GitHubでバージョン管理できる ・Notionで記事管理できる（執筆は簡単） | ・初期セットアップに少し技術的な知識が必要 ・デプロイのたびに再ビルドが必要（自動化も可能） ・GitHub・Cloudflare Pagesなど複数サービスの連携が必要 |
Cloudflareとは？
ところで、Cloudflare Pagesってなに？と思って、AIに聞いたところ、下記の特徴を持ったインターネットセキュリティおよびパフォーマンス最適化サービスという事らしい。
やりたい事は十分できそうなので、astro-notion-blogを使って見ることにする。
| 特徴 | 説明 |
|---|---|
| 🔗 GitHub連携 | GitHubにpushすると自動でデプロイされる |
| ⚡ 高速CDN | CloudflareのグローバルCDNで高速表示 |
| 🆓 無料プランあり | 個人ブログなら無料で十分 |
| 🌍 独自ドメイン対応 | yourdomain.com で公開可能 |
| 🔒 HTTPS対応 | 自動でSSL証明書が発行される |
| 📊 分析・ログ | アクセスログやエラー情報も確認可能 |
| 🧪 Preview機能 | Pull RequestごとにプレビューURLが発行される |
astro-notion-blogのセットアップ
基本的には、下記のブログからGitHabへ移動して、日本語Readmeの記載の通りで進めていく。
以下は、つまづいたところの備忘録。
アカウント作成
ブログ公開までに最低限必要なアカウントは以下の三つ。GitHubとCloudflareは同じGoogleアカウントでサインアップした方が連携がしやすいかも。異なるアカウントでサインアップした場合にどうなるかわからない。
- Notionアカウント(https://www.notion.so)
- GitHubアカウント(https://github.com)
- Cloudflareアカウント(https://pages.cloudflare.com/)
Notionのインテグレーション作成
このベーシからインテグレーションを作成するが、それぞれの項目をどのように編集したら良いのか悩んだのでメモを残しておく。インテグレーションを作成してデータベースに接続することで、外部からの操作が可能になる。
https://www.notion.so/profile/integrations
| 編集項目 | メモ |
| インテグレーション名 | 任意の名前をつけて管理しやすいようにする。”notion”という文字列は使えない。 後から編集可能 |
| 関連ワークスペース | astro-notion-blogのデータベースが保存されているワークスペースを選択。 |
| 種類 | ”内部”固定 |
| ロゴ | 何に使うか不明。とりあえずスキップ |
| 内部インテグレーションシークレット | 外部からアクセスする際に必要になるキー。Cloudflareの設定で使用する。 |
| 機能 | 今回は変更なし |
データベースへ接続
作成したインテグレーションを、自分のnotionに複製しておいたブログテンプレートに接続する。接続方法は、データベースページを表示した状態で右上のメニューから接続を選択し、先程作成したインテグレーションを選択すればよい。
データベースIDの確認
右上メニューの[共有]からリンクをコピーすると以下のようなURLが得られる。このリンク内の一部<databaseID>部分を確認しておく。
https://www.notion.so/<databaseID>?v=xxx&source=copy_link
GitHubでリポジトリのフォーク
以下のGithubを、自身のアカウントにフォークする。フォークの仕方は、右上のForkからできる。
Cloudflareのプロジェクト作成
プロジェクトは、左側のメニュー > コンピューティング(Workers) > Workers & Pages から作成できる。ビルド設定については、日本語Readmeの手順通りに進めていくことで、ビルドとデプロイまで完了。
公開URLに関して
デプロイ完了後に、公開URLは？となったので、どこでURLがわかるかというと、Cloudflareのプロジェクトの右上、訪問するからアクセスできる。
ところで、Readmeの通りに進めていったところ、ドメインは画像の通り、astro-notion-blog-d3f.pages.devとなっている。このドメインは変更できるのか調べてみたところ、Cloudflareのプロジェクト名によって、”https://<プロジェクト名>.pages.dev”というドメイン名になるとのこと。
早速、プロジェクト名を変更して、再デプロイを実行・・・するが、ドメイン名は変わらなかった。どうやら、新規作成時のプロジェクト名で固定されてしまうようなので、プロジェクトを新規作成して再デプロイすることで、ドメイン名を変更することに成功。
やり残し
次回は、上部の画像と、左側メニューのカスタマイズをやる。