usounds

Blueskyを始めてから、Blueskyの使い方やカスタムフィードについてまとめる場所が欲しくなり、しずかなインターネットを初めました。

シンプルな書き味、見た目が素晴らしく使っていたのですが、ソースコードを貼り付けるには向いておらず独自にブログを立ち上げることにしました。

やりたいことは下記になります。

• 超シンプルなブログ
• タグつけしたい
• 問い合わせフォーム欲しい

という建前のもと、下記の非機能要件？を盛り込むようにしました。

• 無料で運用したい
• 仕事で使いそうなのでReactベースの何かにしたい
• Cloudflare PagesかVercelを使いたい

一度、microCMSとNext.jsで作ったものの、自身の力不足すぎて断念。

できればシンプルにできる方法ないか・・・と考えていたところ、astro-notion-blogさんの存在を知りました。

GitHub - otoyo/astro-notion-blog: 🚀 Begin building your very own Notion Blog with Astro.

🚀 Begin building your very own Notion Blog with Astro. - otoyo/astro-notion-blog

https://github.com

私の力量不足で、どうしてもヘッドレス構成だとiframeの制限が厳しい。使っていたmicroCMSさんのテンプレもとても気に入っていたものの、私の実力ではSSGにできない。

であれば最初からSSGであるAstro使えばいいのでは、ということでAstroとしました。

ビルドが早い、制限少ないという噂のVercelに。

スマホから修正しやすい。ただ、APIはmicroCMSの方がシンプルだったけど他人様のソースをお借りするのでノーカウント

MailChannelを使ってみたかった。というかmicroCMS使おうとした時の作りかけあったので使いたかった。

構築自体は難しくありませんでした。Vercelに載せたので、AnalyticsとSpeed Insightを入れるのに苦労してしまったぐらいです。

Astro Notion BlogのAstroがやや古いので、Analyticsがそのままでは入りません。Mac環境ではAstroを4.4.2まで上げるとnpm run dev/buildがエラーを吐くのでAstroのバージョンはそのままにして、Analyticsのコンポーネントを下げました。

npm i @astrojs/vercel@4.0.5

コンフィグに下記を足します。defineConfigにoutput、adapterを追加します。

import vercel from '@astrojs/vercel/static';

export default defineConfig({
  site: getSite(),
  base: BASE_PATH,
  output: 'static',
  adapter: vercel({
    analytics: true,
  }),
  vite: {
    server: {
      watch: {
        usePolling: true,
      },
    },
  },
  integrations: [
    CoverImageDownloader(),
    CustomIconDownloader(),
    FeaturedImageDownloader(),
    PublicNotionCopier(),
  ],
});

こちらは依存は特にないので、コマンド叩けばOKです。

npm i @vercel/speed-insights

Layoutにコンポーネントを追加します。コンポーネントはフッターの下のmainの最後に追加しましたが、どこでも大丈夫だと思います。

import SpeedInsights from '@vercel/speed-insights/astro'

<SpeedInsights />

検索ボックスのモーダルのリンクは、環境変数を設定しないとVercelの素のドメインになります。環境変数に「CUSTOM_DOMAIN」を登録します。