Skip to content
Search
Generic filters
Exact matches only

A-Z Guide To Create And Deploy A Website With GatsbyJS + GitHub + Netlify

Complete guide to build and deploy a blazingly fast and modern website for free (with custom domain).

Thu Vu
Photo by Igor Miske on Unsplash

I created this website for data science/tech blogging and showcase some of my creative projects. It was a rather bumpy learning curve as I had a lot of questions and considerations along the way. Unfortunately, most of the tutorials I found are fragmented bits here and there, so I thought I would want to write a detailed tutorial on this. If you are someone who is not a web developer but has some coding knowledge and wants to build a modern personal website for free (no WordPress or website builders), this post is for you!

The goal of this post is to show you step by step how to create, deploy and configure a simple blog/ portfolio website with your own custom domain name. Let’s get started!

At the beginning I was going back and forth among a few options for my little blog/ portfolio website:

  • coding my website from scratch
  • using Static Site Generators
  • using WordPress/ other CMS.

Below is an overview I created after scouring so many posts and websites. I’m comparing them in the following aspects: (1) flexibility & freedom, (2) performance, (3) knowledge and skills required, (4) security, (5) scalability and maintenance. This will hopefully help you answer the million dollar question of what to choose:

Options for building portfolio website. Source: Author.

After analysing the pros and cons of these options, I decided to go for Static Site Generators (SSG). This is because I can code and want to have more control of the underlying stuff of my website. Also, I just want a simple and neat blogging website, so installing tons of WordPress plugins sounds not super attractive to me.

Specifically, I used GatsbyJS because I’m more familiar and comfortable with JavaScript and React in general, which is the language Gatsby is built on. In addition, it’s an already mature SSG and has great features and plug-in ecosystem. If you are interested in knowing more about other SSGs, here is a nice comparison of the top ones at the moment.

What is a Static Site Generator?

A Static Site Generator is an application that takes content (commonly written in Markdown), applies it to templates, and generates a set of purely static HTML files, ready to be delivered to visitors.

Next, we also need to figure out the other pieces of the puzzle for the website, namely domain name, hosting and deployment. Here’s the setup I have:

Tooling setup. Source: Author.

If you want to make database manipulation more user-friendly (for example, when your website falls in the hands of non-technical users who’ll have a hard time navigating through code repos), you can consider pairing your SSG with a headless CMS such as Contentful. But this is optional, you can certainly still do well without it.

Before building your first Gatsby site, you need to get some installation in place.

#1. Node.js

Since Gatsby is built with Node.js, we need to have it installed in order to use Gatsby. If you are using a Windows operating system, you can simply download and install it to your machine.

#2. Git

We will need Git to download Gatsby “starter”(partially built sites with some default configuration) and version control + host our project later. If you haven’t already had it, you can install it here for Windows.

#3. Gatsby CLI

The Gatsby CLI tool lets you quickly create new Gatsby-powered sites and run commands for developing Gatsby sites. You can use npm to install it globally. Open your terminal and run the following:

npm install -g gatsby-cli

You can also view the available commands that you can use with Gatsby CLI:

gatsby – help

Gatsby provides a lot of (free) prebuilt starters that you can choose from to fit your website’s purposes, including blogging sites, online shop or simple portfolio website. Suppose you want to use this Fiction blog theme, which is open source, you can simply go to the terminal, change directory to the folder you want to store your site and download the code from Git (note that you can name your website folder anything rather than mynewwebsite):

gatsby new mynewwebsite https://github.com/dvzrd/gatsby-sfiction

After the download is complete, you can serve the site with local host using:

gatsby develop

Now, if you go to your web browser at http://localhost:8000/, you should see the website there.

Next, you may want to change the default values in thegatsby-config.js file to suit your personal profile information. You should see a folder with all the posts in markdown file (.md), where you can start creating your own posts! If you are more familiar with React, HTML and CSS, you can also dive into the React components and adjust their appearance, as well as add new dynamic features.

The Gatsby doc and tutorials provide a very good foundation for you to understand and start manipulating a gatsby starter.

In addition, writing posts in markdown is fairly easy. Here’s the markdown syntax documentation for your reference.

Once you’re happy with the configuration and basic features of your new website, we come to the fun part — hosting and deploying your site.

