Don't forget to update the CSS!
I had been meaning to set up my blog page to use SSL/HTTPS for a while. Today I did it.
It’s amazingly simple since Github Pages has teamed up with LetsEncrypt. So I just had to tick one box.
Go to your Github pages Repo, in my case https://github.com/MrCNeale/mrcneale.github.io, and select the settings tab, or go to your repo /settings, https://github.com/MrCNeale/mrcneale.github.io/settings
Once there simply scroll down to the Github Pages section and tick the box labelled “Enforce HTTPS”.
Within 2-3 minutes Github will get a certificate for you (in my case for my custom domain name chrisneale.org!) and apply it.
This was great, my website worked at https://www.chrisneale.org but wait, all the formatting and layout looked like HTML v1.0 and hideous!
I noticed in Chrome that it was complaining that it was only displaying the secure content….not the insecure….”What insecure content??”
A quick trip into the developer console in Chrome by hitting F12 showed the culprit. The CSS was building from information somewhere with an explicit http in.
I found that it was the _config.yml file which needed the “Site Wide Configuration” section URL value updating to be https://www.chrisneale.org
After editing that, 2 more minutes for Github Pages to recompile, and back to looking lovely!