Source code for the YouTube video - Translate a Docusaurus website in multiple languages with its internationalization (i18n) support.

commands_docusaurus_translation.md

Initialize a new site

with npx @docusaurus/init@latest init website classic

Configure your site

i18n: {
    defaultLocale: 'en',
    locales: ['en', 'it'],
    localeConfigs: {
      en: {
        label: 'English',
      },
      it: {
        label: 'Italiano',
      },
    },
  },

Theme configuration

{
  type: 'localeDropdown',
  position: 'left',
},

Start your site

yarn run start -- --locale it

Use the translation APIs

import Translate, {translate} from '@docusaurus/Translate';

<main>
  <div className={clsx('col col--4', styles.feature)}>
    <div className="text--center">
      <img className={styles.featureImage} src='img/undraw_docusaurus_mountain.svg' alt="Easy to Use"/>
      <h3><Translate description="The homepage message to ask the user to visit my blog">Easy to Use</Translate>
      </h3>
      <p>
        <Translate>
          Docusaurus was designed from the ground up to be easily installed and
          used to get your website up and running quickly.
        </Translate>
      </p>
    </div>
  </div>
</main>

Translate JSON files

yarn run write-translations -- --locale it

Translate Markdown files

mkdir -p i18n/it/docusaurus-plugin-content-docs/current
cp -r docs/** i18n/it/docusaurus-plugin-content-docs/current

Translate the blog

mkdir -p i18n/it/docusaurus-plugin-content-blog
cp -r blog/** i18n/it/docusaurus-plugin-content-blog

Docusaurus official tutorial

https://docusaurus.io/docs/next/i18n/tutorial