Learning GatsbyJS

A little attempt to learn to build a simple web app using GatsbyJS

A little background

Six or seven years I was building web applications using Ext Js (what is that? Ask me now, I‘ll blink and blank out. I no longer know. One more thing lost in memory, impossible to retrieve). Three or four years ago I was happily coding with Angular Js, the abandoned sibling of the now much grander, imposing, and vastly different Angular 2 (or simply Angular), the alpha. In 2019, I plunged into the world of Vue Js, loved its power, elegance, low entry barrier, and modernity. I still love it (but I’m a little apprehensive of its latest and greatest version. Deep breath!).

So years go by. I am getting old, the landscape of web development still grows faster than a new baby; if anything, the pace has only accelerated. I look up and around, thinking, “I have to learn React, only because the world is insatiable in its demand.” However shallow my learning might be, I have to be able to build something in React.

Well…

So today is my day. I am recording my learning, step by step, in hope that writing on a blank, virtual wall and the realization of what is right after many missteps will make my memory coherent and thereby allow me to learn a little better. At least a little. Hopefully.

My task at hand is to learn build a simple web app using Gatsby.

Why Gatsby? Because the react guide says, if you’re building a static content-oriented website, try Gatsby.

Day 1

Step Zero: Create a Gatsby App

Start with bare-bone app using Gatsby default starter (assuming you have everything you need installed). Questions? Check out the Gatsby official guide.

gatsby new hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world

Step One: Implement a skeleton

Repurpose the hello-world (I nearly missed, perhaps subconsciously, the o in hello, so that it becomes hell-world) to build your skeleton.

It is simple, though I was stumped about where best to put my images (the answer: the static folder) and how to import it (the answer: just import it as you would with any other components).

Now the skeleton is done. The following step is proof.

Step Two: Add css/scss

This step turns out to be a little more than I want to chew. The main hurdle comes in two folds: 1) I would much rather use sass instead of plain css (so the stylesheet can be a little dynamic, a little less verbose). 2) I have become utterly, hopelessly dependent on the very polished plug-n-play layout and component systems from third parties such as Bootstrap.

Since we are in React, we have to play in a React way. I chose to use React Bootstrap. As React officially recommends:

React Bootstrap is the most popular option that strives for complete parity with Bootstrap

So the chain of library installation and configuration begins.

1. Install React Bootstrap

npm install react-bootstrap bootstrap

2. Install and config sass with Gatsby

npm install sass gatsby-plugin-sass

3. Include the plugin in your gatsby-config.js file.

plugins: [
  {
    resolve: `gatsby-plugin-sass`,
    options: {
      cssLoaderOptions: {
        camelCase: false,
      },
    },
  },
]

4. Import the bootstrap.scss. You may have some of your own custom styles in your .scss files. Import those, too.

@import "~bootstrap/scss/bootstrap.scss";
@import "./index";

5. Finally, import the bootstrap components and layouts and plug in your fledgling web application.

With the stylesheets added, the web app has improved significantly, although it may not appear that way, yet.

I guess that is it for now. My next task is to flush out the layout and add navigation and a few filler sections.

That’s for tomorrow.

Day 2

[Continuing from yesterday]

Saturday afternoon faded into dusk, and the gentle winter snow had long stopped falling. I sat down at my desk, wading ponderously into the world of GatsbyJS.

The business of web building sometimes feels like shopping for parts (mostly for free. Thanks to Github, NPM, the wonderful world of open source projects, etc), then tweaking and twisting and assembling, block by block, component by component.

I also started wondering about Gatsby: what is it? Does it have anything to do with that infamous Great Gatsby guy? What genius(es) created it?

Googled and found a lot of information.

GatsbyJS is a React-based, GraphQL powered, static site generator. It was born in 2015 as a simple way of building fast, modern apps and websites with React. Since its first release in 2017, it has grown spectacularly popular.

Quoting its co-founder Kyle Mathews:

Gatsby adds all the surrounding pieces needed to make you instantly productive building websites. So a data layer to make it easy to pull in data from anywhere, a routing system so you can have pages, an optimized dev & production build setup, a ton of performance enhancements to speed the initial page load & while clicking around the site, and a rich set of APIs which almost 1,300 plugins have been built around.

Whoa. I guess it is a great Gatsby after all.

Anyway, I resumed my Gatsby learning. Task at hand: a layout and a navigation system.

Step 3: The header / navigation

As you can see, my header is standard BootStrap navbar with a few dummy links

Step 4: The footer

Step 5: The layout

The layout is just the header plus the footer plus content.

With that and a few dummy pages (in my case, posts.jsx javascript.jsx)to make the links clickable, the skeleton is up.

Not too bad. I would say.

Complete code (at least so far) can be found at here.