Set up multi‐language support

Set your default and supported languages

Update SUPPORTED_LANGUAGES with all languages you will support and DEFAULT_LANG with your default language in the src/consts.ts file

export const SUPPORTED_LANGUAGES = {
  'en': 'en',
  'es': 'es'
};

export const DEFAULT_LANG = SUPPORTED_LANGUAGES.en as SupportedLanguage;

Then open the astro.config.mjs file and update defaultLocale and locales under i18n. They should match the languages you defined in src/consts.ts

export default defineConfig({
  // ... 

  i18n: {
    // default language
    defaultLocale: "en",

    // supported languages
    locales: ["en", "es"]
  },

  // ...
});

Content Management

To support for different languages, the translated blog/project posts should be placed within the correct subdirectories. These subdirectories should be named the same as the languages in SUPPORTED_LANGUAGES.

If a blog post is within the root folder (blog or project), those posts will only be shown with the default language.

Read this to learn about how this file system works.

Example:

.
├── blog
│   ├── draft.md
│   ├── en
│   │   └── multi-lang-test.md
│   ├── es
│   │   └── multi-lang-test.md
│   ├── first-post.md
│   ├── hidden-post.md
│   ├── markdown-style-guide.md
│   ├── second-post.md
│   ├── test-tables.md
│   ├── third-post.md
│   └── using-mdx.mdx
└── project
    ├── es
    │   ├── project-1.md
    │   ├── project-2.md
    │   ├── project-3.md
    │   └── project-4.md
    ├── project-1.md
    ├── project-2.md
    ├── project-3.md
    └── project-4.md