How to Host Static Sites for Free with an Automated Pipeline

July 28, 2020

Did you know that you can host static sites for free on a number of high-grade services? This doesn’t just save money, but also means you’re deploying to globally distributed CDNs and automating processes.

Provided: Netlify

In a previous article, we reviewed 100 Jamstack tools, APIs and services to power your sites, which included a lot of hosting services.

In this article, we’ll get hands-on and show you how to host static sites with an automated pipeline for deployment.

Does this sound complicated? It’s easier than you’d think.

Free Cloud Hosting, but with Strings Attached

You can actually host websites for free — even dynamic ones — with the AWS Free Tier (Amazon Web Services), the GCP Free Tier (Google Cloud Platform) and Windows Azure (with some workarounds).

But when you go to give that a try, you’ll come across a number of conditions, fine print considerations, and implementation constraints:

how much computing power do you need?
your credit card number, please?
where do you want to deploy to?
is your account brand new?
and not older than 1 year?
actually, what services?

Often this is more a tryout than an actual freebie (hence the reason why AWS Amplify Storage is not included in this list). And while some power users might take advantage of the goodies, if you aren’t well acquainted with these platforms beforehand, you’ll find out that the learning curve to start using these services is very steep, and that for every cloud service you intend to use you’ll need to find out first in which way each provider reinvented the wheel before you can actually spin it into any free deployment.

Let’s see now how a handful of smaller players rose to prominence with free hosting services that aren’t a hassle to implement and have fewer strings attached.

Cloud Deployment Was Hard – Then Came Netlify

Netlify — the company that coined the Jamstack term — launched in March 2015. In its short time in business, it has put a lot of effort into delivering on the promise of being the “the fastest way to build the fastest sites”.

Netlify Drop

Netlify literally developed a drag-and-drop service with this premise:

Drag and drop a folder with your site’s HTML, CSS, and JS files. We’ll publish them live and give you a link to share it.

You don’t even need a Netlify account! It doesn’t get any simpler than that. And you get these features right out of the box:

free HTTPS
worldwide deployment to Netlify Edge, a distributed multi-cloud CDN

And there’s more:

you can claim the site (at which point you do need an account)
attach a domain to it for free (also with free HTTPS)
take it further with the Netlify Workflow, Functions and more

Automated Deployments

If you in fact get an account, you’ll find that linking a GitHub, GitLab, or Bitbucket repository for automated deployments is dead easy.

The way this works is very simple: you commit changes to your repository, Netlify gets notified instantly via webhooks, and it immediately deploys those changes online. That’s it — no credit card, and no fine print that will hit you later (that I’m aware of). Should anything go wrong with a deployment, no worries: you’ve got one-click rollbacks available right on the web interface!

And this workflow, easy as it is to implement, is very much in tune with the continuous integration and continuous delivery (CI/CD) pipelines that gained traction among the DevOps practices that are so in demand these days.

GitHub Pages and GitLab Pages

If you didn’t know by now, you can host static websites for free, straight out of your repositories in GitHub Pages and GitLab Pages.

Both GitHub Pages and GitLab Pages are very easy to use. Just follow these guidelines:

Have a Dynamic Site? Make It Static!

Turning dynamic sites into static HTML/CSS assets, which results in huge gains in speed and security, is a rising trend in web development. And with the proper tool set, it makes deployment a lot easier. We won’t cover the process here, but you can check our article on turning WordPress into a static site for a 10x gain in speed for a primer.

As an alternative approach, you could create an automated pipeline to turn a set of static assets into something that would pretty much behave like a dynamic site. For example, you could push Markdown files to your repository and automatically build these into a web page to get it deployed to your website. How? Jekyll.

GitHub has a good set of tutorials to this end: Setting up a GitHub Pages site with Jekyll.

Also check these guides:

Comparing

Users have complaine about GitHub Pages being extremely slow, sometimes taking as much as 20–30 minutes to just deploy a handful of HTML files. Navigation can suffer from performance issues, with a latency as high as five seconds. This is really odd, considering GitHub Pages uses (or should be using) a CDN. (See Faster, More Awesome GitHub Pages).

And while some of these issues might have been addressed by Microsoft (GitHub’s parent company), in general the number and quality of free features offered by GitLab is insane.

	GitHub Pages	GitLab Pages
