How to Build Your First Static Site with Gatsby

How to Build Your First Static Site with Gatsby

Thinking about getting on the JAMStack bandwagon? If your answer is Yes, then Gatsby, one of the hottest static site generators around, could be just what you’re looking for.

[…]

That’s the typical code for a React component, that is:

[…]

The /src/components/ directory is where you find general components for your website. The default starter comes with the following components: Header (header.js), Image (image.js), Layout (layout.js), and SEO (seo.js). You’re free to customize these components and add your own to the same directory.

[…]

To see how it works, open layout.js and layout.css in your code editor (you’ll find both files inside the components/ directory).

At the top of layout.js, notice the import statement which makes available the CSS rules contained in layout.css to the shared Layout component and therefore to the entire website:

In layout.css, locate the CSS declaration for the body element, it should be around line 199. This is what it looks like:

[…]

A CSS Module is a CSS file in which all class names and animation names are scoped locally by default.

[…]

Open fancy-paragraph.js in your code editor and enter the following code:

[…]

An additional option for styling components is just to add inline CSS styles in the form of a JS object.

[…]

Notice how CSS styles are applied to the