Gatsby multi-language starter with CMS
A starter Internationalization / i18n without third party plugins or packages for Posts and Pages. Different URLs dependending on the language. Focused on SEO, PWA, Image Optimization, Styled Components and more. This starter is also integrate with Netlify CMS to manage all pages, posts and images.
- Translations by using GraphQL, hooks and context API
- Content in markdown for pages and posts in different languages
- General translations for any content
- Creation of menus by using, jSON, translations and GraphQL
- Netlify CMS to manage all pages, posts and images
- Styled Components to styles
- All important seetings for speedy and optimized images
- Blog Posts list with pagination
- Focus on SEO
🚀 Getting Started
Assuming Gatsby is installed, run the following commands to install the project:
$ gatsby new gatsby-multilanguage-site https://github.com/diogorodrigues/iceberg-gatsby-multilang.git
With git clone:
$ git clone https://github.com/diogorodrigues/iceberg-gatsby-multilang.git your-project-name # Clone the project cd your-project-name rm -rf .git yarn install # or npm install gatsby develop # or yarn run develop
gatsby develop you will see the following URLs:
http://localhost:8000 http://localhost:8000/___graphql http://localhost:8000/admin
A quick look at the top-level files and directories you'll see in a Gatsby project.
├── blog │ ├── markdown-file.en.md │ ├── markdown-file.pt.md ├── config │ ├── menu │ │ ├── en.json │ │ ├── pt.json │ ├── translations │ │ ├── en.json │ │ ├── pt.json │ ├── i18n.js ├── pages │ ├── markdown-file.en.md │ ├── markdown-file.pt.md ├── src ├── static │ ├── admin │ │ ├── config.yml │ ├── assets │ │ ├── img ├── gatsby-browser.js ├── gatsby-config.js ├── gatsby-node.js ├── gatsby-ssr.js ├── wrapPageElement.js
blog and pages directories: All markdown files to generate pages and posts.
config: All language settings: languages, strings, menu... In
i18n.jsyou can set the languages and some others important info
src: Components, hooks, templates and fixed pages (Different of markdown pages, these pages have the same url for all languages and the text content needs to be inserted in
static: Netlify settings and images.
gatsby-browser.js: External files and the layout wrapper setting.
gatsby-config.js: Gatsby plugins.
gatsby-node.js: Logic for generating pages and posts by manipulating GraphQL.
wrapPageElement.js As this component wraps every page (due to the wrapPageElement API) we can be sure to have the locale available everywhere!
About Netlify CMS
You must change the Netlify data "repo" and "site_domain" according your Github repository in
backend: name: github repo: _owner-name/repo-name_ # Path to your GitHub repository branch: master site_domain: _site-url_ # If site extists
- General information for languages are defined in
- The general content translations are located in
useTranslationscustom hook pulls these translations (via GraphQL query) and inserts them into the pages.
- The menu items translations are located in
useMenucustom hook pulls these translations (via GraphQL query) and inserts them into the pages.
- Due to the use of a global layout / context API and the language code passed to all pages (see
gatsby-node.js), you know on all pages which language is currently displayed.
- Blogposts are defined in
blogdirectory and pages are defined in
pagesdirectory. The file names are the
slugof the posts and pages.
- A custom component for the tag is implemented - this way links can stay the same for every language, without the need to manually write path prefixes.
This project started based on this solution to create a manner to provide translations, but I added a lots of other solutions based on my projects needs (like menu from GraphQL, markdown for pages, pagination, image optmization, styled components, PWA, CMS and more). Feel free to use this solution if you want. :)