Astro の実践練習

はじめに

Astro を学んだ後、実際に手を動かしてみることは、知識を深め、スキルを実践する上で非常に有効です。このセクションでは、Astro を使用してブログサイトを作成するプロジェクトを例に、プロジェクトの構想からデプロイまでのステップを具体的に説明します。

プロジェクトのアイデア: Astro ブログサイト

このプロジェクトでは、Astro を使ってシンプルなブログサイトを構築します。主な機能としては、ブログ投稿のリスト表示、個別のブログ投稿ページ、そして静的サイト生成（SSG）による高速なページロードがあります。

ステップ 1: プロジェクトのセットアップ

  1. 新しい Astro プロジェクトを作成します。
    npm init astro

    ウィザードの指示に従い、プロジェクトの設定を行います。
  2. 必要な依存関係をインストールします。ブログ投稿に Markdown を使用する場合、@astrojs/markdownをインストールします。
    npm install @astrojs/markdown

ステップ 2: ブログ投稿の作成

  1. src/pages/blogディレクトリを作成し、Markdown ファイル（例：my-first-post.md）を作成します。
  2. Markdown ファイルにフロントマターを追加し、ブログ投稿のメタデータ（タイトル、日付など）を定義します。
    ---
title: 'My First Post'
date: '2024-01-01'
---

# My First Post

Welcome to my first blog post written in Astro!

ステップ 3: ブログ投稿のリスト表示

  1. src/pages/blog/index.astroファイルを作成し、@astrojs/markdownを使用してsrc/pages/blogディレクトリ内のすべての Markdown ファイルを読み込み、ブログ投稿のリストを表示します。
  2. 各ブログ投稿へのリンクを含むリストを表示します。
    ---
import { Markdown } from '@astrojs/markdown';
const posts = Markdown.findAll();
---

<ul>
  {posts.map(post => (
    <li>
      <a href\={post.url}>{post.frontmatter.title}</≠a>
      <p>{post.frontmatter.date}</p>
    </li>
  ))}
</ul>

ステップ 4: 個別のブログ投稿ページ

  1. src/pages/blog/[slug].astroファイルを作成し、URL のスラッグに基づいて個別のブログ投稿を表示します。
  2. ダイナミックルーティングを使用して、各 Markdown ファイルに対応するページを生成します。 
    ---
import { Markdown } from '@astrojs/markdown';
const post = Markdown.get(Astro.request.params.slug);
---
<article>
  <h1>{post.frontmatter.title}</h1>
  <p>{post.frontmatter.date}</p>
  <div innerHTML={{ __html: post.content }} />
</article>

ステップ 5: スタイルとレイアウトの追加

  1. サイト全体のレイアウトを定義するために、src/layoutsディレクトリを作成し、レイアウトコンポーネントを作成します。
  2. CSS、Tailwind CSS、または好みのスタイリング方法を使用して、サイトのスタイルをカスタマイズします。

ステップ 6: ビルドとデプロイ

  1. プロジェクトをビルドします。 
    npm run build
  2. Vercel、Netlify、Firebase Hosting、または AWS Amplify など、好みのホスティングサービスにデプロイします。