Gatsby Starter i18n

Gatsby Starter i18n is a Gatsby.js boilerplate from developer smakosh that scaffolds a multilingual static site with right-to-left direction support, SEO metadata, and styled-components styling.

What is Gatsby Starter i18n?

Gatsby Starter i18n is a starter template for the Gatsby static site generator, distributed as a GitHub repository. Running gatsby new with the repository URL creates a new project preconfigured for internationalization: it handles language switching, font swapping per language, and right-to-left layout changes. The template runs on Node.js and the Gatsby build system, and it produces a static HTML site with React components styled via styled-components. It is created by smakosh, who also links to a Patreon page for support.

Key Features

• i18n with RTL direction — Supports multiple languages including right-to-left scripts, automatically switching the document direction.
• Dynamic font per language — Changes the font family based on the active language, useful for scripts that need different typefaces.
• SEO metadata — Includes meta tags, Open Graph, structured data, and Twitter card support, all managed through one config file.
• Central SEO config — A single config file holds the SEO information you need to change, streamlining updates across the site.
• Styled-components — Uses the styled-components library for scoped CSS in JS, enabling component-level styling and theming.
• React Context API — Manages state with React's Context API, avoiding external state management libraries.
• ESLint auto-lint on save — Comes with workspace settings that automatically lint code on save to catch errors early.

Who is it for?

• Developers building multilingual sites — Start a new Gatsby project with i18n already wired up, then define languages and translations.
• Teams shipping RTL locales — The built-in RTL direction switching saves configuration time for Arabic, Hebrew, or Persian content.
• SEO-conscious site owners — A preconfigured SEO config file with meta tags and structured data helps new sites ship with basics in place.
• Freelancers and agencies — Use the starter as a base for client projects that need quick internationalization and clean styling.

What can you do with Gatsby Starter i18n?

• Launch a localized site: Set up a Gatsby site that switches languages and adjusts layout direction without additional plugins.
• Publish SEO-ready pages: Edit the central config to update meta descriptions, Open Graph settings, and Twitter cards across the site.
• Style with CSS-in-JS: Build components using styled-components, taking advantage of scoped styles and theming variables.

How does Gatsby Starter i18n work?

Create a new project by running gatsby new with the GitHub URL, then run yarn && yarn start to launch the development server. The starter scaffolds a working Gatsby site with i18n configuration, and you customize languages and content inside the config and component files.

Pros and cons

• Pros: RTL support, per-language fonts, one-file SEO config, styled-components, Context API, and auto-linting on save.
• Cons: Offline support is currently disabled in the starter, and a separate config file for secondary languages is on the project's todo list.

FAQ

Does Gatsby Starter i18n support right-to-left languages?

Yes, the starter includes i18n with change of direction, so it renders RTL scripts such as Arabic and Hebrew correctly.

What styling solution does Gatsby Starter i18n use?

It uses styled-components for component-scoped CSS, allowing theming and dynamic styles within the React components.

Is Gatsby Starter i18n free to use?

Yes, it is an open-source starter hosted on GitHub. You can start a project with it using the gatsby new command and the repository URL.

Why is offline support disabled?

The project contains offline/PWA support code, but it is disabled for the moment in the starter, so you need to enable it if your site requires offline capabilities.

How do I set up the starter?

Run gatsby new with the repository URL, then install dependencies with yarn and start the development server with yarn start.