Barbarian Meets Codingbarbarianmeetscoding

WebDev, UX & a Pinch of Fantasy

5 minutes readgatsbyjs

Gatsby.js

This blog in its current incarnation is built on Gatsby.js. I tinker on it now and then adding new features, upgrading it to latest versions, improving the user experience, making weird stuff, accomoddating it to the latest best practices but in between all this tinkering time goes by and I forget about how Gatsby.js which means that I’m re-learning how to Gatsby every 6 months or so. So this article right here is going to be my refresher for the next time I decide to tinker with the blog and will focus first on fundamentals concepts and mental models about Gatsby and then about more specific details that’ll be useful for future Jaime. And as usual, you’re welcome to use it for your own learning, refreshment or problem-solving.

What is Gatsby?

Getting started

As it is common with most modern development tooling Gatsby.js has a cli tool that helps you crete and interact with Gatsby sites. The Gatsby CLI is powered by node.js and can be installed through npm:

npm install -g gatsby-cli

To get started creating a new Gatsby.js site use gatsby new:

$ gatsby new my-new-site

Follow the wizard to create your new site and select the options that make sense for you. Once you’re done use gatsby develop to start a development server so that you can see your new site. Now start changing things and see how they automatically appear in the browser.

Some useful CLI commands are:

# Get help. Shows all the commands available and what they do.
gatsby --help

# Create a new Gatsby website
#   - rootPath: where to create the website
#   - starter: which starter to use. A starter represents the skeleton
#              for a type of website e.g. a blog, a news site, an application, etc.
#              and it comes tailored to solve a specific use case.
gatsby new [rootPath] [starter]

# Start a development server locally
gatsby develop

# Build your site
gatsby build

# Serve a previously built site
gatsby serve

For a complete tutorial on how to setup everything you need to develop a Gatsby.js website take a look at the Gatsby docs.

Building a website in Gatsby

Gatsby.js is a web framework designed to build static web

Gatsby Versions

What’s new in Gatsby v4?

  • Performance improvements
  • In addition to static rendering Gatsby now supports SSR (Server-Side rendering) and DSG (Deferred Static Generation).

For more info take a look at Gatsby v4 release notes.

Errors and troubleshooting

Some useful error guides:

Fixing error “Error: Invalid Argument” when running gatsby build

UNHANDLED REJECTION Invalid argument

  Error: Invalid argument

  - read.js:19 LMDBStore.getString
    [barbarianmeetscoding]/[lmdb]/read.js:19:25

  - read.js:126 LMDBStore.get
    [barbarianmeetscoding]/[lmdb]/read.js:126:22

  - cache-lmdb.ts:69 GatsbyCacheLmdb.get
    [barbarianmeetscoding]/[gatsby]/src/utils/cache-lmdb.ts:69:25

  - index.js:382 cachifiedProcess
    [barbarianmeetscoding]/[gatsby-plugin-sharp]/index.js:382:30

  - index.js:396 base64
    [barbarianmeetscoding]/[gatsby-plugin-sharp]/index.js:396:18

  - index.js:573 fluid
    [barbarianmeetscoding]/[gatsby-plugin-sharp]/index.js:573:25


not finished createPages - 53.474s
not finished Running gatsby-plugin-sharp.IMAGE_PROCESSING jobs - 0.080s

I don’t know why this is happening. So far a possible workaround is to:

  1. gatsby clean
  2. gatsby develop
  3. gatsby build
  4. deploy built site

It looks as though gatsby build may use some assets been generated in gatsby develop that arent’ available if one just builds the site directly. It could be something with my ancient setup or maybe a bug. Should debug it and file an issues on the Githubs.

Resources


Jaime González García

Written by Jaime González García , Dad, Husband, Front-end software engineer, UX designer, amateur pixel artist, tinkerer and master of the arcane arts. You should follow him on Twitter where he shares useful stuff! (and is funny too).Jaime González García