How to Deploy Your Static Site for Free

A quick tutorial using Netlify and Buddy

Dominik Tarnowski
May 27 · 5 min read
Photo by Simone Pellegrini on Unsplash

For this tutorial, I will be using React and Gatsby, as it supports some really great features out of the box (like GraphQL, image compression, and progressive web apps). However, you can use pretty much anything you like:

  • Gridsome — uses Vue.js.
  • Nextjs — uses React, even supports server-side rendering and AMP pages.
A basic React blog.

To get started, you’ll first need to install gatsby-cli and create a basic project:

If you want to run the project locally, use npm start. This will launch your project on port 8000:

You will probably want to make some changes to it and then upload the project to GitHub; you can find the link to mine here.

https://netlify.com

Netlify

You can build and host your static site on Netlify for free, although if you do need some better features down the road (like submitting forms, analytics, etc.) you’ll need to pay for the $9/month tier.

After signing in, create a new project and select your Git repository. It will ask you to input commands used to build the project; you’ll need to specify the following:

Once that’s done, press “Deploy Site”. It will generate a random URL for you, like this one.

Yay! So you’ve deployed your static site! Not only that, but it will also rebuild itself whenever you push changes to the repository.

Alternatives to Netlify

Netlify might be a simple, all-in-one solution to things like hosting static sites, but it becomes obsolete once you start considering making other small tweaks to your site.

What if your site also had a back-end written in Go, Java, Nodejs, Python, or any other language of your choice?

You won’t be able to deploy that to Netlify, as it can only host static sites.

https://buddy.works

Buddy

I personally use Buddy to deploy my own site. What is it?

Buddy is a delivery automation platform that lets you build, test and deploy web projects on a push to Git. You can use any language & framework that you like, and deploy it to pretty much any hosting service you can think of.

Buddy also has a pretty generous free tier, and they both claim to be fast, so let’s see which one is faster. First, I’m going to create a new project and link my GitHub repository.

Buddy automatically recognized that we are using React and will automatically select the Node.js Docker image.

When adding a pipeline (simply a sequence of actions triggered by git push), we can then specify how to build the application:

As you can see, there are also server-side solutions for application building, and you can even add your own custom solution by specifying a Docker image to use.

Select Gatsby CLI

You’ll need to make sure you run npm install followed by gatsby build to build your application:

Now you’ll need to specify how the site will be hosted. There are many custom options, including Digital Ocean, Azure, Google Cloud, and AWS.

To keep it simple, as we don’t need to host a server, I’m going to host it with Netlify:

You’ll need to specify the output directory, in this case: “./public”

You can also add custom hooks when your build script fails. For example, I made it send me an email with the error log if it fails to do any of the tasks:

Build performance comparison

Here is how long it took to build the same project:

  • Netlify: 1m 35s
  • Buddy: 36s

I also decided to switch my personal blog (built with Gridsome) to Buddy to see how the build times change:

  • Netlify: 2m 25s
  • Buddy: 35s

Conclusion

These days, you can host your static site pretty much anywhere for free, and using a CI/CD service such as Buddy saves you from having to build and upload it manually; instead, all you do is push your Git repository. If you’re willing to spend a few $ a month, you can even host your own server with a database and run unit tests whenever you make a git push, so that you don’t accidentally mess up your production environment.

I’m currently working on building a simple email subscription service that can be used on static blogs for subscriptions. Follow me if you’d like to see how I’m going to integrate it (hint: CI/CD HTTP GET request on push) and how you will be able to use it on your own blog.

Also, do yourself a favor and host your sites on a custom domain. If you use a site under netlify.app, for example, not only it looks much less professional, but you’re also limiting yourself to using that one single service. Domains are cheap; Google offers domains starting from $10, and they don’t increase in price with each year.

Better Programming

Advice for programmers.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store