Why Gatsby JS is awesome and how to build and deploy a site in 10 minutes

The last couple of weeks I've been using a lot of hours playing around with GatsbyJS, and it's been a blast!

Gatsby is a static site generator that is using React as its templating language.

So if you are into React, this is a match made in heaven!

All the goodies

It's so much to love about Gatsby.

Let me just name drop a few more goodies you'll find in this Gatsby bag.

Since Gatsby is built on React you straight away got all the things we love about React, like composability, one-way binding, resuability and great environment.

Gatsby is also built on top of GraphQL, which allows you to query your data however you want.

Out of the box it's set up with CSS modules, which works great in this stack β€” but if you want another way to handle your styling, it's easy to change by using other templates or by simply changing it yourself.

We also get a super fast hot reload which makes the development experience amazing!πŸ”₯

And all of it is built together using Webpack.

The feel of being productive

Now one thing is that Gatsby covers all the buzz words out there like React, GraphQL, WebPack etc, but what's so cool is that you're up and running in no time!

Being productive right from the start truly sets the vibes for the rest of the project and is a huge reason why I have been so hooked on GatsbyJS lately.

I've been sitting there just thinking β€” "Aaahh, that makes sense" β€” instead of loads of β€” "WTF is this?" β€” and it's the best feeling!

Ok, that's enough hype, let me instead show you how to build and deploy a Gatsby site in 10!

[0 min] Install Gatsby

The first thing we need to do is to install the Gatsby client. This is what we'll use to create our site.

npm install --g gatsby-cli  

[2 min] Create our Gatsby site

Now that we've installed the Gatsby client, we can use it to create our Gatsby page. Let's call it my-gatsby-app.

gatsby new my-gatsby-app  
#> (...)
#> ✨Done in 47.02s.

That's it! We now got a fully functional Gatsby site!πŸŽ‰

If we now take a peek inside the project we see a few different directories.

ls -la my-gatsby-app/src/  
#> /components
#> /layouts
#> /pages

Pages

The pages directory contains β€” you guessed right β€” the pages.

Each file becomes one page and the name is based on the file name.

Now the cool thing is that each of these files contains a React component. That's it β€” no magic!

For instance, this is the index.js that was created.

const IndexPage = () => (  
  <div>
    <h1>Hi people</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  

Layouts

What the layouts directory contains is layouts that wrap our pages.

These layouts are higher order react components that allows us to define common layouts and how they should wrap the page.

We can place our page whereever we want within the layout using the prop children.

Let's look at a simple layout component.

const Layout = ({ children, data }) => (  
  <div>
    <Header siteTitle={data.site.siteMetadata.title} />
    <div>
      {children()}
    </div>
  </div>
)

export default Layout

export const query = graphql`  
  query SiteTitleQuery {
    site {
      siteMetadata {
        title
      }
    }
  }
`

As you can see, our Layout component takes two props.

First one is the children prop, which is the page we want to wrap.

The second prop is data. This is actually the data we fetch with the GraphQL query that is in the end of the code snippet β€” which in this example fetches the title from the gatsby-config.

Components

The last directory is components. This folder is where we can put other general components we create.

[3 min] Fire up our newly generated site!

Now that we've created our our Gatsby site and we got a rough idea of what it contains, let's fire it up!

gatsby develop  
#> DONE  Compiled successfully

Fast right? We're now up and running! See for yourself at http://localhost:8000.


[4 min] The super fast hot reloadingπŸ”₯

We got our site up and running locally. Now you can start doing changes and as you quickly will discover, the hot reload works super fast straight out of the box!

[6 min] Push our new site to GitHub

We can continue to tweak our project, but that's not the topic of this post. Let's instead move on to get our new Gatsby site deployed.

The first step is to push our project to GitHub.

First of all, we need to make our project into a git project.

git init  

We then need to create a .gitignore file with everything we don't want to add to git.

echo '.cache  
node_modules  
yarn-error.log  
/public' > .gitignore

Now that we ignore what needs to be ignored, we can stage and commit our project.

git commit -am "init commit"  

Now we need to login to GitHub, create a new repository with the same name, then push our page to the remote repository.

git remote add origin git@github.com:username/my-gatsby-app.git  
git push -u origin master  

There we go β€” we now got our GitHub repository.

[8 min] Deploying the site to Netlify

We've created our site and it's pushed to GitHub, so the only thing left is to get the site deployed somewhere.

There are so many choices to choose from regarding where to deploy our Gatsby site, but the one that just blew my mind was Netlify.

All you have to do is to login to Netlify, select "New site from Git", choose the repository, then hit Deploy.

Then, in about a minute, your site is live!πŸš€

[10 min] Awesome, the site is live! Now what?

Our site is live β€” and that in just about 10 minutes! The feeling of productivity is amazing, right?

But as you can see, our site is really simple. Sure, we got all the different parts to make the development experience amazing, but now it's time to get the actual development started.

First of all I want to mention the great Gatsby documentation. It contains loads of options on how you can make your Gatsby site exactly as you want it.

One thing you'll notice is that the feel of fast paced productivity doesn't stop. All plugins and additions I've added so far have not slowed me down β€” on the contrary it has given me increased feel of productivity compared to other non-Gatsby projects.

Typography.js, CSS modules or any other treat you typically find in a Gatsby project just work wonderfully together.

So find your editor and get started β€” I promise you it'll be a fun and fast paced ride!