NotionをCMSとしてブログを作成する

こんにちはkamicoと申します。

今回Astro-Notion-Blogを使ってブログを作り直したので、備忘として記載します。

WordPress / NextJS / GatsbyJSを使用して、ブログサイトを作っては消してきました。

消してしまう理由については下記です。

記事更新が停滞する
- WordPressの管理画面を開くのが億劫。
- GatsbyやNextJSはCMSを使用していなかったので、Markdownを編集するのが億劫。
自身が実現したい機能の導入に時間がかかってしまう。
- WordPressはプラグインで導入が楽だが、GatsbyやNextJSでは実装を考える手間がある。
- いつもはバックエンドしか触っていないため、フロントの技術を学びたい欲はあるのですが、あまりにも習熟に時間がかかる。

そこで、otoyo氏が作成しているastro-notion-blogにブログを移転し、一から作成し直すことにしました。

astro-notion-blogを使用する利点は下記です。

日常的に使用しているNotionをCMSとして使用することで、ブログの停滞を防止することができる。
- Notionですら、めんどくさくなって投げ出す可能性は…あります。
あらかじめ基本的な機能が揃っているため、ブログとしての体裁をある程度担保できる
- 例えば、カテゴリ機能、ページネーション、GoogleAnaliticsの導入など…

その他、NotionをCMSとして使用する場合の競合です。
ここではOSSとして無料で使用できること。公式APIを使用しているもののみまとめています。

astro-notion-blogを作っているotoyo氏が作成している、NextJSで動くnotion-blog

正直、NextJSの勉強をしたい部分があったので、こちらでも良かったのだが、現在は開発中止と聞き断念。新しいフレームワークも使ってみたかったのでまあいいかと思っている。

上記同様、NextJSで動くnotion-blog。

開発が昨年で止まっているのと、カテゴリ機能を作るのが面倒くさそうなので断念。

Readmeを見ればわかると思います。（日本語で作ってくれています。）

ローカルでの実行を行う場合は、プロジェクトのディレクトリ直下に.envファイルを作成し、
自身のNOTION_API_SECRETとDATABASE_IDの情報を埋め込みます。

NOTION_API_SECRET=secret_hogehoge
DATABASE_ID=XXXXXXXXXXXXXXXXXXX

上記ファイルを作成した状態で、下記コマンドをterminalから実行すればOK。

npm install
npm run dev

ここにあげておきます。

諸々レイアウト調整などを実施し、AWS AmplifyでHostingしようと思っています。

レイアウトの修正

~~左に張り付いているカラムを真ん中に寄せる~~

~~converImageの削除~~

左カラムを追従するように変更する

文字間のスペースをもう少し開ける

ダークモードの対応

GoogleAnaliticsの導入