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.
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 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.
Gatsby.js is a web framework designed to build static web
- 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.
Some useful error guides:
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:
- 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.
- Gatsby.js docs
- Gatsby.js tutorial
- Gatsby.js Tutorial video
- Migration guides
- Documentation to third-party libraries used by gatsby
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).Follow @vintharas