Astroにブログ機能を追加した話

当サイトはAstroで組んでいるのですが、ニュース欄はすでにあってもブログ機能はなかったので、新しく追加した時の記録です。

コレクションを増やすところから

Astroには「Content Collections」という仕組みがあって、記事の型をconfig.tsに定義しておけます。すでにニュース欄で使っていたので、同じ要領でブログ用のコレクションを追加しました。

タイトル・日付・説明文・画像・タグ・下書きフラグ、くらいの最低限の項目を用意しておけば、あとから記事を書くたびにこの型に沿ってMarkdownを追加するだけで済む想定です。

記事一覧ページと個別ページ

ブログ機能に必要なページは主に2つ。記事の一覧ページ(/blog/)と、個別記事ページ(/blog/記事のスラッグ/)です。

一覧ページでは、公開済みの記事を日付の新しい順に並べて、アイキャッチ画像・タイトル・説明文・日付を表示するカードレイアウトにしました。AstroのgetCollection()で全記事を取得して、draft: trueのものは本番では除外する仕組みです。

個別記事ページはAstroの動的ルーティング([slug].astro)を使っています。URLのスラッグからMarkdownファイルを特定して、本文をHTMLにレンダリングして表示します。

タグによる絞り込み

記事が増えてくると、カテゴリやタグでの絞り込みが必要になります。このブログでは、記事のfrontmatter(Markdownファイルの先頭にある設定部分)にタグを配列で持たせて、一覧ページでクライアントサイドのフィルタリングを実装しました。

タグをさらに上位の「カテゴリ」にまとめる仕組みも入れていて、例えば「Astro」「CMS」「コスト」といった個別タグは「サイト運用」カテゴリに属する、という対応表を用意しています。ボタンでカテゴリ絞り込み、記事内の#タグリンクで個別タグ絞り込み、と2段階で使い分けられるようにしました。

つまずいたポイント: reCAPTCHAのバッジ

ブログとは直接関係ないけど、同じ時期にお問い合わせフォームにreCAPTCHA v3を入れた。ここで少しハマったのが、Astroはコンポーネントごとにスタイルがスコープされる仕組みになっていて、reCAPTCHAのバッジ要素はJS側で外部に注入されるため、そのままだとCSSが当たらないということが判明しました。

<style is:global>を使ってグローバルスコープでスタイルを書くことで解決しました。Astroでサードパーティのウィジェットを扱うときは、注入される要素がコンポーネントの外に出るケースがあることを覚えておくとよさそうです。

公開範囲の考え方

ブログは思い切ってトップナビには載せず、フッターだけからたどれるようにしました。検索エンジンにはインデックスさせる(noindexは付けない、サイトマップにも含める)方針にしたので、検索経由で見つけてもらいつつ、サイトの顔であるトップページ側の見え方はシンプルなまま保つようにしました。

コーポレートサイトにブログを併設する場合、「導線は用意するけど目立たせすぎない」くらいの温度感が、今のところちょうどいいと思っています。ブログの内容は実務の記録や技術的な知見が中心なので、サイトの信頼性を補強する役割は果たしつつ、メインの事業紹介とは棲み分けができています。

Astroはブログ機能をゼロから組み立てる必要がある分、WordPressのように「最初から全部入り」ではないけれど、必要なものだけを自分の設計で積み上げていける自由度があります。