This blog now moved to Netlify for hosting the static site content.
Previously, Github Pages were used - a great start for hosting jekyll projects or other static content, but with a few drawbacks.
Github Pages is dependent on the Github Pages gem and only supports a few plugins (see here). While adding multilanguage support to this website (using jekyll-multiple-languages-plugin), I reached a point where I needed another solution.
The Github Pages project is
- easy to use
- free of charge
- working well with Github and Cloudflare
|Why not this?||Reason|
|Github Pages||No general plugin support. This is a major drawback.|
|Travis CI||Too much work upfront and another tool would be introduced.|
|CloudCannon||It didn’t work with the plugins needed ;)|
What is Netlify?
Netlify is a unified platform that automates your code to create high-performant, easily maintainable sites, and web apps. They provide continuous deployment (Git-triggered builds), an intelligent, global CDN, full DNS (including custom domains), automated HTTPS, asset acceleration, and a lot more.
In other words: you can connect your Github repository, define build settings like the output directory and the build command and have your deployment workflow automatically started whenever you
git push. The resulting static page is available with a Netlify domain (like this) or a custom domain.
Connect netlify to github
The first step is to hook up netlify with your Github repo. They have a nice tutorial over here. The relevant build settings are:
Also add your own domains here:
Cloudflare speeds up and protects websites, APIs, SaaS services, and other properties connected to the Internet. They also auto minify the source code to removes unnecessary characters (like whitespace, comments, etc.) without changing its functionality and add caching.
Minification can compress source file size which reduces the amount of data that needs to be transferred to visitors and thus improves page load times.
Using the correct nameservers
So the next step is to add Cloudflare to the stack. I have a custom domain where it set the nameservers to the ones provided by Cloudflare:
In the admin panel of Cloudflare I can set the correct CNAME DNS entries for my custom netlify domain:
A Canonical Name record (abbreviated as CNAME record) is a type of resource record which maps one domain name to another, referred to as the Canonical Name. CNAME records must always point to another domain name, never directly to an IP address.
In the security tab we can set an SSL certificate by chosing “SSL Full”:
What SSL setting should I use?
That setting controls how Cloudflare’s servers connect to our netlify domain (the origin) for HTTPS requests. Possible options are:
- Flexible SSL: You cannot configure HTTPS support on your origin, even with a certificate that is not valid for your site. Visitors will be able to access your site over HTTPS, but connections to your origin will be made over HTTP.
- Full SSL: Your origin supports HTTPS, but the certificate installed does not match your domain or is self-signed. Cloudflare will connect to your origin over HTTPS, but will not validate the certificate.
- Full (strict): Your origin has a valid certificate (not expired and signed by a trusted CA or Cloudflare Origin CA) installed. Cloudflare will connect over HTTPS and verify the cert on each request.
Picking an incorrect setting (as “Full (strict)”) results in your website not being available to visitors: