Creating a localised website using Gatsby and Cosmic JS

Where are the CSS files?

Trust me, you wont find it.

This starter application leverages a CSS-in-JS technology called Emotion, which removes the requirement of serving static CSS. In SSR this is beneficial since it’s deterministic nature allows more predictable style hydration and preloading.

Creating an styled component or usable CSS class

Emotion provides two* main ways of generating reusable styles for components.

One is via @motion/styled, which enables you to generate elements with bound className attributes.

The second form is via the { css } helper from @emotion/core. It allows you to generate deterministic (and reusable) class names;

* There are more advanced examples of what you can do from the emotion documentation here.

Managing content

In order for this starter application to work, a few assertions must be made.

  1. You should already have Pages and Blog Posts Objects configured for your bucket
  2. Each Object needs to have localisation enabled
  3. Each Page and Blog Post should have the same locales available and should have each locale variant present.

So your environment should look something like this:

Enabling localisation for Cosmic Object Types

On left left hand sidebar under Dashboard after creating each respective Object Type you should have Blog Posts and Pages as small folder icons visible under the dashboard. From that same interface, you should also see a small cog near the top of the listing. Clicking that will bring up an interface to enable localisation.

Toggle Localisation to On and then, add the locales you’d like to support for your application. The Select Locales button can be used to select the correct locales for the application. These should be same same for both content types.


You got this far into the article, have a cosmic cat

Cosmic JS is an incredibly powerful means of allowing your content to be made available to various locations across the web, and it’s localisation toolset lets to leverage this in a way where many people can benefit and appreciate your business or personal content, regardless of international barriers. Looking forward to see where the community will be able to take Cosmic JS to in the future.

Don't forget to share

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *