Jekyll HTTP css not loading on HTTPS site

Question

My Jekyll built blog is at https://wys35.github.io/

Local site is OK, as the website is hosted as http, but once the site is commited (through Travis CI), when I visit wys35.github.io, I was redirected to https version of the website and the CSS (of a http link) is blocked as it is mixed content.

How can I rectify this problem?

Answer 1

Look at the DevTools console:

Mixed Content: The page at 'https://wys35.github.io/' was loaded over HTTPS, but requested an insecure stylesheet 'http://wys35.github.io/css/main.css'. This request has been blocked; the content must be served over HTTPS.

This site is served through HTTPS, therefore all of its content must be served through HTTPS.

When linking a resource to your document, you don't need to explicitly set http: or https:, only double slashes // will work fine, it will base on the current protocol of the page:

<link rel="stylesheet" href="//wys35.github.io/css/main.css">

Try setting url in _config.yml to "//wys35.github.io"