astro-notion-blogを使ったブログの作成

ブログをはじめた理由 astro-notion-blogを選択した理由結果内容（１）ブログの作成（２）カスタムドメインの登録・管理 ①新規ドメインの登録 ②カスタムドメインの設定（３）GitHub Actionsを使ったブログの更新 ①デプロイフックの作成 ②GitHubにデプロイフックを設定

ブログをはじめた理由

日頃、仕事で試してみたことを会社の社内ドキュメントで共有したりはしていたのですが、趣味でやっていること（仕事とは直接関係ない技術的なことなど）を同じところに書くのは良くないと思ったこと、また４０歳を超えたころからちょっとしたtipsを忘れてしまってググってを繰り返すのも時間の無駄だなと思い、それらのことを備忘録としてブログに残すことにしました。

astro-notion-blogを選択した理由

会社のドキュメントをNotionで書いているため、ブログを書くためだけに他のツールを使うのはシンドイな思っていたところ、astro-notion-blogという良いツールを見つけました。このツールを使うことでNotionで書いた記事をブログとして公開することができます。

https://github.com

結果

Notionの記事をブログとして公開することができました。

Blog

試してみたことを書いておく備忘録

https://www.aki-ito-blog.net

このブログは下記のサービスを使って作成しています。

	サービス	URL
記事を書く	Notion	https://www.notion.so/ja-jp
ブログの作成	astro-notion-blog	https://github.com/otoyo/astro-notion-blog
ブログのホスティング	Cloudflare Pages	https://www.cloudflare.com/ja-jp/products/pages/
カスタムドメインの登録・管理	Amazon Route 53	https://aws.amazon.com/jp/route53/

内容

以下、ブログの作成方法を書いていくのですが、たくさんの方がブログに丁寧に記事を残してらっしゃいますので、ほぼほぼそれらの良記事の引用になります。ですので、当記事の内容の薄さにはご注意ください。

（１）ブログの作成

astro-notion-blogを使ってどのようにブログを作成したら良いのか？というのは↓のREADMEに丁寧に書かれています。

https://github.com

astro-notion-blogを改造する目的でさらに丁寧な説明が↓記事に書かれています。

astro-notion-blogを開設しよう_これでもかと丁寧に解説 - herohoroブログ

ひとりで涙しないで大丈夫

https://herohoro.com

（２）カスタムドメインの登録・管理

オリジナルのドメインを取得するには数千円/年ほどのお金がかかります。お小遣いが少ない身としては何とか節約したいと思うのが本音です。そこで、勉強会やセミナーに参加して溜まっているAWSのクレジットから払いたいという理由で Amazon Route 53 でドメインの取得と管理をすることにしました。

①新規ドメインの登録

Amazon Route 53から新規のドメイン登録の方法は、これもまた↓に丁寧な記事があります。

Amazon Route 53を利用して新規ドメインを登録する手順 - サーバーワークスエンジニアブログ

当エントリーでは、新規ドメインをAmazon Route 53を利用して登録(=取得)する手順と簡易的な動作確認方法についてご紹介します。手順 AWSマネジメントコンソールの画面は、執筆時点のものとなり、一部描画が異なる場合がある点ご注意ください。 (20230929追記: 一部画面の変更を反映しました) 正規手順としては以下オフィシャルマニュアルを参照ください。新しいドメインの登録 - Amazon Route 53 はじめに Amazon Route 53 とドメイン登録について Amazon Route 53 でドメイン登録するメリットについて料金についてドメイン登録/更新費用…

https://blog.serverworks.co.jp

↑の記事の 19. 必要情報を入力し、 [レコードを作成]を押下する まできたところで、 Amazon Route 53 で管理しているドメインをCloudflare Pagesで有効にするために下記を入力します。

項目	入力値
レコード名	www
レコードタイプ	CNAME
値	****.pages.devのようなCloudflare Pagesでデフォルトで作成されたドメイン

②カスタムドメインの設定

Amazon Route 53 に登録したドメインを Cloudflare Pages に設定します。

Cloudflare の 「Wokers & Pages」 → 作成したプロジェクト → 「カスタムドメイン」タブ → 「カスタムドメインを設定」 をクリックします。
サブドメイン込みのドメインを入力します。（当ブログだと www.aki-ito-blog.net ）
CloudFlareのDNSか独自のDNSか訊かれるので MyDNSProvider をクリックします。

しばらくすると下図のように非アクティブからアクティブになります。