Free Web hosting for your finished Jekyll project Since web development has become more complicated, you have to deal with Sometimes it might be better to use tools that remove complexity for simple websites. frameworks, task runners, package management , deployment, and vulnerabilities. Enter . A static site generator that makes it easier for designers and front-end developers to make a simple, fast website. It has a template language and even pre-made themes that are available , , and you can find more of them on . Jekyll built-in here here 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 ’s . WebdesignerDepot article To create your website with this method, you will need to have basic knowledge of If you are new to all these tools, there are plenty of tutorials online to learn all of this. Here are some good resources: the Liquid template language, terminal, git, HTML/CSS, and the Jekyll framework. 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 with a custom domain, free hosting with GitHub pages, and a secure https connection. your finished Jekyll website 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 , depending on the type of method you chose earlier. Test your website by going to the URL. {your-username}.github.io/{your-repository} GitHub provides a Ruby gem that you will need to add to your Gemfile. The Jekyll documentation provides instructions on how to do it under “The github-pages gem”. here 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 . 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. Cloudflare 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. 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. Here 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 . A WWW CNAME record will redirect www sub domain requests to the main URL. here 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 !
