A JOURNEY FROM DRONGO TO DEV

> BACK TO ALL POSTS

GatsbyJS - Static Website Generator: Part1 - Getting Started

day

25 September 2018


Last Edited: 26 September 2018

WELCOME TO THE NEW WAY, JUST LIKE THE OLD WAY

What is a static website generator you ask? And why the hell would I want one?

Remember the good old days of web development? We could write some HTML, and some CSS, stick it in a folder and ftp it up to a server...and it would just work? Well, static site generators allow us to build our applications using modern technologies such as React, GraphQL, REST and CSS Preprocessors but when we run the build script it will generate just that, a pulic folder with HTML, CSS and Javascript files.

The advantage of this first and foremost is speed, compare the speed of a simple static site to that of a full blown node application and the difference is night and day, no matter how leet your optimisation skills are.

This is the main reason that I chose GatsbyJS as the basis for Devstache, speed and the convenience of being able to just pick the site up and move it from server to server, being able to deliver the content via CDN, therefore serving it closer to the end user.

So....how do I get started with this Gatsby greatness?

Step 1:

Install your development environment.

We will require the Javascript engine node.js and node package manager, available here:

node.js
npm

Step 2:

Install the GatsbyJS command line interface.

Open the terminal and type:

npm install --global gatsby-cli.

Step 3:

Lets create our first project!

Inside the terminal, type the following, where project-name, is the name that you want to call your project.

gatsby new project-name

This will kick-off the installation process, where gatsby cli will create all of the template files and install all of the dependencies.

Screenshot 2018-09-25 at 20.16.35

Step 4:

Navigate to your project directory within the terminal

And type:

gatsby-develop

This will do a few things, firstly it will run eslint, to ensure there are no errors in your code, and secondly is will start local development server, available at localhost:8000 by default.

Screenshot 2018-09-25 at 20.17.34 Screenshot 2018-09-25 at 20.17.39

Step 5:

That's it!! Open your browser and navigate to localhost:8000 to see your shiney new website in full glory!

Screenshot 2018-09-25 at 20.23.07

Now we have this site, how on earth do we delpoy it? what are our options? I will cover this part next.

Part 2