Skip to content

Add a Site Language

Follow this steps to add a new site language:

  1. Identify the language’s BCP-47 code: Wikipedia, this tool, google or chat-gpt might be helping you with this. E.g. en for English.
  2. Create a translations file: Create an empty file in the src/translations folder. The file must be named with the language code ending with .yml (e.g. en.yml for English).
  3. Find out if LightNet already offers your language: Inspect LightNet’s built-in translations on GitHub. See if there is a file named [your language code].yml.
    • If there is no such file, LightNet does not yet offer built-in translations for your language. In this case you must add translations inside your project (see explanation below).
    • If there is a translation file for your language, checkout the Translation-Status to see if there are missing keys for your language.
  4. Add LightNet translations to your project: If your language is not yet built-in, or if the built-in translation file is missing keys, you need to add these keys to your translation file. To do so, copy all missing entries from the English translation file to your newly created translation file (from step 2). Translate the values to your language.
  5. Add your custom translation keys: If you already have other translation files that define custom translation keys (keys starting with x.), add them to your new translation file including their translated values.
  6. Add language to config: Add the new language to the languages array in your astro.config.mjs file.
    astro.config.mjs
    export default defineConfig({
    integrations: [
    lightnet({
    languages: [
    {
    // BCP-47 code from step 1
    code: "de",
    // Display name for the language selector.
    label: "Deutsch",
    // Use this as a site language
    isSiteLanguage: true
    },
    ],
    }),
    ],
    })
  7. Set default language: Your pages needs exactly one default site language. If you want to use the new language as the default site language, replace isSiteLanguage: true with isDefaultSiteLanguage: true.
  8. Validate: Run the development server with npm run dev and check if the new language is available in the language selector. Select the new language and check if the translations are working as expected.
  9. Contribute: If you have translated missing LightNet’s built-in translations. Please consider sharing them by using this simple form.