![画像が読み込まれない場合はページを更新してみてください。](https://prod-files-secure.s3.us-west-2.amazonaws.com/a0f002b4-eec2-4df2-8737-c6ae60d92dd2/572b7863-0ddd-4065-b7b1-a4142783733d/155871688-aeb3a7ea-28cb-4b84-bcde-eafc7a2a859a.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240726%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240726T170652Z&X-Amz-Expires=3600&X-Amz-Signature=3c8f5c0bdd83b0f4512638e5de9599ce18cfdbc640647dbbd0aa433e49d2f8cf&X-Amz-SignedHeaders=host&x-id=GetObject)
誰でも無料で個人ブログを始められるeasy-notion-blogの始め方について紹介します。
easy-notion-blogはNotion上で書いた文章がそのままブログとして公開することができるので、とても楽に文章を書くことができて、管理もしやすいところが特徴です。
easy-notion-blogとは
おとよさん(@otoyo0122)という方が開発したヘッドレスCMSであるNotion Blogです。
Notion上で記事の作成・管理できることが一番の特徴で、無料で簡単に始めることができます。
詳しくはおとよさんが書いた以下の記事を参考にしてください。
easy-notion-blogの始め方
easy-notion-blogの導入方法は日本語のREADMEに丁寧に書いてくれているので、そちらを参考にすれば問題なく始められます。
また、READMEでも少しわからないという方には、おとよさんが解説記事も用意してくれています。
それでも難しいという方はhoromiさん(@mineral_30)の記事がとてもわかりやすいです。
horomiさんはeasy-notion-blogを鬼のように改造していますが、解説記事は初心者にかなり優しく解説してくれています。
私はこちらの記事のおかげでeasy-notion-blogを始めることができました。
Windowsの場合
Gitをインストールする
macの場合は最初からGitが入っていますが、Windowsの場合はGitをインストールしないといけません。
WindowsにGitを入れる場合は以下の記事が参考になります。
Windowsの方は以下の記事でGitを入れた後はGit Bashとアプリでコマンドを打っていくことになります。
Git Bashは以下の記事を参考にすると導入することができるので安心してください。
Node.jsをインストールする
こちらはmacと同じかもしれませんが、公式サイトからポチポチクリックしていけば問題なくインストールできます。
Node.jsをインストールすると、npmもインストールできます。
こちらは以下の記事が参考になります。
yarnをインストールする
yarnはeasy-notion-blogをデフォルトの機能でそのまま使う場合は必要ありませんが、ブログを使っていくうちにカスタマイズしたくなると思うので、入れておいた方が良いです。
こちらもmacと同じかもしれませんし、方法はひとつではありませんが、Node.jsと同じようにポチポチクリックしていく方法が簡単です。
公式サイトからポチポチクリックしていけば問題なくインストールできます。
自分が詰まった所
「こんなところで詰まるの?」ということもあるかもしれませんが、参考までに書いておきます。
git clone
したeasy-notion-blogのリポジトリをGitHubにgit push
する時にエラー
GitHubでリモートリポジトリを作ったときに書いてくれている以下のコマンドをそのまま実行してpushしようとしたらエラーが出ました。
![画像が読み込まれない場合はページを更新してみてください。](https://prod-files-secure.s3.us-west-2.amazonaws.com/a0f002b4-eec2-4df2-8737-c6ae60d92dd2/eaccab8d-723b-4c85-be69-29793b536d05/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240726%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240726T170652Z&X-Amz-Expires=3600&X-Amz-Signature=67f346e3451df6a8eb9d6c2d926f60d32b4e096749d53be662bfdba1f7960928&X-Amz-SignedHeaders=host&x-id=GetObject)
すでにorigin
が存在しているよというエラーです。
これは、最初にgit clone
で登録したリポジトリがorigin
として登録されているためで、オリジナルのeasy-notion-blogのリポジトリがorigin
として登録されていたからだと思われます。
当時は確認しませんでしたが、git remote -v
でorigin
に何が登録されているかを確認することができます。
$ git remote add origin https://github.com/chabesu/easy-notion-blog.git
error: remote origin already exists.
この場合、一度origin
を削除して、再度上記のコマンドを実行すればエラー無く解決しました。
以下、参考記事です。
Vercelに環境変数を登録する
最初、少し迷ったので一応書いておきます。
Vercelの環境変数には以下の2セットを入れます。
NAME:NOTION_API_SECRET と VALUE:自分のNotionのインテグレーショントークン
NAME:DATABASE_ID と Value:NotionのデータベースID
![画像が読み込まれない場合はページを更新してみてください。](https://prod-files-secure.s3.us-west-2.amazonaws.com/a0f002b4-eec2-4df2-8737-c6ae60d92dd2/122b9e89-6e75-4908-96bc-9a4876169d9a/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240726%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240726T170652Z&X-Amz-Expires=3600&X-Amz-Signature=4a367af1de03d207aeb2d00029b6176de547d3cbe82fc943e5b402fb9f6e66a3&X-Amz-SignedHeaders=host&x-id=GetObject)
終わりに
自分は半年くらい前にNotion Blogの存在を知りましたが、Next.jsとかVercelとかよくわからないと思って、Notion Blogを作ることを挫折しました。
しかし、おとよさんやhoromiさんの解説記事に出会って、あまりにも親切な内容だったので、自分でもできるかもと思い、やってみたらできました。
今でも、Next.js、Node.js、TypeScript、Vercelとかよくわかっていませんが、これから勉強してブログを改造していこうと思います!