Static site generator (SSR)	Jekyll	Gatsby, Jekyll, Hugo, Middleman, Harp, Hexo, Brunch, and more
plugins support	no	yes
Build configuration	Travis CI	Travis CI
HTTPS support	partial/buggy	yes, incl. custom domains

Heroku

Heroku is a very interesting case as, unlike the aforementioned providers, it allows free hosting of dynamic sites, also with a strong focus on continuous integration and continuous delivery.

Heroku uses a proprietary lightweight container technology called Dynos to run apps, and because your environment will be containerized (see Understanding Docker, Containers and Safer Software Delivery for more information) you can effectively deploy your app in virtually any programming language — such as Python, PHP, Node.js, or plenty of others). You can also integrate it with a PostgreSQL or Redis database … and even with a “Kafka-as-a-service“!

Heroku’s flexibility means that the service isn’t as easy to use as Netlify. But it’s nowhere near as difficult as AWS, GCP or Azure. In fact, if you’ve already used containers before, you might find your way around Heroku in no time.

The Catch

Yes, there’s a catch here: your app will “sleep” after 30 minutes of inactivity. So if your site goes idle (no visits) for a short while, Heroku will put the resources assigned to run your web app on standby until the server gets a new request.

If you wanted to show your app to a colleague or client, chances are that the latency (the time it takes for a request to get served) when you first hit the page will be huge, as resources will need to be allocated again when the app “wakes up”. After that — as long as it remains active for at least 30 minutes — latency should be normal.

As a result of this resource-saving mechanism, this freebie is good for testing ideas online, but not really suitable for anything else.

Firebase Hosting

Google Firebase, the cloud suite for mobile, web and Unity development, also ships Firebase Hosting.

You can use the service for free up to 10GB of storage and 10GB of data transferred per month*, including free SSL certificates even for custom domains and support for multiple sites per project. That’s quite good!

Deployments

Unlike Netlify, deploying with Firebase Hosting isn’t as straightforward. Firebase doesn’t read the webhooks out of your repository for a transparent CI/CD pipeline. Instead, you’ll have to use the command line interface tool, Firebase CLI.

From the Firebase documentation:

Install the Firebase CLI. The Firebase CLI makes it easy to set up a new Hosting project, run a local development server, and deploy content.

Set up a project directory. Add your static assets to your local Hosting project folder and set up Cloud Functions or Cloud Run for your dynamic content and microservices. You can then test your site locally by running firebase serve.

Deploy your site. When things are looking good, run firebase deploy to upload the latest snapshot to our servers. New versions are released all at once, so you’ll never have to worry about half-finished deployments. But, if something does go wrong, you can roll back with one click.

Link to a Firebase Web App (optional). By linking your site to a Firebase Web App, you’re able to use Firebase Performance Monitoring to gain insight into the performance characteristics of your site.

Just a bit of setup, but it isn’t difficult either. Here you can check out the full documentation for deployments.

Free Hosting Is Fun, but What Do Companies Get Out of It?

You need to consider that these companies already have a massive infrastructure in place and we’re mostly talking static assets that need no preprocessing during runtime. So the overhead to run these static sites is small. This contrast is best demonstrated by Heroku with its dynamic support — it saves resources when sites are idle, which for small sites is most of the time.

And companies also get something out of it: spotlight! You might come for the free beer but if the venue and the menu are appealing enough, you might as well stay and pay for dinner when the time is right.

Conclusions

There were some companies offering free plans that we didn’t get to cover, like Surge and Vercel (formerly ZEIT Now), both of which are Jamstack-oriented much like Netlify. But hopefully you’re getting a lot more than “free hosting” out of this article: when you’re implementing a deployment pipeline, you’re really taking your workflow to the next level, as you automate processes that are tedious, prone to painful mistakes, and quite often cannot be reversed (i.e. overwritten files on FTP).

And who doesn’t like free hosting? But again, there’s more to it when you’re also deploying to CDNs worldwide and making your site blazing fast all over the world

So, you can pretty much forget about paying to host a static website for many of your projects, and power up your workflow in the process. Lucky you! 💥

Jamstack Foundations

Get up to speed with the Jamstack. Our Jamstack Foundations collection helps you take your first steps into the Jamstack and beyond, and we’re adding to it constantly. We’ll bring you the tutorials you need to become a pro. You can always refer to our index as it’s updated at the end of our Introduction to the Jamstack:

➤ Jamstack Foundations