Astroで構築する爆速Webサイト！Notion連携ブログでコンテンツ管理を自動化する完全ガイド

本ページにはアフィリエイトリンクが含まれます。リンク経由の購入により当サイトが成果報酬を得る場合があります。価格・在庫等は掲載時点の情報であり、最新情報は各販売サイトでご確認ください。

はじめに

Webサイトのパフォーマンスは、ユーザー体験とSEOの両方において極めて重要な要素です。表示速度が遅いサイトは、訪問者を苛立たせるだけでなく、検索エンジンのランキングにも悪影響を及ぼします。この課題を解決する強力なソリューションとして、近年「Astro」が大きな注目を集めています。

Astroは、コンテンツ中心のWebサイト（ブログ、ポートフォリオ、マーケティングサイトなど）を構築するために設計された最新の静的サイトジェネレーター（SSG）です。最大の特徴は、デフォルトでJavaScriptを一切出力しない「アイランドアーキテクチャ」にあり、これにより驚異的な表示速度を実現します。

さらに、コンテンツ管理の手間を劇的に削減する方法として、NotionをヘッドレスCMSとして活用するアプローチが人気です。使い慣れたNotionのインターフェースで記事を執筆・管理し、それを自動的にWebサイトに反映させることができれば、コンテンツ制作のワークフローは飛躍的に効率化されるでしょう。

この記事では、以下の内容をハンズオン形式で徹底的に解説します。

パフォーマンス最適化とSEO対策のベストプラクティス

このガイドを最後まで読めば、あなたもAstroとNotionを組み合わせた、超高速かつ管理が容易なモダンなブログシステムを構築できるようになります。さあ、未来のWeb開発を体験しにいきましょう！

# "my-astro-blog"の部分は好きなプロジェクト名に変更してください
npm create astro@latest my-astro-blog

コマンドを実行すると、対話形式でいくつかの質問が表示されます。

How would you like to setup TypeScript? (Strict (recommended)) - 推奨のStrictでEnter

これで、my-astro-blogというディレクトリにAstroプロジェクトが作成されます。

1.3. 開発サーバーの起動

作成したプロジェクトのディレクトリに移動し、開発サーバーを起動してみましょう。

cd my-astro-blog
npm run dev

サーバーが起動すると、ターミナルにhttp://localhost:4321のようなURLが表示されます。このURLにブラウザでアクセスすると、Astroのウェルカムページが表示されるはずです。

2. NotionをヘッドレスCMSとして設定する

次に、ブログ記事を管理するためのNotionデータベースを準備します。

2.1. Notionデータベースの作成

Notionで新しいページを作成し、/databaseと入力して「Database - Full page」を選択します。

データベースに「Astro Blog Posts」のような名前を付けます。

以下のプロパティ（列）を作成・設定します。これらは後でAstroから記事データを取得する際に利用します。
- Page (Title型, デフォルト): 記事のタイトル
- Slug (Text型): 記事のURLになる部分（例: astro-notion-guide）
- Published (Checkbox型): チェックを入れた記事のみを公開対象とします
- Date (Date型): 記事の公開日
- Tags (Multi-select型): 記事のカテゴリやタグ

2.2. Notionインテグレーションの作成とAPIキーの取得

AstroからNotionデータベースにアクセスするために、Notionインテグレーションを作成し、APIキーを取得します。

