シリーズ目次 次章: 02. AstroPaperのインストールと開発サーバーの起動
Table of contents
Open Table of contents
この章のねらい
まずAstroPaperの立ち位置を押さえます。Astroとは何が違うのか。WordPressのようなブログサービスとは何が違うのか。ここがはっきりしていないと、以降の章で出てくる設定やファイルの意味が入ってきません。
AstroPaperはAstroの「テーマ」
AstroPaperは、AstroというWebフレームワークの上に作られたブログ用テーマです。
用語を整理しておきます。
- Astro：WebサイトをHTMLとして組み立てるためのフレームワーク（枠組み）です。ページの作り方、Markdownの読み込み方、ビルドの仕組みなどを提供します。
- テーマ：そのフレームワークを使って、ブログに要る画面（記事一覧、記事詳細、タグ一覧、検索など）をあらかじめ作り込んだひな形一式です。
料理にたとえると、Astroがキッチンと調理器具、AstroPaperがレシピと下ごしらえ済みの材料です。Astroだけ渡されたら記事一覧ページから自分で書くことになりますが、AstroPaperなら記事のMarkdownを置くだけで動きます。
AstroPaperはコピーして自分のものにするテンプレートです。インストールして使うライブラリではありません。プロジェクトを作ると、テーマのソースがそのまま自分のリポジトリに入ります。だから気に入らない部分は直接書き換えられます。
日常的に触るのは一番上の層、つまり設定と記事と配色です。その下にAstroPaperが用意した画面と部品があり、さらに下にAstro本体があります。上の層だけで運用し続けても構いませんし、必要になったら下へ降りればいい。
AstroPaperが掲げている4つの価値
AstroPaperのREADMEは、このテーマを次の4語で説明しています。
| 価値 | 意味 | 具体的な実現方法 |
|---|---|---|
| Minimal（最小限） | 装飾を削ぎ落とし、文章を読ませることに集中する | 余白中心のレイアウト、控えめな色数、1本のアクセント色 |
| Responsive（レスポンシブ） | スマートフォンからデスクトップまで崩れない | Tailwind CSSによる可変レイアウト |
| Accessible（アクセシブル） | キーボードや読み上げソフトでも使える | フォーカス表示、aria-label、スキップリンク |
| SEO-friendly | 検索エンジンに正しく理解される | メタ情報、OGP、サイトマップ、RSSの自動生成 |
アクセシブルというのは、マウスを使わない人や、画面を読み上げるソフトを使う人でも、同じように情報にたどり着けるという意味です。AstroPaperなら、キーボードの Tab キーでリンクを移動したときに、いまどこを選んでいるかが破線の枠ではっきり出ます。
4つの価値はばらばらに見えますが、出発点はどれも同じで、読み手が困らないことです。
何ができるテーマなのか
テンプレートを取得した時点で、次の機能が動く状態になっています。
- 記事一覧（ページ送り付き）と記事詳細
- タグ一覧、タグ別記事一覧
- 年月ごとに記事をまとめるアーカイブページ
- サイト内検索（Pagefind）
- ライトモード／ダークモードの切り替え
- 下書きと予約公開
- RSSフィード、サイトマップ、
robots.txt - 記事ごとのOGP画像の自動生成
- 折りたたみ可能な目次
- Markdownに加えてMDXにも対応
- UI文言の多言語化の下地
ブログに要るものはひととおりそろっています。
技術スタック
AstroPaperがどんな道具でできているかを一覧にします。ここで名前だけ拾っておくと、後の章がラクになります。
| 役割 | 使っているもの | このシリーズで扱う章 |
|---|---|---|
| フレームワーク | Astro | 全体 |
| 型チェック | TypeScript | 第4章 |
| スタイリング | Tailwind CSS | 第8章 |
| サイト内検索 | Pagefind | 第9章 |
| OG画像生成 | Satori ＋ Sharp | 第10章 |
| アイコン | Tabler Icons | 第3章 |
| 整形・静的解析 | Prettier ／ ESLint | 第2章 |
Pagefind は、ビルド時に記事の文章から検索用の索引ファイルを作っておき、ブラウザ側でその索引を読んで検索する仕組みです。検索用のサーバーが不要なので、静的サイトのまま全文検索が実現できます。
Satori は、HTMLに似た記述から画像（SVG）を生成するライブラリです。AstroPaperはこれを使って、記事タイトル入りのOGP画像をビルド時に自動生成します。
道具の数は多く見えますが、土台と見た目と機能と開発支援の4つに分ければ済みます。
他の選択肢との違い
WordPressなどのブログサービスとの違い
WordPressのようなCMS（記事を管理・配信するシステム）は、アクセスがあるたびにサーバー上でページを組み立てます。一方AstroPaperは、あらかじめHTMLファイルを作り切って置いておく方式です。
| 観点 | AstroPaper | 一般的なCMS |
|---|---|---|
| 記事の書き方 | Markdownファイルを追加してビルド | 管理画面から投稿 |
| サーバー | 静的ファイルの配信だけ | アプリケーションサーバーとDBが必要 |
| 表示速度 | 非常に速い | 設定次第 |
| 運用の手間 | ビルドとデプロイの手順が必要 | 管理画面で完結 |
| 費用 | 無料枠のホスティングで運用しやすい | サーバー費用がかかりやすい |
管理画面から手軽に投稿したいならCMSです。Gitで記事を管理したい、表示速度と運用コストを取りたい、という人はAstroPaper。
違いの根っこは、ページをいつ組み立てるかの1点です。必要なサーバーも費用も、そこから枝分かれします。
他のAstroテーマとの違い
Astroのブログテーマはたくさんあります。その中でAstroPaperは、機能を盛らずに必要なものを丁寧に作ってあるタイプです。派手なアニメーションも大量のコンポーネントもありません。代わりにアクセシビリティとSEOの細部が整えてあり、コードを読み切れる規模に収まっています。
シンプルに始めて自分で育てていきたい人向けです。
ライセンスについて
AstroPaperはMITライセンスで公開されています。MITライセンスは、著作権表示とライセンス文を残せば、商用利用も改変も再配布も自由にできます。個人ブログはもちろん、業務で使うサイトにも利用できます。
ただし、リポジトリの LICENSE ファイルは消さずに残してください。
要点
- AstroPaperはAstro上に作られたブログテーマで、インストールするライブラリではなく、コピーして自分で育てるテンプレートである。
- 最小限、レスポンシブ、アクセシブル、SEOフレンドリーの4つを軸に設計されていて、装飾より読みやすさを取っている。
- 記事一覧、タグ、アーカイブ、検索、RSS、OG画像生成など、ブログに必要な機能は最初からそろっている。
- Astro＋TypeScript＋Tailwind CSSを土台に、検索はPagefind、OG画像はSatoriが担当している。
- MITライセンスのため、改変も商用利用も自由に行える。
参考資料
- AstroPaper リポジトリ README — テーマの特徴、技術スタック、ライセンス
- Astro 公式ドキュメント — Astro本体の設計思想
- Pagefind 公式サイト — 静的サイト向け全文検索
- Satori リポジトリ — HTMLライクな記述からのSVG生成
- Tailwind CSS 公式サイト — ユーティリティファーストのCSSフレームワーク