How to Deploy Your Static Site for Free
A quick tutorial using Netlify and Buddy
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:
To get started, you’ll first need to install
gatsby-cli and create a basic project:
npm i -g gatsby-cli
gatsby new my-blog https://github.com/gatsbyjs/gatsby-starter-blog
If you want to run the project locally, use
npm start. This will launch your project on port
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.
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.
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.
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 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
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.