Blog on GatsbyJS and AWS Amplify. Part 1.

August 10, 2020


In this post, I’ll share my experience of building personal blog with GatsbyJS and using AWS Amplify for hosting. I’m not going to make a detailed tutorial about Gatsby itself. You can find a very accurate one on their site. But I’ll do the short preview and tell you more about what I’ve changed and what approaches used during development.

So, prerequisites for using GatsbyJS are strong knowledge of JavaScript, understanding of ReactJS and component approach, and web basics CSS and HTML.

App structure

Gatsby allows you very fast prototyping. You can set up a base for your blog for half of an hour. You just need to have Gatsby on your machine and exec:

$ gatsby new blog gatsbyjs/gatsby-starter-blog

And it will generate default files structure:

app arch

Content - the place for your posts and assets on the local machine.
Src - app source code.
Static - here gatsby will generate static pages and assets related to them.

Next 3 are important config files:

Gatsby-browser.js -  lets you respond to actions within the browser, and wrap your site in additional components.
Gatsby-config.js - defines your site’s metadata, plugins, and other general configuration.
Gatsby-node.js - is run once in the process of building your site. You can use it to create pages dynamically, add nodes in GraphQL, or respond to events during the build lifecycle.

Rest files should be familiar to the npm users.

To start a project you can use one of the following commands:

gatsby develop

Or simple

npm start

which already added to package.json

It starts a dev-server on the localhost:8000 open it in a browser and you’ll see something like this.

site example

It’s a base for your blog.

First steps

Now, open gatsby-config.js and update metadata: title, author, and so on. Beneath the metadata you can find plugins connection.
Plugins are the things that made development on Gatsby even faster. They cover most of the standard functionality of any blog. Easing setup of analytics, SEO, tagging, etc. All that good stuff.
The next step is choosing typography. Gatsby already contains connected typography.js as a plugin. It allows you to visually setup your site fonts, paddings, and so on. Just play with it on the site and connect into gatsby-browser.js. Don’t forget to connect fonts.

Quick look at SRC

I remember that promised to not transform this post to another Gatsby tutorial, but I need to tell a bit more about app architecture. Let’s take a look at the SRC directory.

source directory structure

Gatsby heavily relies on the ReactJS and his infrastructure (components, routing, and so on). And do it quite well. It uses components besides the main purpose - web-components - as a base for the templating system. On the screenshot above blog-post.js contains code that you want to have on every post like header, footer, or any other common elements. You can use this BlogPost component just as a wrapper for your pages and that’s it. Also, it uses as a base for generating posts pages.
Routing in Gatsby based on the react-router and use for local navigation that same Link component. Pages directory and files within used for some specific pages like index, 404, some landing pages, and so on.
The components folder is a common folder for React components. Nothing special.

You can notice using-typescript.tsx file, yes Gatsby almost supports typescript.
There are some restriction (check docs).

Thus we made sure that the Gatsby app is very similar to the react app or any app based on the modern frontend framework.

Styles

I think by now you already have a rough idea of what Gatsby is. Let’s talk about more routine tasks like styling. Gatsby allows you to write your styles as you want, I mean like really whatever you want. Pure CSS, preprocessors, CSS-in-JS, and so on. Basically in blog starter Gatsby setup with some sort of CSS-in-JS. I’m not a fan of such a type of mix. And prefer to split up styles and logic. That’s why I’ve chosen CSS-Modules. It allows you to write your styles as you usually do, even with SASS/SCSS in separate files, and import them wherever you need it. And the cool thing here that every file will have their scope for classes after building. You no longer need to think about methodologies for naming classes to avoid the mess with names’ conflicts.

For example:

.title {
  // your styles
}

Will generate the next class.

css-modules class example

You will not need much effort to understand where this class is located and what it is responsible for. Furthermore, Gatsby and all apps based on create-react-app-v2 already contain support for using css-modules. Just create a file as usual and add module before file extension:

layout.module.css or layout.module.scss

To connect styles do the import inside your component

import style from “path/to/file/layout.module.css”

For adding classes to elements you should add them like a simple JS object values:

<h2 className={style.title}></h2>

And that’s it for styles.

Netx time I’ll tell about data layer and GraphQL, hosting on the AWS Amplify, and probably PWA.