30代エンジニアの備忘録のカバー画像

30代エンジニアの備忘録

組み込み開発・信号処理・プログラミングの技術メモと短編小説

astro-notion-blogの始め方:環境構築から初期デプロイまでの手順

シリーズ この記事は「Astro × Notion ブログ構築」の一部です。 シリーズ目次を見る

2026年5月時点、初めて astro-notion-blog を立てるとき、環境セットアップから初回デプロイまでの流れを順番に整理します。Notion データベースの列仕様もあわせて押さえられます。

環境構築から初回デプロイまで、何を順に進める?

まず Wiki と README を手元に置きます。

1. 日本語マニュアル(Wiki) を開き、リポジトリの README と併せて進める

2. Node.js と Git を用意し、fork / clone 後に npm install → 環境変数(Notion トークン等)を .env に設定する(Notion インテグレーション)

DB 仕様とカスタマイズの参照先を確認したうえで、最後にビルドと公開まで進めます。

記事 DB のプロパティは何に注意する?

デプロイ後は記事を載せる DB の列がサイトの表示を左右します。各プロパティ(Page, Published, Slug, Date, Tags, Excerpt 等)の意味を把握してください。列名はコードから参照されるため変更しないでください(並べ替えは可)。

列名 必須 説明
Page ○ ブログの記事
Date ○ 公開日時。公開日時を過ぎた後にデプロイする必要があります。
Slug ○ URL末尾のパス。この値は他の記事と重複してはいけません。
Published チェックすると公開可として扱われます。
Excerpt 一覧ページに表示される記事の概要
Tags 記事のカテゴリーを表すタグ
FeaturedImage 一覧ページに表示されるアイキャッチ画像。OG画像にも使われます。
Rank 整数を設定すると数字の大きいものから順におすすめ記事に表示されます。
💡
【システム制約】プロパティ名はプログラム内で参照されます。変更しないでください(順番の入れ替えは許容)。DB 接続は Notion API の権限設定も確認してください。

テーマや機能を足すとき、最初に見る資料は?

テーマや独自機能は GitHub Wiki と Astro ドキュメント を参照してください。導入記事は [astro-notion-blog-introduction](/posts/astro-notion-blog-introduction/) から読むと流れがつながります。

デプロイの仕上げ:npm run build / npm run preview で表示を確認し、GitHub Pages 等へ push して公開する(ホスティング手順は Wiki のデプロイ章)。