Deploying a Gatsby Starter With Netlify
July 29, 2019
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?
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.
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
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.
Want to launch a dev server and see your new project? Change directories and within your terminal enter the following command.
Just like that. You have your dev site in browser with the ability to hot reload and see your edits in real time.
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.
We want to modify the site’s metadata because several components pull directly from this config file which populate the site. Examples:
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.
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.
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.
Now sit back and watch the magic . .
& welcome to the internet.
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. —>