[Notion Developers](https://www.notion.so/my-integrations)にアクセスします。

「+ New integration」をクリックします。

「My Integration」という名前のインテグレーションを作成し、「Submit」をクリックします。

「Secrets」タブに移動し、「Internal Integration Secret」をコピーします。これがAPIキーになります。このキーは絶対に外部に公開しないでください。

2.3. データベースとインテグレーションの連携

作成したインテグレーションに、先ほど作成したデータベースへのアクセス権を付与します。

Notionで作成した「Astro Blog Posts」データベースの右上にある「…」メニューをクリックします。

「+ Add connections」を選択し、先ほど作成したインテグレーション（My Integration）を検索して選択します。

2.4. 環境変数の設定

取得したAPIキーとデータベースIDを、Astroプロジェクトで安全に利用するために環境変数として設定します。

Astroプロジェクトのルートディレクトリに.envという名前のファイルを作成します。

.envファイルに以下の内容を記述します。

NOTION_API_KEY="<YOUR_NOTION_API_KEY>"
NOTION_DATABASE_ID="<YOUR_NOTION_DATABASE_ID>"

これで、NotionをヘッドレスCMSとして利用する準備が整いました。

3. AstroとNotionを連携させる

いよいよ、AstroからNotion APIを叩いて記事データを取得し、ページを生成します。

3.1. Notionクライアントのインストール

まずは、Notion APIを簡単に扱うための公式クライアントライブラリをインストールします。

npm install @notionhq/client

3.2. 記事一覧ページの作成

src/pages/blog/index.astroを作成し、Notionから全記事の情報を取得して一覧表示します。

---
import { Client } from '@notionhq/client';

const notion = new Client({ auth: import.meta.env.NOTION_API_KEY });
const databaseId = import.meta.env.NOTION_DATABASE_ID;

const response = await notion.databases.query({
  database_id: databaseId,
  filter: {
    property: 'Published',
    checkbox: {
      equals: true,
    },
  },
  sorts: [
    {
      property: 'Date',
      direction: 'descending',
    },
  ],
});

const posts = response.results;
---

<html lang="ja">
<head>
  <title>ブログ一覧</title>
</head>
<body>
  <h1>ブログ記事一覧</h1>
  <ul>
    {posts.map((post) => (
      <li>
        <a href={`/blog/${post.properties.Slug.rich_text[0].plain_text}/`}>
          {post.properties.Page.title[0].plain_text}
        </a>
        - <span>{post.properties.Date.date.start}</span>
      </li>
    ))}
  </ul>
</body>
</html>

3.3. 記事詳細ページの動的生成

次に、各記事の詳細ページを動的に生成します。Astroのダイナミックルーティング機能を利用します。

src/pages/blog/[slug].astroというファイルを作成します。[slug]の部分が動的なパラメータになります。

---
import { Client } from '@notionhq/client';
import { NotionToMarkdown } from 'notion-to-md';

export async function getStaticPaths() {
  const notion = new Client({ auth: import.meta.env.NOTION_API_KEY });
  const databaseId = import.meta.env.NOTION_DATABASE_ID;

  const response = await notion.databases.query({
    database_id: databaseId,
    filter: {
      property: 'Published',
      checkbox: {
        equals: true,
      },
    },
  });

  return response.results.map((page) => {
    return {
      params: { slug: page.properties.Slug.rich_text[0].plain_text },
      props: { page },
    };
  });
}

const { page } = Astro.props;
const notion = new Client({ auth: import.meta.env.NOTION_API_KEY });
const n2m = new NotionToMarkdown({ notionClient: notion });

const mdblocks = await n2m.pageToMarkdown(page.id);
const mdString = n2m.toMarkdownString(mdblocks);
---

<html lang="ja">
<head>
  <title>{page.properties.Page.title[0].plain_text}</title>
</head>
<body>
  <article>
    <h1>{page.properties.Page.title[0].plain_text}</h1>
    <div set:html={mdString.parent} />
  </article>
</body>
</html>

このコードでは、notion-to-mdというライブラリを使って、NotionのブロックコンテンツをMarkdownに変換し、HTMLとして表示しています。

npm install notion-to-md

これで、Notionデータベースに記事を追加し、Publishedにチェックを入れるだけで、自動的にブログ記事が一覧と詳細ページに反映されるようになりました。

4. デプロイと公開

作成したサイトを公開しましょう。Astroは様々なホスティングサービスに簡単にデプロイできます。ここでは、無料で利用できるCloudflare Pagesを例に説明します。

GitHubリポジトリの作成: プロジェクトをGitHubにプッシュします。

Cloudflare Pagesの設定:
- Cloudflareにログインし、「Workers & Pages」に移動します。
- 「Create application」→「Pages」→「Connect to Git」を選択します。
- 作成したGitHubリポジトリを選択し、「Begin setup」をクリックします。
- Build commandにnpm run build、Build output directoryにdistが設定されていることを確認します。
- 「Save and Deploy」をクリックします。