Go back

How am I running my website for free using Gatsby.js

January 05, 2019

Objectives

I wanted a fast, developer friendly, and customizable solution. Not paying for hosting is a plus.

The first thing that comes to mind when talking about blog sites is WordPress, but I find it slow, and tedious. It didn't fit the description, and neither did Drupal and similar CMS.

Yeah, but what are you using?

Jeez, OK. The site it's built with Gatsby.js, which uses React, Netlify CMS to manage my posts, and Netlify for hosting. My site is in a GitHub repository, so if you wanna check how it's built, feel free to do so.

Gatsby.js

Gatsby.js is fast, developer friendly and customizable, but the best part it's the people behind it. It's open source, so there are community made templates and plugins that make your life easier. My site is custom made though.

WordPress (and similar CMS) process your files every time your site loads. But static site generators, only generate your site when changes occur. Because of this, static site generators just need a place to store the files. The processing is already taken care of.

There's quite a few of them. Here's a site that will help you compare them.

Netlify

I needed a free host. GitHub Pages is good but Netlify is way better. It provides free static hosting, DNS, HTTPS, forms, AWS Lambda functions, etc.

Getting started with it is so easy that it doesn't need explanation.

Netlify CMS

A headless CMS, which means this works totally independently from the site itself. You can read more about them here.

This manages your content, whether it's blog posts, images, or delicious recipes. Netlify CMS is Git-based and works great with Gatsby.

Yeah, yeah, but how do I do it?

If you want to get started, the fastest way is checking out the Gatsby starters. Find one you like and click on "Try this starter: Netlify".

It will ask to log in with GitHub to create a repository for your site, which will store your site. Netlify will automatically deploy changes in this repo.

Conclusion.

I've seen these tools working on landing pages, blogs, and shops, and it might not be the best solution in all cases. But, for most cases, it speeds things up, it's cheap (zero cost) and it's also an excuse to use React.