注意：この記事はAIが作成しています
参照元の存在、参考元のリンクの信頼度、事実の歪曲がないかをAIによりセルフチェックしています

Astroを使ってマークダウンファイルをアップロードするだけで公開できるWebサイトを構築

はじめに

静的サイトジェネレーター（SSG）の選択肢が増える中、Astroは特にコンテンツ重視のWebサイト構築において注目を集めています。本記事では、Astroを使用してマークダウンファイルを配置するだけで即座に公開可能なWebサイトを構築する方法と、Remarkプラグインを活用した機能拡張について解説します。

Astroとは

Astroは、2021年にリリースされた比較的新しい静的サイトジェネレーターです。「Islands Architecture（アイランドアーキテクチャ）」という設計思想を採用し、必要な部分にのみJavaScriptを使用することで、高速なWebサイトを実現します。

Astroの主な特徴

ゼロJavaScript by デフォルト: 静的なHTMLを生成し、必要最小限のJavaScriptのみを送信
マルチフレームワーク対応: React、Vue、Svelte、SolidJSなど複数のフレームワークを同時に使用可能
優れたDX（開発者体験）: TypeScript、Sass、Tailwind CSSなどをネイティブサポート
コンテンツファースト: マークダウンやMDXを第一級市民として扱う

プロジェクトのセットアップ

1. Astroプロジェクトの初期化

# npmを使用する場合
npm create astro@latest my-markdown-site

# yarnを使用する場合
yarn create astro my-markdown-site

# pnpmを使用する場合
pnpm create astro@latest my-markdown-site

セットアップウィザードでは以下を選択します：

テンプレート: "Empty" または "Blog"
TypeScript: "Strict"（推奨）
依存関係のインストール: Yes

2. ディレクトリ構造

my-markdown-site/
├── src/
│   ├── content/
│   │   └── blog/        # マークダウンファイルを配置
│   ├── layouts/
│   │   └── BlogPost.astro
│   └── pages/
│       ├── index.astro
│       └── blog/
│           └── [...slug].astro
├── astro.config.mjs
└── package.json

コンテンツコレクションの設定

1. コンテンツスキーマの定義

src/content/config.tsを作成し、記事のスキーマを定義します：

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

const blogCollection = defineCollection({
  type: 'content',
  schema: z.object({
    title: z.string(),
    description: z.string(),
    pubDate: z.date(),
    author: z.string(),
    tags: z.array(z.string()).optional(),
    image: z.string().optional(),
  }),
});

export const collections = {
  blog: blogCollection,
};

2. マークダウンファイルの作成

src/content/blog/ディレクトリに.mdファイルを配置：

---
title: "Astroで始める静的サイト構築"
description: "Astroを使った効率的なWebサイト開発"
pubDate: 2024-01-15
author: "開発太郎"
tags: ["Astro", "SSG", "Web開発"]
---

# 記事の内容

ここに記事の本文を記述します...

動的ルーティングの実装

ブログ記事ページの作成

src/pages/blog/[...slug].astroを作成：

---
import { getCollection } from 'astro:content';
import BlogPost from '../../layouts/BlogPost.astro';

export async function getStaticPaths() {
  const blogEntries = await getCollection('blog');
  return blogEntries.map(entry => ({
    params: { slug: entry.slug },
    props: { entry },
  }));
}

const { entry } = Astro.props;
const { Content } = await entry.render();
---

<BlogPost {...entry.data}>
  <Content />
</BlogPost>

Remarkプラグインによる拡張

1. 基本的なRemarkプラグインの導入

npm install remark-gfm remark-toc rehype-slug rehype-autolink-headings

2. astro.config.mjsの設定

import { defineConfig } from 'astro/config';
import remarkGfm from 'remark-gfm';
import remarkToc from 'remark-toc';
import rehypeSlug from 'rehype-slug';
import rehypeAutolinkHeadings from 'rehype-autolink-headings';

