Astroで多言語ブログをセットアップ

このチュートリアルでは、Astroを使用して多言語ブログをセットアップする方法を説明します。

1. インストール

まず、新しいAstroプロジェクトを作成します:

npm create astro@latest my-multilingual-blog
cd my-multilingual-blog

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

src/contentディレクトリに言語ごとのサブディレクトリを作成します:

src/content/blog/
  ├── en/  # 英語
  ├── ja/  # 日本語
  ├── es/  # スペイン語
  └── fr/  # フランス語

3. 多言語実装

src/i18n.tsファイルを作成し、言語設定を定義します:

const languages = {
  en: { title: 'English', flag: '🇬🇧' },
  ja: { title: '日本語', flag: '🇯🇵' },
  es: { title: 'Español', flag: '🇪🇸' },
  fr: { title: 'Français', flag: '🇫🇷' },
};

export default languages;

4. 言語セレクターの追加

src/components/LanguageSelector.astroを作成:

---
import languages from '../i18n';
---
<div class="language-selector">
  {Object.entries(languages).map(([code, { title, flag }]) => (
    <a href={`/${code}`} class={code === currentLang ? 'active' : ''}>
      {flag} {title}
    </a>
  ))}
</div>

5. デプロイ

完成したブログはVercelやNetlifyなどのプラットフォームにデプロイできます。

npm run build

これで、多言語対応のAstroブログが完成しました！