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
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
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:
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.
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:
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.