77th astro-notion-blog start - astro-notion-blog

Notionを利用してBlogを始めます。 Notionを始める Astro Notion Blogに注目 README.ja.md 事前準備 Notion APIとGithubの準備 Cloudflare PagesでDeply

Notionを利用してBlogを始めます。

Notionを始める

5年ほど前にGoogleを使ってBlogを始める準備に手を付けました。CSSとHTMLを勉強しBlogの作成に取り組みましたがとん挫。

日本語が使えるNotionに出会い、One noteやDynalistで整理していた記録類を移行しています。

NotionでEnding Noteを書き始めて重宝したのは、内容の共有が容易でコメントも簡単に付け加えられる点で、WEBでの配布も可能です。

Notionのテンプレートを探している時に目に触れたのがastro-notion-blogの情報で、プログラム　コード不要でブログが開設できそうです。早速、開発者のOtoyoさんのブログを軸にhirohoroさんやだむはさんのブログを参考にastro-notio-blogでブルグ作成に取り組みました。easy-notion-blogも有るようですが、表示速度が遅いそうなので、爆速で表示できるAstroを選びました。ブログの77thは喜寿の事で、取り組みを開始した年齢です。

README.ja.md

💡

https://astro-notion-blog.pages.devからLinkが埋め込まれた赤字のastro-notion-blogをクリックするとotoyaさんのGitHubにあるレポジトリーが開きます。

💡

このREADME.ja.jpに掲載されている記事から転記した紹介です。
以降に詳しく導入方法が記載されています。表示は日本語と英語の切り替えも出来ます。
素人ですので、かなり苦労してブログ完成まで辿り着きましたので、備忘録として補足を残しておきます。

事前準備

💡

必要なものにあるNotionをクリックすると自分のものが開きます。Cloudflare PagesはLinkからSignUpし登録しておきます。英語表示ではGitもあり、必要ですので、https://github.comからSignUpしておきます。
2.ブログテンプレートのLinkを開いて、「複製」からデータベースを自分のNotionに取り込みます。
3.notionの複製したデータベースから「共有」を選択し「リンクをコピー」から取得したリンクをメモ帳にDATABASE_IDとして保存します。

Notion APIとGithubの準備

💡

4.Create an integrationをクリックしてNotion APIを開いてStep 1:Create an Integrationの手順に沿って得られたInternal Integration Token全体をNOTION_API_SELECTとして保存します。
5.Notion APIのStep 2:Share a database with your Integrationの手順に沿って、Notion データーベースに戻り「・・・」から「＋コネクトの追加」から4.で作ったIntegrationを探し追加します。
6.自分のGitHubにLoginしておきます。現在開いているotoyo/astro-notion-blogレポジトリーを右上のFork（分流）ボタンで自分のレポジトリーに取り込みます。
7.Cloudflare PagesのLinkを開いてSignInし、日本語を選びます。

Cloudflare PagesでDeply

💡

8.Cloudflare Pagesでプロジェクトを作成します。Connect to Gitを選び6.でForkしたレポジトリーを選択しBegin Setupをクリックします。以降の手順に沿ってブログの表示まで進めます。