Tyler Knapp

Deploying a Gatsby Starter With Netlify

July 29, 2019

GatsbyJS

Your blazing fast, static site is only a couple of clicks away. .

As a part of the curriculum here at the Flatiron School in NYC, we are required to blog regularly. Having played with Gatsby and Netlify in the past, I thought it would be fun to use one of the Gatsby starter’s for my blog site.

What is Gatsby?

Gatsby is a React based, GraphQL powered static site generator. Gatsby sites comes standard compiled with popular Javascript libraries and tools like React. These libraries and tools combined with static files combine for incredibly fast page loads, server-side rendering, intelligent image loading, asset optimization, and data prefetching. Gatsby is fairly young (launched in 2015), but has some seriously helpful documentation, templates and plugins. The documentation walks you through the standard “Hello, World” tutorials in React through querying data with GraphQL.

What is Netlify?

Netlify offers hosting and serverless backend services for static websites. Some of the platform’s popular features are continuous deployment from Git across a global application network and serverless form handling. Netlify also offers a simple to setup Content Management System for your site.

Gatsby Starter Store

A couple of clicks . .

Within the Gatsby Ecosystem, you can browse the hundreds of plugins and starter templates that other gracious developers have built and shared for for free use. The starters range from barebones templates to fully functional templates that can be deployed and connected to a CMS within the hour. After browsing the catalog of starters and finding a template that fits your needs, open the starter’s github page, fork the starter then within your terminal enter the following

Install Gatsby CLI

A Convenient CLI

The team at Gatsby has created a CLI with an array of really convenient commands. Now that you have Gatsby’s dependencies downloaded, you can create a new project with one quick command.

Gatsby New Project

Want to launch a dev server and see your new project? Change directories and within your terminal enter the following command.

Gatsby Live Server

Just like that. You have your dev site in browser with the ability to hot reload and see your edits in real time.

Diving in

Project Directories + Files

We want to make this project feel like its ours, but starter projects can be pretty intimidating to navigate. For this specific example, we want to modify the project’s metadata and write this blog post. Luckily, the creator, Kyle Matthews, of this starter blog has made it extremely easy to update the metadata + data that pulls into the project’s components such as author.

Starter's Metadata

We want to modify the site’s metadata because several components pull directly from this config file which populate the site. Examples:

Index File Example

Diving deeper into components, here is another example of how the site’s metadata is being used. Within the bio component, author is being populated with the site’s metadata.

Home Page example

The power of setting up components in this way is that they are reusable. The title and author datapoints can be used across the site and within any component.

Now to build a blog post

It is very important to take some time to look through the directories and ‘play’ with the files to see how everything is interconnected. The blog posts for this starter live within the content directory. After reviewing the three blog posts, you can discover some common themes. The blog post content is written in Markdown and pulled into the blog post components. In the three blog posts the creator provided, he includes everything you need to know, format-wise, to build your own posts.

Blog Post Example

Once you are ready to show off your starter site, you can open your terminal and enter the following command and Gatsby will perform an optimized production build for your site, generating static HTML and per-route JavaScript code bundles.

Gatsby Build

Now it’s time for the magic. Push this up to your blog’s repository then head over to Netlify. After you have signed up / logged in on Netlify, hit the new site button from Git, follow the three step instructions and deploy your new blog to the internet.

Netlify Home page Netlify Repo from Netlify Repo from

Now sit back and watch the magic . .

Netlify Repo from

& welcome to the internet.

Netlify Deploy Success

Shout out to all of the teams @ Gatsby, Netlify and any other engineers who set out to make all of this so much easier for everyone to learn and get involved. —>


Tyler

Tyler is a recent graduate of Flatiron School's immersive software engineering program in New York City. You should check him out on Github.