{
  "path": "/posts/blog-01",
  "site": "at://did:plc:rgdcflm4ylsl6udghmtblydc/site.standard.publication/blog",
  "tags": [
    "Document"
  ],
  "$type": "site.standard.document",
  "title": "ブログをNotion + Astro + Vercelで構築する",
  "updatedAt": "2026-02-22T10:06:56.830Z",
  "publishedAt": "2024-02-09T00:00:00.000Z",
  "textContent": "Blueskyを始めてから、Blueskyの使い方やカスタムフィードについてまとめる場所が欲しくなり、しずかなインターネットを初めました。\n\nシンプルな書き味、見た目が素晴らしく使っていたのですが、ソースコードを貼り付けるには向いておらず独自にブログを立ち上げることにしました。\n\nやりたいことは下記になります。\n\n- 超シンプルなブログ\n- タグつけしたい\n- 問い合わせフォーム欲しい\nという建前のもと、下記の非機能要件？を盛り込むようにしました。\n\n- 無料で運用したい\n- 仕事で使いそうなのでReactベースの何かにしたい\n- Cloudflare PagesかVercelを使いたい\n一度、microCMSとNext.jsで作ったものの、自身の力不足すぎて断念。\n\nできればシンプルにできる方法ないか・・・と考えていたところ、astro-notion-blogさんの存在を知りました。\n\n# フロントエンドはAstro\n\n私の力量不足で、どうしてもヘッドレス構成だとiframeの制限が厳しい。使っていたmicroCMSさんのテンプレもとても気に入っていたものの、私の実力ではSSGにできない。\n\nであれば最初からSSGであるAstro使えばいいのでは、ということでAstroとしました。\n\n# 動かす場所はVercel\n\nビルドが早い、制限少ないという噂のVercelに。\n\n# バックエンドはNotion\n\nスマホから修正しやすい。ただ、APIはmicroCMSの方がシンプルだったけど他人様のソースをお借りするのでノーカウント\n\n## 問い合わせフォームはCloudflare Pagesで独立\n\nMailChannelを使ってみたかった。というかmicroCMS使おうとした時の作りかけあったので使いたかった。\n\n## 構築の難易度\n\n構築自体は難しくありませんでした。Vercelに載せたので、AnalyticsとSpeed Insightを入れるのに苦労してしまったぐらいです。\n\n## Vercel Analytics\n\nAstro Notion BlogのAstroがやや古いので、Analyticsがそのままでは入りません。Mac環境ではAstroを4.4.2まで上げるとnpm run dev/buildがエラーを吐くのでAstroのバージョンはそのままにして、Analyticsのコンポーネントを下げました。\n\n```shell\nnpm i @astrojs/vercel@4.0.5\n```\n\nコンフィグに下記を足します。defineConfigにoutput、adapterを追加します。\n\n```typescript\nimport vercel from '@astrojs/vercel/static';\n\nexport default defineConfig({\n  site: getSite(),\n  base: BASE_PATH,\n  output: 'static',\n  adapter: vercel({\n    analytics: true,\n  }),\n  vite: {\n    server: {\n      watch: {\n        usePolling: true,\n      },\n    },\n  },\n  integrations: [\n    CoverImageDownloader(),\n    CustomIconDownloader(),\n    FeaturedImageDownloader(),\n    PublicNotionCopier(),\n  ],\n});\n```\n\n## Vercel Speed Insights\n\nこちらは依存は特にないので、コマンド叩けばOKです。\n\n```shell\nnpm i @vercel/speed-insights\n```\n\nLayoutにコンポーネントを追加します。コンポーネントはフッターの下のmainの最後に追加しましたが、どこでも大丈夫だと思います。\n\n```typescript\nimport SpeedInsights from '@vercel/speed-insights/astro'\n\n<SpeedInsights />\n```\n\n## 環境変数\n\n検索ボックスのモーダルのリンクは、環境変数を設定しないとVercelの素のドメインになります。環境変数に「CUSTOM_DOMAIN」を登録します。\n\n"
}