export default defineConfig({
  markdown: {
    remarkPlugins: [
      remarkGfm,           // GitHub Flavored Markdown対応
      [remarkToc, { 
        heading: '目次',
        tight: true 
      }],
    ],
    rehypePlugins: [
      rehypeSlug,          // 見出しにIDを付与
      [rehypeAutolinkHeadings, {
        behavior: 'append',
        content: {
          type: 'text',
          value: ' 🔗'
        }
      }],
    ],
  },
});

3. カスタムRemarkプラグインの作成

独自の処理を追加する例：

// plugins/remark-reading-time.mjs
import getReadingTime from 'reading-time';
import { toString } from 'mdast-util-to-string';

export function remarkReadingTime() {
  return function (tree, { data }) {
    const textOnPage = toString(tree);
    const readingTime = getReadingTime(textOnPage);
    data.astro.frontmatter.minutesRead = Math.ceil(readingTime.minutes);
  };
}

設定への追加：

import { remarkReadingTime } from './plugins/remark-reading-time.mjs';

export default defineConfig({
  markdown: {
    remarkPlugins: [
      remarkReadingTime,
      // 他のプラグイン...
    ],
  },
});

高度な機能実装

1. シンタックスハイライト

// astro.config.mjs
export default defineConfig({
  markdown: {
    shikiConfig: {
      theme: 'github-dark',
      langs: ['javascript', 'typescript', 'python'],
      wrap: true,
    },
  },
});

2. 画像最適化

---
import { Image } from 'astro:assets';
import heroImage from '../assets/hero.jpg';
---

<Image 
  src={heroImage} 
  alt="Hero画像"
  width={800}
  height={400}
  format="webp"
/>

3. MDXサポート

npm install @astrojs/mdx

// astro.config.mjs
import mdx from '@astrojs/mdx';

export default defineConfig({
  integrations: [mdx()],
});

デプロイと自動化

GitHub Actionsを使用した自動デプロイ

# .github/workflows/deploy.yml
name: Deploy to GitHub Pages

on:
  push:
    branches: [main]
    paths:
      - 'src/content/**/*.md'
      - 'src/**/*.astro'

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 18
      
      - run: npm ci
      - run: npm run build
      
      - uses: actions/upload-pages-artifact@v2
        with:
          path: ./dist

  deploy:
    needs: build
    runs-on: ubuntu-latest
    permissions:
      pages: write
      id-token: write
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    steps:
      - id: deployment
        uses: actions/deploy-pages@v2

パフォーマンス最適化のフロー

ベストプラクティス

1. コンテンツの構造化

フロントマターでメタデータを統一管理
タグやカテゴリーによる分類
日付形式の統一（ISO 8601推奨）

2. パフォーマンス向上施策

画像の遅延読み込み
フォントの最適化
Critical CSSの抽出
プリフェッチの活用

3. SEO対策

---
// SEOコンポーネント
export interface Props {
  title: string;
  description: string;
  image?: string;
}

const { title, description, image = '/og-image.jpg' } = Astro.props;
const canonicalURL = new URL(Astro.url.pathname, Astro.site);
---

<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{title}</title>
<meta name="description" content={description} />
<link rel="canonical" href={canonicalURL} />

<!-- Open Graph -->
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:image" content={image} />
<meta property="og:url" content={canonicalURL} />

トラブルシューティング

よくある問題と解決策

ビルドエラー: フロントマターの形式を確認
画像が表示されない: 相対パスとpublicディレクトリの使い分け
Remarkプラグインが動作しない: プラグインの順序と設定を確認

まとめ

Astroを使用することで、マークダウンファイルを配置するだけで高品質なWebサイトを構築できます。Remarkプラグインエコシステムを活用することで、目次生成、シンタックスハイライト、読了時間表示など、様々な機能を簡単に追加できます。

静的サイトジェネレーターとしてのAstroの強みは、開発者体験の良さと生成されるサイトのパフォーマンスの高さにあります。コンテンツ重視のWebサイトを構築する際は、ぜひAstroの採用を検討してください。

参照リンク