How I put up my complete site for free.

A guide to hosting a site for free.

21 February 2018

Hosting Meta


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

  • GitHub Pages
  • GitLab Pages
  • Netlify
  • Surge

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:

  • Integrated with GitHub system : Version Control, Project Management (With Trello like board) and Wiki All in one place .
  • Free hosting forever
  • HTTPS for github urls
  • Git VCS
  • Plenty tutorials, help on forums for support
  • Custom Domain and Subdomain support

The downsides:

  • All repos are public(unless pro) and hence cant keep any sensitive data
  • No HTTPS for custom domain
  • Build time is significant and there are limits to number
  • Need to understand Git
  • Limited Plugin support for Jekyll
  • Native support for only Jekyll among static site generators

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:

  • Unlimited free private projects
  • Using Git VCS
  • Free Hosting forever
  • Customisation with use of plugins of choice. Just add them to the Gemfile and add to the .gitlab-ci file .
  • Support for many other static site generators like:
  • Hugo
  • Middleman
  • Pelican
  • Hexo
  • Control over versions of ruby/python and SSGs
  • Custom Domain and subdomain support

But it also has a few significant disadvantages:

  • Slow build process (about a minute, which is alot)
  • Requires familiarity with the Pipelines, CI system and build process optimisation, build fails are common if not configured right
  • Often requires changes made to project files to be made compatible, which can be quite annoying. Like:
    • .ruby-version needs to be added to avoid jekyll install errors (incompatibe versions)
    • Gemfile needed, even if no plugins used
    • For static sites, files need to be placed in public folder
  • Changes not reflected quickly
  • Gitlab experiences downtimes sometimes

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:

  • GitHub and GitLab integration
  • Build site customisation
  • Support for many SSGs
  • Free HTTPS
  • Doman Management is quick, as propogation doesnt take alot of time as compared to default ones used by Domain Name providers like Godaddy.
  • One dashboard to control all aspects
  • CLI client
  • Good CDN means faster loading

But Netlify isn’t perfect:

  • Domain Management console is buggy and is confusing sometimes to set up. Very often some subdomains are not redirected correctly for no reason, even when all records are correct. Default record are a mystery, I didnt understand what do they do, they didnt seem to make any difference. Also Apex site sometimes just couldnt be reached.
  • Build takes some time
  • Requires knowledge of CI
  • HTTPS support is not complete, customisation is minimal. I had issues with redirecting HTTP to HTTPS, which didnt happen , just 404s. Also randomly both stopped working.
  • Almost no support except the offical blog

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:

  • Very quick updation of site
  • Easist to set up and use
  • Publish site in 6 keystroke
  • Custom domain and subdomain support is good with making a CNAME file after pointing the domain to surge .
  • Ability to work in teams
  • Very fast CDN propagation
  • Good documentation

Disadvantages:

  • No support for Git
  • No support for SSGs out of the box
  • No HTTPS support

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:

  • SSL Certification (For HTTPS sites)
  • Domain management
  • Good CDN service
  • Security features for protection against DDoS attacks etc
  • Cache for server is down
  • Analytics on user behaviour

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:

  • Automatic CSS and JS minimization
  • Wordlwide CDN
  • Cache of site

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.