Mixed content error when using github pages with custom domain

Question

I'm hosting my git-hub pages website (peps09791.github.io) using a custom domain (https://thebotspeaks.com) with Cloudflare. To enable HTTPS, I have done the following configurations:

1. In my _config.yaml file I have set the URL key accordingly

   url: "https://peps0791.github.io"

2. From my cloudFlare dashboard, I have enabled option of HTTPS rewrites to prevent mixed content error.

3. I have also enabled Flexible SSL from CloudFlare.

I haven't enabled default HTTPS-redirection because the website breaks over HTTPS. On HTTP, it works fine.

Right now, when I try to access my website using HTTPS, I get mixed content error:

Mixed Content: The page at 'https://thebotspeaks.com/' was loaded over HTTPS, but requested an insecure image 'http://thebotspeaks.com/assets/images/bio-photo.jpg'. This content should also be served over HTTPS.

09:54:45.323 (index):1 Mixed Content: The page at 'https://thebotspeaks.com/' was loaded over HTTPS, but requested an insecure stylesheet 'http://thebotspeaks.com/assets/css/main.css'. This request has been blocked; the content must be served over HTTPS.

09:54:45.785 (index):1 Mixed Content: The page at 'https://thebotspeaks.com/' was loaded over HTTPS, but requested an insecure script 'http://thebotspeaks.com/assets/js/main.min.js'. This request has been blocked; the content must be served over HTTPS.

From console, I can see this:

<script src="https://peps0791.github.io/assets/js/main.min.js"></script>

<link rel="stylesheet" href="https://peps0791.github.io/assets/css/main.css">

How do I resolve this issue?

Answer 1

The problem here is that your assets (i.e. your CSS or JavaScript) are redirecting to the HTTP version of your site. This is because your assets are referencing directly to your GitHub site instead of the Cloudflare-enabled domain.

For example; your HTML references your CSS files at https://peps0791.github.io/assets/css/main.css instead of https://thebotspeaks.com/assets/css/main.css

In order to fix this it looks like you'll need to update your _config.yaml file to have the following URL key:

url: "https://thebotspeaks.com"

More general advice on fixing a variety of Mixed Content issues can be found in the following article on the Cloudflare Knowledge Base: How do I fix the SSL Mixed Content Error Message?