DEV Community


Multilanguage Site without CMS

giorgosilias profile image George Ilias ・1 min read

Trying to add a language switch for a site

So I made a simple menu site and I want to add the ability to change language but I'm doing it in a very basic way and it's reseting when changing pages because of reload. Can anyone please help me with this? Any guide that I find is for wordpress and it's not helping because the site is hardcoded.

Discussion (3)

bassel profile image
Bassel Cheaib

When you say the site is hardcoded, do you mean it's using a static site generator or is it purely handcoded static pages?

Some static site generators offer you the ability to have multilingual support. Here's an example of how it can be done with Gatsby:

In case you're doing things manually, you can have multiple versions of the site living under different directories. For example the English version lives under the root directory, while the French version lives under the /fr/ directory. Here's a concrete example of how that would work:

  • Visiting: serves the english version
  • Visiting: serves the french version, and all links inside of it point to pages inside the /fr/ directory so that you don't lose that when refreshing the page or navigating.

Disclaimer: Although the second approach is easier to setup, it becomes a nightmare when it comes to maintenance. So I definitely recommend going with a static site generator of your choice and using their approach for i18n.

If you still want to keep things simple, you can take a look at something like static-i18n. It will still generate the multilingual versions of the site for you but at the same time it saves you the hassle of setting up an entire static site generation framework

giorgosilias profile image
George Ilias Author

When I say hard coded I mean that its builded using html css and javascript without any framework with node.

bassel profile image
Bassel Cheaib

In that case definitely check the static-i18n package. It will be easier to setup than a full SSG and will allow you to build multiple languages of the site in a maintainable way

Forem Open with the Forem app