Here you'll find an 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! 

For this project, we provide you with all the source code you need to get your blog up and running. We will also walk you through setting up a new Prismic project from your terminal using the prismic-cli tool, which will not only copy all the required code for you to get started right away, but also setup the required content repository for you in a few simple steps.

Launch the project

We're going to kickstart our project by using the command line tool prismic theme, which takes care of every step of your initial setup.

The first step will be to install the prismic-cli package. Launch a terminal instance and run the following command to globally install the package.

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, you just need to navigate to where you want to create your new project folder and run the following command. This will create a new Prismic content repository, setup the custom types, and install the project code:

prismic theme --theme-url https://github.com/prismicio/gatsby-multi-language-site --conf prismic-config.js

This will download the project files. Open the files in your editor of choice and open the prismic-config.js file. Confirm that the name you chose for your content repository has been setup as the prismicRepo.

prismicRepo: 'your-cool-repo-name'

Add languages 

Visit the repository that the Prismic theme command created for you. You should be able to find it in your Prismic Dashboard. First select your master language. After that, go to Settings / Translations & locales and add another language.

Now back in your project files, you'll need to update your language settings in the prismic-config.js file. Make sure that the defaultLanguage and langs match the languages you just set up in your Prismic repo. For example, if you chose en-gb as your master language and es-es as your other language, your settings would look like this:

defaultLanguage: 'en-gb',
langs: ['en-gb', 'es-es'],

Write some content and ‘Copy to another locale’

1. Create a homepage

Go to "Content" and hit "New", choose the Homepage type and fill it with your own content. Save and publish.

2. Create a page

Now do the same with the Page type. After you've filled the document with content, make sure to save and publish.

3. Create a Top Menu

Finally, create a Top Menu type document, this will serve as the navigation that will appear at the top of your website. Save and publish!

4. Create translations for all of these documents

Now you’re ready to copy those documents to other locales. Follow this documentation on how to do this.

Once you have the necessary translations your project it’s ready!

Run the website

Open your project folder once more in the terminal and run the development command.

npm start

Your site should now be running locally at http://localhost:8000. Check out how all your content is being shown, and how you can switch between languages.

Deploy and go live!

You can deploy your production-ready Gatsby site to any provider that supports static sites. Follow Gatsby's team's recommendations for deploying to platforms like Now, Netlify, GitHub Pages, and more.

If you choose a provider that supports builds triggered by webhooks such as Netlify, you can configure Prismic's Webhooks to automatically rebuild your static pages whenever the content in your Prismic repository is updated. Follow Netlify's instructions to generate a webhook url, which will look something like this:

https://api.netlify.com/build_hooks/xxxxxxxxxxxxxxx 

You can now add this to your Prismic repository's Webhooks. Once you do, whenever a content update triggers it, Netlify will automatically generate a fresh build of your Gatsby site.

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.

Did this answer your question?