JavaScript

GatsbyJS Part 3: Site Layout and Basic Component Creation

Part 3 starts with cleaning up some of the files and folder structures created from the starting template. Then we move on to editing the header component followed by creating a new footer component that will be used across the site.

Along the way, we create some basic CSS with horrible colors so we can clearly see what is going on with the areas defined in the components, I often use this technique to test placement and get a visual feel for the page structure during early development before moving on to the proper (nice) design.


Tools used
– NodeJS
– GatsbyJS

Part 1: Overview and install
Part 2: Site and file structure

GatsbyJS Part 2: Site and File Structure Overview

In part 2, we take a look at the site/folder structure of a GatsbyJS site. I’ll explain what the folders are for along with an overview of the files in a starting Gatsby site. By the end of this video, you will have an understanding of how a site is created and how components play a part in generating pages.



Tools used
– NodeJS
– GatsbyJS

Part 1: Overview and install
Part 3: Site layout and basic component creation

GatsbyJS Part 1: Overview and Install

I recently started looking into Gatsby. Gatsby is a static site generator that builds amazingly fast Web sites due to the content being mostly HTML, JavaScript, and CSS. Now, do not make the mistake of thinking that this in any way limits you, it is actually the opposite. Because the content is generated and then put on the server users visiting your site get a very fast page load time and you get the benefit of not having to worry about any backend services or site exploits.

This first video will walk you through what Gatsby is, how to install it locally and then generate your first Web site.

Tools used
– NodeJS
– GatsbyJS

Part 2: Site and file structure
Part 3: Site layout and basic component creation