How to setup your Jekyll website with free web hosting, SSL, and a custom domain

Free Web hosting for your finished Jekyll project

Since web development has become more complicated, you have to deal with frameworks, task runners, package management, deployment, and vulnerabilities. Sometimes it might be better to use tools that remove complexity for simple websites.

Enter Jekyll. A static site generator that makes it easier for designers and front-end developers to make a simple, fast website. It has a built-in template language and even pre-made themes that are available here, here, and you can find more of them on GitHub.

I think Jekyll is a really good solution for someone who wants to learn more about coding and needs to bootstrap a polished website quickly. It can be the perfect fit for a small project where advanced functionality is not needed. For a more detailed overview about the pros of Jekyll, I’d recommend you to read WebdesignerDepot’s article.

To create your website with this method, you will need to have basic knowledge of the Liquid template language, terminal, git, HTML/CSS, and the Jekyll framework. If you are new to all these tools, there are plenty of tutorials online to learn all of this. Here are some good resources:

Learn HTML/CSS - Travis Neilson’s YouTube channel: https://www.youtube.com/user/DevTipsForDesigners

Basic terminal usage: https://www.youtube.com/watch?v=jDINUSK7rXE

Git version control [Pt. 1]: https://www.youtube.com/watch?v=0fKg7e37bQE

Git version control [Pt. 2]: https://www.youtube.com/watch?v=oFYyTZwMyAg

An efficient guide on how to bootstrap a GitHub Pages site: http://jmcglone.com/guides/github-pages/

Jekyll documentation: https://jekyllrb.com/docs/home/

The template language that Jekyll uses: https://shopify.github.io/liquid/

In this post, I will show you how to setup your finished Jekyll website with a custom domain, free hosting with GitHub pages, and a secure https connection.

I assume you already pushed your Jekyll project to GitHub.

GitHub repository setup

First, enable GH pages. Either name your repository as “{your-username.github.io}” or navigate to the repository settings and under GitHub Pages / Source. Select the master branch. You can find the steps here.

Github repo settings

GitHub will create your website and it should be visible by going either to {your-username}.github.io or {your-username}.github.io/{your-repository}, depending on the type of method you chose earlier. Test your website by going to the URL.

GitHub provides a Ruby gem that you will need to add to your Gemfile. The Jekyll documentation provides instructions here on how to do it under “The github-pages gem”.

Afterward, go back to GH Pages settings and enable the custom domain option by typing in the domain you plan to use.

Github repo settings

Be sure to add a CNAME file in the GitHub repository root directory with your domain in it e.g. yourwebsite.com

CNAME record

All that’s left to do is to connect your custom domain to the GitHub repository.

Connecting your domain to Cloudflare

Purchase your desired domain. A frequently used domain registrar is GoDaddy. Quite often you can get a large discount and pay only 0.99p for the first year. I recommend going to Google and searching for coupons. This way I found a coupon that offered me a discount.

Then you have to register an account on Cloudflare. It offers a lot of useful features, mainly a CDN, security, and DNS management. It will allow your website to have a secure https connection.

Once you have a domain ready, navigate to your DNS settings and change your domain nameservers to Cloudflare. The two nameservers will be shown to you in the newly created Cloudflare account. Here is a specific guide on how to change the nameservers. The procedure might be slightly different depending on which domain registrar was used to purchase the domain.

Point your domain to your Jekyll project repository

Once you have connected your domain to Cloudflare, under the DNS section, you will need to point it to your repository by adding two A records with GitHub IP addresses. As of this writing, GitHub IP addresses are 192.30.252.153 and 192.30.252.154. Double check if that’s still the case here. A WWW CNAME record will redirect www sub domain requests to the main URL.

Cloudflare DNS section

Then navigate to the Crypto section and enable Full SLL (not Strict).

Cloudflare Crypto section

Keep in mind that the connection between Cloudflare and the repository is not encrypted, so you shouldn't use this setup for sensitive data, and all of the project code and data is public.

There you have it. By now you should have a fully functional website with free GitHub hosting and a custom domain with an https connection.

If you enjoyed my post, please consider giving it a clap, so that more people can see it!

I like to write about technology, and other things as well, so please feel free to follow me on Twitter and Medium!