Go back

Running a website for free using Gatsby and Netlify

January 05, 2019

Well, maybe you need just enough to buy a domain.

The first thing that comes to mind when talking about blog sites is WordPress, but I find it slow, and tedious for something so simple, and it also needs hosting, which isn't free. It didn't fit the description, and neither did Drupal and other similar CMS.

I wanted a fast, developer friendly, free, and customizable solution. I'm a cheap guy, so not paying for anything that I can do myself is a plus.

Yeah, but what are you using?

Jeez, OK. TLDR: The site it's built with Gatsby.js (which runs on React) for templating, Netlify CMS to manage my content, and Netlify for hosting the site. My site is stored in a public GitHub repository, so feel free to snoop around.

Gatsby.js

Gatsby.js is fast, developer friendly and customizable, but the best part it's the people behind it. It's open source, and there are lots of community made templates and plugins that make your life easier. I like to reinvent the wheel so my layout is custom made.

WordPress (and similar CMS) run your code every time your site is requested. Static site generators, on the other hand, only runs your code when the build runs. Because of this, static site generators just need a place to store the static files

There's quite a few of static site generators. 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 Content Management System.

It does what the name says: it helps you manage your content, be it posts, your portfolio works, your cat pictures or just whatever really.

Now headless doesn't mean that it runs around searching for it's head, it means that it runs detached from the templating system. Netlify CMS works by generating and handling your content in static files and storing them in a Github repository.

Thanks to that, you can use it with any templating system that can handle markdown files.

The fast way

I spent a while creating my custom template, but there's a 15-30 minutes way to get started really quickly.

  1. Check out the Gatsby Starters with Netlify CMS (I really like this one)
  2. Find one you like and click on "Try this starter: Netlify".
  3. Log in with GitHub
  4. Create a repository for your site
  5. Netlify will automatically deploy your site
  6. That's it. Now tinker with the code and break stuff.

Any change pushed to your repository will trigger a build to Netlify, which will update your site with the changes made. Including those made through your NetlifyCMS admin dashboard, located at yoursite.com/admin,

Keep in mind that builds can take a few minutes to finish.