Multi-language website example with Gatsby.js
📦 We just published beta versions (4.0.0-beta.0) for the gatsby-source-prismic and gatsby-plugin-prismic-previews plugins. With this new change, previews are now handled from their own plugin. Please refer to the migration guide for each plugin.
- Migrate gatsby-source-prismic from V3 to V4
- Install the previews plugin: gatsby-plugin-prismic-previews
- Migrate previews to gatsby-plugin-prismic-previews
Also, expect this documentation to be updated to v4 as well soon!
Example multi-language website using Gatsby.js and Prismic. Check it out to learn how to have a website with multiple locals with a language switcher. Feel free to modify and adapt it to your liking; it's all yours!
1. Launch the project
First, Install the prismic-cli package. Launch a terminal instance and run the following command to globally install the package.
⚠️ Node Version
You will need to have at least version 12.16.1 of node installed on your machine. You can check this by running the node -v command in your terminal.
⚠️ Prismic CLI version
Make sure you're using at least version 3.8.8 of the Prismic CLI. Otherwise, the theme command won't add any Custom Types or content correctly to the newly created repository.
Check your version by running prismic --version command in your terminal.
npm install -g prismic-cli
Sometimes it's possible that this command doesn't work. If that's the case for you, try executing a sudo command: sudo npm install -g prismic-cli
Once it's been installed, navigate where you want to create your new project folder and run the following command. This will create a new Prismic content repository, set up the custom types, create a few documents, and install the project code:
prismic theme --theme-url https://github.com/prismicio/gatsby-multi-language-site --conf prismic-configuration.js
⚠️ Correct repositoryName
Open your prismic-configuration.js file and confirm that the prismicRepo matches the URL of the Prismic repository created earlier in this article. To find this, go to your Prismic dashboard, then to your repository.
If the URL for your repository is https://my-awesome-repository.prismic.io, then you'll need to replace 'your-repo-name' with 'my-awesome-repository'.
2. Multi-language configuration
For this example project, you'll have a default locale configuration on your repo. This will be:
- English en-us as the master locale
- And, French fr-fr as the second locale
And, if you want to add additional locales, go to your Dashboard, enter your repository, go to Settings / Translations & locales and add another language.
🌐 Change the master locale
If you wish to modify the master locale of your repository, reach out to us so we can make this change for you.
If you add new locales, update your language settings in the prismic-configuration.js file. Make sure that the defaultLanguage and langs match the languages you just set up in your Prismic repo. For this example, en-us and fr-fr are already configured in your settings.
3. Run the website
Open your project folder again, and in the terminal run the development command.
Your site should now be running locally at http://localhost:8000, woohoo!
4. Deployments & Previews
You have many options to select from to deploy and host your site, as well as different ways of setting up previews in your project. Refer to the dedicated guide and select the option that best fits your needs:
Customize to your liking
You should easily find what to modify in the code to customize the website: just edit the stylesheets and the templates to fit your design.
Was this article helpful?
Can't find what you're looking for? Get in touch with us on our Community Forum.