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!).

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.

npm install react-bootstrap bootstrap
npm install sass gatsby-plugin-sass
plugins: [
{
resolve: `gatsby-plugin-sass`,
options: {
cssLoaderOptions: {
camelCase: false,
},
},
},
]
@import "~bootstrap/scss/bootstrap.scss";@import "./index";

Day 2

[Continuing from yesterday]

Step 3: The header / navigation

Step 4: The footer

Step 5: The layout

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

Love to learn