Trying Astro

2026-01-20 · Astro, SSG

Introduction

去年はReact界隈で色々ありすぎたし、Next.jsの黒魔術っぽいのに依存し続けるのも微妙かな、と思い、何か新しいのを試してみようと思う。

Motherfxxking Website を読んだこともあり、せっかくならよりStaticなサイトにしてみようと思う。 どうせインタラクティブな要素なんて必要ないし、確かに普通のHTMLとCSSがあれば十分かもしれない。

Hugoとかは聞いたことがあったけど、最近は Astro が勢いがある && 成熟してるのかな…? ということで少し試してみている。

What I learned so far

• Astroはデフォルトでは全部ビルド時に動的な要素を解決して、成果物にはクライアントサイドのJavaScriptが含まれない
  • 確かにビルドした結果の dist フォルダを見てみたけど、HTMLとCSSだけ
• Reactなんかをビルドして配信もできるけど、MarkdownとかからHTMLを生成することもできる
• .astro ファイルはFrontmatter部分とHTML部分からなる。前者はビルド時に動くJavaScriptなどがある

import { defineCollection, z } from "astro:content";

const blog = defineCollection({
  type: "content",
  schema: z.object({
    title: z.string(),
    pubDate: z.date(),
    description: z.string(),
    author: z.string().default("choge"),
    tags: z.array(z.string()).optional(),
  }),
});

export const collections = { blog };

こんな感じでMarkdownのFrontmatterに含めるべき要素を定義できる。 あと、↑がちゃんとレンダリングされているように、コードブロックもデフォルトでサポートされている。 最近はShikiというのがあって、これが静的にレンダリングしてくれるらしい。

なんか簡単すぎるくらい充実しているな…