The Great Gatsby Tutorial

What Is Gatsby?

Gatsby is a static site generator. That means you can build your websites without the need to maintain a server or database. You develop your website locally on your computer. When you are ready to publish your site you make a static build which you then can push to a web hosting service. That still sounds complicated, but it is not. At least it is easy with this tutorial :)

Why Is Gatsby So Great?

Gatsby is the best static site builder out there for a couple of reasons:

• It utilizes JavaScript and React
• Great ecosystem of starters, plugins and deployment options
• Awesome development experience (hot reloading et cetera)

What Types Of Sites Can You Build?

• Blogs
• Landing pages
• Personal profile pages
• well, almost anything

I use Gatsby mainly for blogging. But I also used it to build a Coming Soon page and landing pages for my mobile applications.

What Do You Need To Build A Site With Gatsby?

To build a website with Gatsby you need …

• a computer running macOS (Linux and Windows should work as well, but expect some bumps along the road)
• basic knowledge of JavaScript
• Node.js and NPM installed on your computer

You can use the following commands in Terminal to see whether you already installed Node.js and NPM:

node --version
npm --version

For this tutorial I am using Node.js v8.9.1 and NPM version 5.6.0.

Install GatsbyJS

Installing GatsbyJS could not be more comfortable. Just open the Terminal application and execute the following command:

npm install --global gatsby-cli

If you already installed Gatsby and want to update the package to the latest version you can use the following command:

npm update --global gatsby-cli

When all worked well, you should be able to execute the newly installed gatsby command. Let's try this by calling gatsby and asking it for the version:

gatsby --version

For this tutorial, I am using version 1.1.28 of the Gatsby command line interface. You should see something similar.

Development

Now that we have Gatsby installed we can start to work on our first Gatsby project. Starting a fresh project couldn't be easier:

gatsby new my-shiny-project

The above command will create a new folder named my-shiny-project and clone one of the Gatsby starter projects into this folder. Because we have not given a starter project, Gatsby will use the starter project named gatsby-starter-default. This info will is printed on the screen with lots of other useful information.

info Creating new site from git: git://github.com/gatsbyjs/gatsby-starter-default.git
…

When all went well, you should see a done message printed in the terminal. Something similar to Done in 104.37s.

Now we can change the directory and start the development server:

cd my-shiny-project
gatsby develop

The develop command will start a development web server locally on your computer at port 8000. So, if you open your favorite browser and navigate to http://localhost:8000/ you should see this:

Awesome, isn't it. Now let's try something which is not only awesome but balla. Open the file my-shiny-project/src/pages/index.js. You will see the index page of your newly created project.

import React from 'react'
import Link from 'gatsby-link'

const IndexPage = () => (
  <div>
    <h1>Hi Steemian</h1>
    <p>Welcome to your new Gatsby site.</p>
    <p>Now go build something great.</p>
    <Link to="/page-2/">Go to page 2</Link>
  </div>
)

export default IndexPage

Now, change the following line …

<h1>Hi people</h1>

… to this:

<h1>Hi Steemian</h1>

Then save the file while watching your web browser.

You will see the browser update instantly! You do not have to reload the page. Gatsby will detect the change and update accordingly. Automatic updates are a huge time-saver during development. Hot-reloading is just one of the many reasons I love Gatsby.

Another thing you should try with your new page is to click on the Go to page 2 link. Did you notice anything? There was no page reload. Gatsby feels like a single page application. Your website visitors will love it.

Publishing

At some point, we want to publish our new website and show it to the world. Publishing is something you can do in a jiffy with Gatsby. It is a two-step process:

1. Build the static site
2. Deploy the built site to a web hoster

Building

Stop the development server in the Terminal if it is still running. Do this by pressing ctrl-c.

Now ask Gatsby for some help:

gatsby --help

The gatsby command will print the help for four commands: new, develop, build, and serve. We already know the first two commands. Now, let's try the remaining two.

gatsby build

This command will build the production JavaScript bundles, CSS, and the static HTML for your pages. Gatsby will put all of these files into the public folder. Now you have a folder you could copy to your web server and show it to the world. But first, let's use the last Gatsby command to serve the site we just build:

gatsby serve

The above command serves our production build locally. Which is an excellent opportunity to check whether everything is working as expected. You should do this every time before you deploy your site to a hoster.

Deploying

Now to the second part of publishing your website: deployment. This section is somewhat opinionated. I used several static web hosting services in the past. All of them worked, and I mostly had no complaints. surge had been great in the beginning. Then I tried Aerobatic, which was a good option as well. I also tried Amazon S3 which worked well but was cumbersome to set up.

Today I do all of my static hostings on netlify and have never looked back. It is, in my opinion, the best option. (I',m not affiliated with netlify. I'm just a happy customer.)

Installing Netlify

You can install netlify just like you installed gatsby:

npm install --global netlify-cli

This package installation will give you a new command netlify. Let's see what version you just installed:

netlify --version

I have version 1.2.2.

Now, you can deploy the website we built above with the following command:

netlify deploy

Netlify will ask you if you want to create a new site, which you should answer with Yes. When asked for the path to be deployed, just enter public. Netlify may ask you to authenticate first. If you are authenticated it will deploy your site and will give you a link to the live site.

This is what netlify gave me when I deployed the sample site:

http://ecstatic-blackwell-92a3e9.netlify.com

That was easy, wasn't it?

Conclusion

Static site builders are not new. There are a lot of builders for many different programming languages. But in my opinion, Gatsby is the best choice at the moment; especially when you know JavaScript and React.

Best,
Jo (@cutemachine)

---

Posted on Utopian.io - Rewarding Open Source Contributors

---