Gatsby: i18n with different Markdown files

[Siregar]

👋
Hi,
I am working on a new Gatsby project and want to implement i18n.
My plan was to store the content in multiple markdown files (de and en). Routes like /de/product1 and /en/about should be available.

My folder structure for the content looks like this:

• content/
  
  
  
  • pages/
  
  
  • index.en.md
  
  
  • index.de.md
  
  
  • about.en.md
  
  
  • about.de.md
  
  

• products/
  
  
  
  • product_1.en.md
  
  
  • product_1.de.md
  
  
  • product_2.en.md
  
  
  • product_2.de.md
  
  
  • [...]
  
  

Does anyone have an approach for my intention?

[smakosh]

you can add a language property to the front matter of each markdown file and handle the rest with graphql queries.

[Siregar]

@smakosh Thanks for your help.

This tutorial helped me a lot: https://blog.significa.pt/i18n-with-gatsby-528607b4da81
It uses .json files instead of .md files, but that's not a big deal, because my gatsby-node.js.

[grubersjoe]

You might also want to look into https://github.com/angeloocana/gatsby-plugin-i18n.

Not sure, if this plugin is already v2 compatible, though.

[CanRau]

Still didn't had the time to properly write about my i18n implementation
I use a file structure as the following

├── about-us
│   ├── assets
│   │   ├── anon.png
│   ├── de.js
│   └── en.js
├── contributors
│   ├── de.js
│   └── en.js

pages are in js, blog posts are in md, but that doesn't really matter as you already figured out
right now I'm still duplicating the language in the files frontmatter but it could be easily extracted from the file name, so every page has it's own folder this way every page/post can have it's own assets for easier reference in md and VSCode, personally I don't like the one huge messy folder for all assets..

Page urls are being generated based on the language and the sluggified title or an optional slug field as it's sometimes nice for SEO to shorten or otherwise customize the url..

Pages will receive a node field containing it's translations which are auto linked based on the folder structure, before that I linked them myself, it's okay but it's tedious 😉

And than as @smakosh the rest is just a matter of querying for that url, which I store in a url node field for easier querying..

Think that's basically it, and right now my preferred way of managing multi language sites
Uh and having each page in a directory makes it easier to grow to more languages later on without flooding a single folder ;)

Only thing, the directories are named after the english name/url/workname of the page, can be a trade off, but for me it works so far..

Here's the repo: https://github.com/GaiAma/gaiama.org maybe it helps (this one uses the same technique and might be a little less cluttered https://github.com/GaiAma/rescue-amazonian-rainforest.com)

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

Thanks for being a part of the Gatsby community! 💪💜

[gatsbot[bot]]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

Thanks again for being part of the Gatsby community!