Astro v2とTinaCMSでシンプルに作るブログサイトサクサク構築しながらAstroの基本機能を習得

Astroとは

Astro が注目されるようになってきました。多くの特徴を持っているため、詳細は公式サイトに任せますが、特に注目されているのは以下の点でしょう。

• JavaScript/TypeScript ベースでありながら、ゼロ JavaScript を目指したサイトを構築
• コンポーネント・アイランドにより、React、Preact、Svelte、Vue、Solid といったさまざまな UI フレームワークを共存できる
• MPA（Multi Page Application）なサイトを構築するためのシステム
• HTML と CSS を主体とした Astro コンポーネントで、シンプルにサイトを構築できる
• ドキュメントコンテンツを主体としたサイトに特化した機能

JavaScript が TTI（Time to Interactive / 操作可能になるまでの時間）の悪化の原因として問題になってきたところでしたので、Astro の特徴は見事にハマりました。 また、多くのフレームワークが複雑化する流れの中で、シンプルに始められる Astro の存在は大きくなっています。好みの UI フレームワークを持ち込めるというのも魅力です。

ただし、メリットばかりではありません。SPA（Single Page Application）に慣れたユーザーにとっては、MPA の構成上、物足りなく感じる部分もあります。ですから、Astro の機能を把握し、実現できるサイトを理解しておくのは重要です。

本書について

本書では、Astro の基本的な機能をおさえ、シンプルにブログを構築します。サクサクとサイトを形にしながら、Astro の強力な基本機能を習得していただけます。

※制作に必要な各種アセット、記事データ、完成プロジェクトデータはダウンロードデータに収録しています。

※Astro v2 では Node 16.12.0 以降が必要です。

※本書は、Next.js などのフレームワークを触ったことのある方を対象としています。

Content Collectionsの機能を活用して構築

ライバルのドキュメントコンテンツ用のフレームワークとの激戦に応じるように、Astro v2 では、Content Collections という、コンテンツ管理のためのシステムが導入されました。Content Collections はマークダウン/MDX ファイルで用意されたコンテンツを扱うためのシステムで、今回はこの機能を使って構築していきます。

※現状のライバルとしては、Docusaurusや Next.js をベースとしたNextraでしょう。どちらも React ベースで SPA なサイトを構築します。

Git-based CMSのTinaCMSでコンテンツ管理を効率化

コンテンツはマークダウン/MDX ファイルとして、プロジェクトのリポジトリ上で管理することになります。ただし、コンテンツの追加更新のためにリポジトリを意識しなければならないのは、ちょっと厳しいものがあります。

そのため、サイトを一通り完成させたあと、こうした構成と相性の良い Git-based CMS に分類される Headless CMS の中から「TinaCMS」を採用し、デプロイしたブログでコンテンツを管理できる構成にします。

ロジックに集中した制作作業を実現するスタイリング

最後にスタイリングに関してです。本書では制作用のスタイル（CSS）を用意しました。そのため、制作作業中は CSS を気にすることなく、ロジックを組み立て、マークアップするだけでページができあがっていきます。

制作用のスタイルはカスケードレイヤー@layer を使用し、はがしやすい構成にしていますので、Tailwind CSS など、好みの CSS フレームワークに簡単に置き換えることができます。さらに、レイアウト用の CSS など、必要な部分だけ残して組み合わせるのも簡単な構成になっています。詳しくは巻末の Appendix にまとめていますので、参考にしてください。

制作するサイト

制作ステップ

Chapter 1 Astroの基本

Astro のプロジェクトを作成し、基本的な Astro コンポーネントを用意してトップページを形にします。

Chapter 2 記事の追加と一覧の作成

Content Collections の機能を利用し、マークダウンで用意した記事をリストアップしてインデックスページを作成します。記事が多い場合は分割し、ページネーションを入れます。

Chapter 3 画像の最適化

@astrojs/image を使って画像の最適化を行います。

Chapter 4 記事ページの作成

各記事のページを作成します。記事本文のスタイリングには GitHub のスタイルを再現する github-markdown-css を使い、本文中の画像も最適化します。さらに、Zenn の zenn-content-css でスタイリングする方法も紹介します（Tailwind CSS を使う方法は Appendix で紹介します）。

Chapter 5 サイトの仕上げ

404 ページ、プリフェッチ、サイトマップ、RSS を設定し、Vercel にデプロイして公開します。

Chapter 6 TinaCMS

Git-based CMS の TinaCMS を導入し、コンテンツを管理しやすくします。

Appendix

制作用のスタイル（CSS）の構成と、Tailwind CSS でカスタマイズする方法を紹介します。

もくじ