しみ肉 meets Astro: 私がAstroを採用した理由

公開日⏰ 2026/2/22・更新日🔄️: 2026/2/22

どうも、しみ肉です。今回はこのブログの技術的なことについて書いていきます。

私が求める機能

「憧れだった。自分のブログを自分で作ること。」
ってことで、自分のブログは自分で作りたいと思っていたので、まずは何を使うか決めることになりました。

条件は以下の通り:

ブログなので静的サイト
スタイルはSCSSで手書き
Markdownで記事を書く

ちょっとした自分用のアプリにはよくNext.jsを使っていましたが、Reactじゃなくていいし、ただのブログとしては重すぎます。
何かないかと探していたら「Astro」に出会いました。

Astroってなに

Astro
静的サイトジェネレーターで、コンテンツがメインのウェブサイトに最適なフレームワークです。

それでは私が惚れたポイントを紹介していきます。

Markdown

記事を書くならMarkdown。

AstroはビルトインでMarkdownをサポートしています。また先頭でFrontmatterというYAML形式のメタデータを記述できます。

Astro components

Astro components は良い！
コンポーネントとして再利用できる。Propsはきれい。スクリプトと混ざらない。JSXみたいに書ける。
コンポーネント再利用パラダイスできて、美しく書けるのでこりゃいいですな。

---
// スクリプト部

// Propsの定義 型安全!
interface Props {
  title: string;
  description?: string;
}

const { title, description = "デフォルトも設定できる" } = Astro.props;
---

{/* テンプレート部 JSXみたい */}
<div class="card">
  <h2>{title}</h2>
  <p>{description}</p>
</div>

<!-- 1ファイルでスタイルも -->
<style lang="scss">
  .card {
    border: 1px solid #ccc;
    h2 {
      color: #333;
    }
  }
</style>

Scoped Styles

スタイルが手書きしたいのです。そこに要素たちが存在するから。

Scoped Styles はいいですね。コンポーネント内だけに適用されて衝突しない。 SCSSも簡単に導入できるので素晴らしいですな。

<style>
  /* このh1は、このコンポーネント内のh1のみに適用される
  "data-astro-cid-abcd1234" のような属性が自動で付与されて識別される */
  h1 {
    color: red;
  }
</style>

Content Collections

ブログ記事は増える一方だ。どうやって管理するのか。

そこで登場するのが Content Collections
これはMarkdownなどのコンテンツを型安全に管理できる機能です。

Zodでスキーマを定義できて、MarkdownのFrontmatterでスキーマ通りに型チェックが行われます。
これで必須項目を忘れることはないのだ。

あとは記事を配置して、記事一覧や記事ページを実装するだけ。簡単だね。
(エディターで補完も効くので本当に簡単です。たったこれだけ)

---
import { getCollection, render } from "astro:content"
import PostLayout from "../../layouts/PostLayout.astro"

// ビルド時にページを生成
export async function getStaticPaths() {
  // Collectionから記事一覧を取得
  const posts = await getCollection("blog")
  // mapで記事idとパスを紐付けて、propsで記事を渡す
  return posts.map((post) => ({
    params: { id: post.id },
    props: { post },
  }))
}

const { post } = Astro.props
// 記事本文をレンダリングするためのコンポーネントを取得
const { Content } = await render(post)
---

<!-- メタデータを共通レイアウトに渡す -->
<PostLayout frontmatter={post.data}>
  <Content />
</PostLayout>

デプロイ

そして最後に、デプロイ先はCloudflare Workersです。
Cloudflareといえば無料いっぱいで感謝ですが、Workersはどうでしょうか。

Requests to static assets are free and unlimited.

There is no additional cost for storing Assets.

Billing and Limitations · Cloudflare Workers docs

静的アセットへのリクエストは無料で無制限です。

アセットの保存に追加料金はかかりません。

Google翻訳

ありがたや～。かんしゃあ！

Pagesじゃないのかというと、別にWorkersでも静的アセットを配信できるし、こっちに一本化したいような感じです。あと新しいダッシュボードからだとPagesは作れなかった… まあこれからはWorkersの方がいいかもね。

// wrangler.jsonc
{
  // Wranglerをインストールしていればスキーマが使えるよ
  "$schema": "./node_modules/wrangler/config-schema.json",
  "name": "<project_name>",
  "compatibility_date": "2026-02-22", // 今日の日付を指定する*
  "assets": {
    "directory": "./dist" // Astroでは"./dist"にビルドされる
  }
}

*今日の日付を指定する理由

GitHubにpushするだけで、ビルドから公開まで全部やってくれるわけですよ。ああはやい。

無料だし、静的リクエストは無制限だし、TLS証明書なんか取らなくていいし、Cloudflareって何者なんだ…

まとめ

まだ純粋な静的サイトなのでアイランドアーキテクチャなど使えていない目玉機能はありますが、将来の拡張にも耐えうる素晴らしいフレームワークだと思います。
Astroにはブログを作るすべてが詰まっているので、ぜひみなさんも使ってみてください。