Weekend Hack: Building a GatsbyJS blog and deploying it with Netlify
This post is the second on the Weekend Hack series, a series of short development stories focused on the exploration of new concepts/approaches. Set-by-step instructions and repository links will be provided for a more fundamental understanding.
The article will be divided into three main sections: introduction, stack choices, and step-by-step setup.
Intro
Nowadays, most of the small business, startups, digital-creators, freelancers, and makers heavily relay on the visibility provided by the web. Even if their core business is not directly related to the web, they benefit from using the web as a platform.
They are many ways of creating websites, with different levels of complexity and cost. In this tutorial, we will focus on creating a static site. This is one of the most common approaches, as it is quite easy to create and there are plenty of hassle-free hosting options available.
Stack Choices
When it comes to building and managing websites, there are several alternatives: Shopify (e-commerce), Weebly (both personal and e-commerce), Ghost (online publication), Wordpress (general and extensible), GatsbyJS (pluggable static site generator), Joomla… you name it.
With regards to the user base, Wordpress still stands out as the undisputed king. According to various stats, it powers around 35% of all the webpages. This CMS(Content Mangement System) uses PHP to connect to a MySQL instance where all the data is stored. While you can build pretty much anything with vanilla Wordpress and its plugin ecosystem, it has some disadvantages.
In this episode of Weekend Hacks, we have chosen GatsbyJS to build our blog. It addresses the issues mentioned before and generates high performing static websites.
GatsbyJS static sites that can be served from CDNs and feed data from a range of varied sources: APIs, CMS (Wordpress, Contentful, GraphCMS…), markdown, databases, CSVs… GatsbyJS apps can also be extended with plugins, and the data is accessible using GraphQL. How cool is that? I will further expand on the goodies of GraphQL on another Weekend Hack story.
Well, now that we have settled for Gatsby as the builder for our webpage, we need to decide how to manage the content, and how to deploy and host our webpage.
When it comes to content management, we will use markdown files. The blog posts will be generated from files stored in our GitHub repository. As mentioned before, GatsbyJS allows powerful data integrations, that we will explore in further Weekend Hack episodes.
There are many alternatives out there for deploying and hosting static sites. We settle for Netlify, which offers a generous free plan, custom domain, GitHub integrations, HTTPS, CDN…
Step-by-step setup
Let’s dive into the fun part!
1. Setup the local dev environment
First, we need to set up our local dev environment. Follow the setup steps as in here. Make sure that Git, Node, NPM, and GatsbyJS are installed. We will use the same setup environment in other GatsbyJS tutorials. It's not required that your versions match exactly with mine.
2. Create the repository and setup deployment
Once the local dev environment is set up, we will create a GatsbyJS project from the blog starter. This starter provides out of the box support for analytics, automated image optimization for blogs, RSS feed support, code highlighting…
The awesome maintainers of this starter also provide a One-Click Netlify Deployment option, which we will use to set up the GitHub repository and create a Netlify project. Awesome, right?
Select the link above, log in into your GitHub account and complete the steps by giving a name to your Netlify app. As part of the One-Click Deployment, Netlify also creates a GitHub repo with the code (my repository link). We can access the deployed app through the automatically created link (my app’s link). Your Netlify control panel will look similar to the image below.
3. Connect custom domain
Now that we have the starter blog deployed with Netlify, is time to connect it to a custom domain. There are multiple domain providers, some paid and some free. For this tutorial, we will use a free domain provided by Dot.TK. Feel free to use other domains purchased through other providers, as the process will be very similar.
Netlify’s getting started section provides a shortcut for setting up a custom domain. Follow the steps by adding your custom domain name.
Once added, we have to set up the DNS so our Netlify app gets served through the custom domain. In order to do so, we can either add a CNAME record to our DNS pointing to Netlify or use Netlify’s managed DNS. In our case, we will use Netlify’s managed DNS, which can be configured through a wizard in the main control panel.
Access our domain provider, and modify the nameserver so it points to the Netlify servers. The configuration will look similar to the image below. After that, we should wait up to 24h (it usually takes much less time) so the changes propagate, and we can access our Netlify app through the custom domain: https://gatsbyjsnetlify.tk/.
4. Customization
Perfect, so we now have our blog hosted on Netlify up and running, connected to a custom domain. It feels great, doesn’t it?
In the next week’s Weekend Hack we will dive deep into the insights of GatsbyJS by extending the starter to match our own theme, adding analytics, and much more. Feel free to fille around with the blog until then. Stay tuned for next week’s post!
Resources
- GitHub repo with the code → https://github.com/aperkaz/gatsby-blog-in-netlify
- Netlify link → https://www.netlify.com/
- Free TK domain provider → http://www.dot.tk
- Running blog → https://gatsbyjsnetlify.tk/
