From Nothing to Something: Setting up my portfolio fast with GatsbyJS and Netlify

12 January, 2021 - Programming, Web Development

Finally decided to bite the bullet and create my own website. The plan is to document my journey as I work on my personal projects and write some articles, with the overall target of helping others along the way.

The main aim of this post is to give you a short run down on how I set up my website quickly using GatsbyJS and Netlify.

The Dynamic Duo

GatsbyJS

Gatsby is a static site generator based on React and powered by GraphQL.

But Gatsby is more than just a static site generator.

The build process for Gatsby combines all the GraphQL results from queries, HTML, CSS and JavaScript into a bunch of static files. These static files, which includes a JavaScript runtime that "rehydrates" the site into a full blown React application, is what makes Gatsby so fast.

However, there is more! GatsbyJS has a rich number of plugins which are just Node.js packages that implement Gatsby APIs. These enable you to easily add functionality to your site, such as using markdown files for article posts and turning your website into a progressive web app (PWA).

All of these features make it easier to get your own website up and running fast. For me, it was these features and the fact that Gatsby uses React (something I want to learn) which made it an ideal option.

Netlify

Netlify is a serverless hosting platform that works by building and deploying your static websites code from a Git repository (can be from Github, Gitlab or Bitbucket).

This means that Netlify does all the heavy lifting of building your website and distributing it. All you have to do is push your changes to your remote repo. This makes deploying a new version of your website fast, plus the initial setup for Netlify was effortless.

It has all the features you would want in a website deployment platform. You can:

automatically deploy your build on every commit or keep it on a build of your choosing
preview what your website will look like on each build
roll back your deployed build

There are also Netlify build plugins which can be used to add functionality. Something I haven't looked into using myself yet, but seems to have some interesting ones like caching between Gatsby builds to make it faster.

Why did I go for Netlify over GitHub Pages? Well..

More control over deployments, it is one click to roll back to another build. With GitHub, you'll need to mess around with Git and revert changes.
Can use a private repo for free, something you are not able to do with GitHub unless you pay for GitHub Pro.

I'm currently using the free starter tier on Netlify which gives you 100GB of bandwidth and 300 minutes of build minutes a month. So far it seems to be working well!

My Quick Guide

Prerequisites:

You'll need to have Node.js and Git installed on your machine to get started. Some Git knowledge is also required.

Installing and using Gatsby

Install Gatsby.

npm install gatsby

Create your first Gatsby site.

gatsby new my-website https://github.com/gatsbyjs/gatsby-starter-hello-world

There are a load of different starter templates you can go from. I went with the starter-hello-world version as I wanted to go step by step through the Gatsby tutorial to learn about Gatsby and its plugins.

Go to the working directory.

cd my-website

Run your website in dev mode.

gatsby develop

Dev mode runs a server in the background for features like live reloading (seeing changes as you make them) and GraphiQL (IDE for GraphQL).

Now you can access your newly created website at http://localhost:8000/ or play around with GraphQL queries (via GraphiQL) at http://localhost:8000/__graphql.

Push changes to remote repo

This varies based on what Git repository hosting service you use. For GitHub, just create a new repository on their website and add that as your remote.

git remote add origin https://github.com/<username>/my-website.git

Last but not least, define your main branch and push.

git branch -M main && git push -u origin main

Connect the repo to Netlify

Sign up to Netlify if you haven't already.
Select "New site from Git".
Hook up your Git repository hosting site of choice (you'll need to authorise Netlify to access your Git repos).
Pick the repo you want.
Configure any settings required, in most cases you can just leave it as the default.

Once you've done all of this, Netlify will go and start building your site. Once completed, it'll automatically deploy it for you. There you have it, you now have your own website up and running!

If you want to see the same instructions with some pictures, Netlify has this great guide here.

P.S. You can use your own custom domain name with Netlify too, follow this guide for the steps.