NotionをCMSとして活用し、Astroでブログサイトを簡単に作成することができるastro-notion-blogを使用し、自サイトのblogページを作成してみます
astro-notion-blogはesay-notion-blogの作者のotoyo0122さんが
ブログは速さこそ正義である。
astro-notion-blogはそんなストイックで玄人志向な人のために作った新しいNotionブログです。
という考えで2023年1月23日にリリースされたライブラリです。
作者が日本人ということもあり、日本語のREADMEがあることも魅力の1つです
esay-notion-blogはNext.jsで作られていて、Astro-notion-blogは名前の通りAstroで作成されています。以下の記事では、astro-notion-blogの開発背景とeasy-notion-blogとの違いが紹介されているので興味が出た方は一読されることをお勧めします。
astro-notion-blogのREADMEではホスティング先としてCloudflare Pagesが紹介されていますが、今回はVercelにデプロイしたかったので、以下のブログを参考に作成しました
内容も以下のブログと被っている箇所が大半です
それでは、作っていきます。
適当な名前をつけます
![Image in a image block](/notion/d6908167-e469-4936-881b-4599a0c47783/Untitled.png)
Deployを押すとBuildが始まります
![Image in a image block](/notion/d62ae7de-230e-47b1-a359-f6341336551b/Untitled.png)
Project Settingsに移動し、左カラムからEnvironment Variablesに移動
![Image in a image block](/notion/44e02fe7-1e0f-48c6-ab71-7c60cf304ca7/Untitled.png)
ここから環境変数を設定できます
![Image in a image block](/notion/056168c6-d991-4b10-aaee-bf880e72f4dd/Untitled.png)
DATABASE_IDとNOTION_API_SECRETを設定後
Deployを実行、デプロイが終わった
![Image in a image block](/notion/91203619-61c6-4b62-9fd4-c9945159273d/Untitled.png)
Visitでサイトを確認すると、もう雛形が出来た
簡単すぎるぞ…astro-notion-blog
![Image in a image block](/notion/7cfe856f-6db7-4327-bd05-46547d5350a7/Untitled.png)
独自ドメインを使用する
![Image in a image block](/notion/b39a1014-f825-442d-8e4e-c09530a627a7/Untitled.png)
デプロイフックで公開する
Settings → Git → DeployHooks
![Image in a image block](/notion/db9d8caa-301d-4b7a-87f8-9400e23db54a/Untitled.png)
フック名とブランチ名を指定して Create Hook
します
![Image in a image block](/notion/6bcd9035-3cee-421e-a3a1-5a8837b4848d/Untitled.png)
フックURLが作られるのでこれをCopy
![Image in a image block](/notion/cc47fe33-9112-43a3-8e2b-ac2d3698c78a/Untitled.png)