Astroでブログを作る（１）

2024-04-01

URLの設計

Astroがそもそもブログのためのシステムではないので、WordPressのデフォルトのようなURL構造を持っていない。

pagesの中にディレクトリとファイルを置けば、そのままWebサイトの構造となる。

Astroをブログとして利用するにあたって、以下のことができるようにする。

URL	機能
/	トップページ。ブログの記事一覧の1ページ目
/[ページ数]	記事一覧のNページ目
/tags/	タグ一覧のページ
/tags/[タグ名]/[ページ数]	タグ別記事一覧のNページ目
/about	よくある固定ページ

ファイル構成

./
├── public
│   ├── img
│   └── robots.txt
├── src
│   ├── components
│   │   └── Summary.astro
│   ├── content
│   │   └── posts
│   │       └── *.md
│   ├── layouts
│   │   └── Layout.astro
│   └── pages
│       ├── [...page].astro
│       ├── about.astro
│       ├── archives
│       │   └── [slug].astro
│       └── tags
│           ├── index.astro
│           └── [tag]
│               └── [page].astro
├── README.md
├── astro.config.mjs
├── package.json
└── package-lock.json

静的ルーティング

「pages/about.astro」というファイルを作れば https://example.com/about のページができる。

「pages/tags/index.astro」というファイルを作れば https://example.com/tags/ のページができる。

pages/ 以下の、大括弧（[]）がない普通のファイル名のファイルは静的ルーティングに対応する。

動的ルーティング

「https://example.com/archives/ページ名」に対応するのが、「pages/archives/[slug].astro」のファイル。

phpなどの感覚で、つい、URLに対応するphpファイルがあると考えてしまうと理解しづらくなると思う。

静的ファイル生成（SSG）なので、「pages/archives/[slug].astro」のgetStaticPaths() が返した分のページが生成されるという理解をするとよい。

動的ルーティング 2階層

複数階層の動的ルーティングも可能。

「https://example.com/tags/タグ名/ページ名」に対応するのが、「pages/tags/[tag]/[page].astro」のファイル。

これも、「pages/tags/[tags]/[page].astro」のgetStaticPaths() が返した分のページが生成されるという理解をするとよい。