A guide to hosting a static site for free.

Date: 15th February 2019


How I hosted all my static webites for free.

Static site generators like Jekyll have wonderful support for hosting by services like:

And the best part is that they are hosted completely for free! This is news, because most of my clients have had paid for hosting to the tune of about 2500 per year or more for low traffic static sites.

Also for a personal blogs, this is most feasable with the support for jekyll. While it’s true that Jekyll won’t find mainstream apprach as Wordpress, its makes alot more sense for techies who can navigate through its workings.

So..This is my experience with these platforms.

1. GitHub Pages

GitHub pages needs you to have an account (obviously) and basic know how of Git to push the code to the repository.

It can be learned here. Or just google.

GitHub has complete in-built support for Jekyll, it also provides themes out of the box , but it places limitation on plugins. Not all are supported, this makes it tough to use just any theme, because many use unsupported plugins.

The list can be found here .

I wondered why this is the case, and I found out that GitHub build pages on its servers and it didn’t want to compromise it’s security by running unverified ruby code.

But one can still host any site by just pushing the built site from the _site folder.

Now to set up a GitHub page is very simple:

  1. Create a repository and push the Jekyll project, without any errors, preferably :P
  2. Go to the Settings of the repository and in the GitHub Pages section in thed:
    • Source select master branch and press Save
    • Optionally Chose a theme if no code pushed
  3. Then a link will be provided on page refresh in a blue alert to the site.

GitHub Pages will provide you HTTPS too with a link for your site which is in the format https://<username>.github.io/repo-name> . More details here

Now, for adding your domain name two steps need to be taken:

  1. In Custom Domain section of settings , add the custom domain and save. HTTPS isnt supported for it.
  2. Go to domain provider website and add an A record pointing to GitHub Servers. This step is common to Github Pages , GitLab Pages and Surge.

More details on how to do it here.

Now every time you make changes in your local repository and push the code, Github will automatically build and publish the site.

Its pretty convenient, considering that shared hosting needed you to log in to their website or ftp all the files to update it. One command it happens quick.

The advantages that I see are:

The downsides:

I had no worries understanding its workings and I have hosted this site on GitHub Pages too. Since I built this theme from scratch I didnt have any problems with plugins and the subdomains work pretty well too.

All in all, GitHub is a standard and convenient way to host Jekyll sites. It’s suitable to most, but for those who want more control over jekyll builds, there are better options.

2. GitLab Pages

GitLab, even though it sounds like it is tied to GitHub, they both are completely different.

GitLab provides alot more features for hosting a site.

Gitlab has built in CI features. This makes hosting a site a different process as compared to GitHub.

GitLab does not have built in Jekyll builder, but they provide containers where you can specify what softwares you want installed, and automated build scripts will run it.

The advantage of this, you can run not just Jekyll, but any other static site generator(Hugo,pelican,etc), with whatever customisations you can think of. For example you can specify the ruby version , bundler commands to build gems, and custom plugins , and pretty much anything.

I’m not going to provide steps to set up a site using this, because it is not as simple to set up reading just this post, i’d like to recommend checking out this complete tutorial by GitLab.

The advantages I see of using GitLab Pages are:

But it also has a few significant disadvantages:

So, while it has more features than GitHub and covers its disadvantages, it is not ideal for use for a personal blog for me. It is because my Jekyll themes dont need plugins and the CI and Pipelines system is just overkill. The slow build times are not favourable.

But GitLab Pages is an ideal choice for people who want private repositories and full control over the builing of their project. For those running sites using other SSGs like Pelican, this is perfect.

3. Netlify

Netlify claims to be an “All in one platform for automating front-end projects” and from my experience it delivers on this.

Unlike GitHub and GitLab, which provide hosting sites as an auxillary service, Netlify is built to do just that.

Netlify lets you set up multiple sites and allows you to push code from either your repository on GitHub/Bitbucket/GitLab or directly from your machine using their CLI. It aims to be a one stop shop for all you will ever need to host your site with DNS panel and protection, HTTPS and build process customisation.

The really cool feature they provide is DNS management. You need to point your Nameservers to Netlify’s and you can manage your Domain in the dashboard. It provides DDos protection and free HTTPS by Let’s Encrypt. Netlify also has a CDN which you can take advantage of to deliver your site quickly.

Here is the complete tutorial for deploying sites using Netlify.

Lets get down to the advantages:

But Netlify isn’t perfect:

For many who use GitHub/GitLab with Cloudflare, like me, Netlify seems to be an ideal solution. But the product isnt as good as Cloudflare and is very buggy.It is frustrating to fixs Id recommend sticking with the former. The idea is brilliant, but ill wait till they fix these issues.

Netlify is ideal, on the other hand, for those who want to host static sites without DNS and HTTPS. The CLI is perfect to push sites for HTML5 sites. The CDN support is good, I cant comment on DDos protection though, I’m not very experienced in security.

4. Surge

Surge is a command line tool, made with NodeJS which is used to host static sites on Surge.sh CDN quickly with zero hassle.

Surge was made to publish HTML, CSS and JS projects quickly, made for front end developers, and it does.

It is the fastest I have seen , the sites are updated as soon as pushed.

Setting up sites on surge is very simple too. Just install the tool like this (requires nodejs installed):

npm install --global surge

On typing surge for the first time in the terminal in the project directory, will ask you to create an account . After that this command will publish the site, in just 6 keystrokes!

By default, surge will give you interesting urls like:

https://three-week.surge.sh
https://hypnotic-shop.surge.sh

For those using SSGs like Jekyll, Surge can be run in the _site folder or equivalent, where the built site is stored locally.

The Surge.sh docs can be found here.

Advantages:

Disadvantages:

Surge is perfect to host HTML5 sites quickly without alot of hassle, just from the terminal. I use it to host 2 of my blogs, even though they are in Jekyll and use GitHub, by running surge in the _site folder.

I highly recommend this for beginners or those who dont want to put in alot of effort in configuring things. It is my favourite amongst the above.

Cloudlfare

Cloudflare is an online service which gives services like:

It is used by many sites and they provide a free plan which is perfect for personal sites.

The Free HTTPS support for Cloudflare is the best, it will redirect all HTTP requests to HTTPS, provide all static assets via HTTPS too.

It is important to know that the HTTPS is from User to Cloudlfare Server only, not from Cloudflare to Origin (Server). But it still acts as a front to prevent DDoS and enables IP blocking.

Cloudlflare improves site speed by:

A tutorial for Cloudflare with GitHub Pages can be found here . The other services can be configured in a simiar way.

Setting it up is easy too:

  1. Point Nameservers in GoDaddy to cloudflare NS provided on site creation in their panel.
  2. Just changig DNS records in their panel.
  3. Enabling options as required ..

I recommend usage of Cloudlflare seperately with any of the above services like GitHub etc. It is convenient and very reliable.

All my sites are served by Cloudflare, with either GitHub Pages or Surge. But I recommend one to try all and figure out what suits best.

In this day and age, it is very convenient to set up websites for free and we should try to put the services available to us to best use.


← Previous Post

© Abhishek Balam 2019

Source code.