この記事の概要
Astroはコンテンツが豊富なウェブサイトを構築するために設計されています。
しかし、自分が今回使ったのは以下の構成です。
- indexページすらMarkdown（から出力されたHTML）
- 2, 3ページで足りそう
本来想定されている使い方とは違う気もしますが、それでも構築が簡単だったので備忘録も兼ねて記事にします。
プロジェクト構成
公式ドキュメントのProject Structureの内容を拝借します。
root/
├── public/
│ ├── robots.txt
│ ├── favicon.svg
│ └── social-image.png
├── src/
│ ├── components/
│ │ ├── Header.astro
│ │ └── Button.jsx
│ ├── layouts/
│ │ └── PostLayout.astro
│ ├── pages/
│ │ ├── posts/
│ │ │ ├── post1.md
│ │ │ ├── post2.md
│ │ │ └── post3.md
│ │ └── index.astro
│ └── styles/
│ └── global.css
├── astro.config.mjs
├── package.json
└── tsconfig.json
対して、今回の私の構成はこうです。
root/
├── public/
│ ├── assets/
│ │ └── 画像いくつか
│ ├── robots.txt
│ ├── favicon.svg
├── src/
│ ├── layouts/
│ │ └── Layout.astro
│ └── pages/
│ ├── index.md
│ └── another.md
├── astro.config.mjs
├── package.json
└── tsconfig.json
大きくは以下の違いがあります。
-
index.astroを用意してすらいない- 機能的なトップページは不要で、いきなり記事でOKだったため
-
components/やstyles/ディレクトリがない- 記事しかないので
layout/のstyleだけで事足りたため
- 記事しかないので
index.astroを作らなくても特に問題ない
pages/index.mdの中身はこのようになっています。
pages/index.md
---
layout: ../layouts/Layout.astro
title: # タイトル
description: # 説明
# 以下、本文
---
layouts/Layout.astroではこうです。
layouts/Layout.astro
---
const { frontmatter } = Astro.props;
---
<html lang="ja">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>Astro</title>
</head>
<body>
<header class="header">
<h1>{frontmatter.title}</h1>
<p class="header-description">{frontmatter.description}</p>
</header>
<div class="container">
<slot />
</div>
</body>
</html>
<style is:global>
/* 以下、スタイル */
</style>
スタイリングの都合上h1と説明だけは分けてレイアウトしたかったのでAstro.propsからfrontmatterを使っていますが、他は特に何もしていません。
しかし、これで問題なくページを表示できました。
Markdown間のリンクも通常のように[テキスト](./path)の書式で問題なく動きます。
最後に
Markdownから数ページのドキュメントを生成したいだけでNext.jsやらGatsbyやらを使う若干やりすぎな気がしていましたが、Astroならアリかも？と思っています。
Astroの仕組みはそれ単体でも使えますし、Astroの上にReactでもSvelteでもVueでも好きなものを乗せられるので、好みを反映させやすい気もします。
最後まで読んでくださってありがとうございます！
Twitterでも情報を発信しているので、良かったらフォローお願いします！
Devトークでのお話してくださる方も募集中です！