Create a repository on your Github and upload your website folder. Since your Gatsby website folder contains a few subfolders, using Github website and trying to drag-drop your folders into the Git repo might not work. The easiest way, therefore, is to use Git Bash. First you cd into your website folder, then type the following:

git commit -am "Uploading files"

git remote add origin https://github.com/yourUsername/yourRepository.git

git push -u origin master

git push origin master

Now all your files should be uploaded to your Git repo. We are now ready to deploy our site!

In this section, I will explain how to deploy your personal website for free using Netlify.

Netlify vs. Github pages

Note that another free option is to use Github pages, in fact, many people use it for their personal website. It’s a great option as well — simple and straight-forward to get your website up and running. However, in the long run, you may be better off with Netlify because of the additional features it offers. In addition, if you need to scale up your site in the future, there are paid plans for you to choose from.

Here’s a comparison made by Netlify (it can be a little biased but just to give you an idea):

Github Pages vs. Netlify. Source: https://www.netlify.com/github-pages-vs-netlify/

In reality, I’ve seen a few professional developers and coding savvy people using Netlify for their blogs ( here and here). For me, it’s another proof that it’s a good choice for static pages.

It is a cloud computing company that offers hosting and serverless backend services for web applications and static websites. They offer several plans for hosting websites, depending on the size of the project. For a personal website, it’s fine to use the free option.

Deploy your site from Github

First, you need to sign up on Netlify website with your Github account. This will connect your Netlify account with your Github.

You can follow this step-by-step tutorial to deploy your site from Github. Once you are done, you should have an overview like this:

Overview Netlify site. Source: Author.

Note that here I already have a custom domain name (.com). In your case, most likely your site will still have a random-name.netlify.app domain at this stage. You may be okay with this domain name for now, but if you already own a domain, you can certainly configure it to connect to your website.

Using custom domain

To customize your domain name, go to Settings > Domain management > Add domain alias.

Configure custom domain on Netlify. Source: Author.

Once you’ve added your custom domain name, the next thing to do is to go to your domain registrar and configure your domain name. The specific instructions vary across different main registrars, but broadly you will need to configure the following:

  • A-Host: 104.198.14.52 (this is Netlify server IP address)
  • CNAME: [your-website-name].netlify.app (for example, in my case it is thuhienvu.netlify.app)
  • Name server:
    dns1.p01.nsone.net
    dns2.p01.nsone.net
    dns3.p01.nsone.net
    dns4.p01.nsone.net

Make sure you save everything. By now, you should be able to see your website live with your custom domain! Congratulations! 🙂

But wait, you may see something strange on your browser:

Source: https://www.digicert.com/blog/not-secure-warning-what-to-do/

This is because your site is still using HTTP protocol, which is incapable of providing a secure connection. Nowadays, all websites on the Internet have to use HTTPS protocol and data are encrypted when transferred over the Internet (the “S” stands for “Secure”). Traditionally, you will have to buy an SSL certificate for your website. However, Netlify (and also Github Pages) nowadays offers free SSL/TLS certificate.

Scroll down to the HTTPS section ( Settings > Domain management > HTTPS). You can now provision a SSL/TLS certificate for your website with one click. Really simple, isn’t it?

If you see some kind of error appears, it is most likely because it takes some time for the certificate to actually work. You can get yourself a coffee in the meantime, and your website should work properly in no time.

Update your website

When making changes to your website locally, you can view how the website looks locally (at http://localhost:8000/) by running:

gatsby develop

To push your changes to your website, first, you need to commit and push the changes to your Git repo. Afterwards, on Netlify website, go to Deploys tab and click on Trigger deploy > Deploy site button as follows:

Deploy on Netlify. Source: Author.

After a few minutes, your website should be updated with new changes. You can also see the deployment log unfold as the site is being deployed. Here’s a full tutorial if you would like to look up additional details.

I would like to first congratulate you on getting your website live!

In this post, you’ve learned how to:

  • Create a Gatsby website using a starter
  • Host and version control your site with Github
  • Deploy your site from Github using Netlify

You now have your website up and running, version controlled with Git, having your own domain name. All hosted for free! And the great thing is, you are in total control of your website including the code, the appearance and all additional features behind it.

I hope this post is useful. I would love to hear your thoughts in the comment section and how you built your personal website.