Menu
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:
In my _config.yaml file I have set the URL key accordingly
url: "https://peps0791.github.io"
From my cloudFlare dashboard, I have enabled option of HTTPS rewrites to prevent mixed content error.
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?
826
You can customize the domain name of your GitHub Pages site. GitHub Pages is available in public repositories with GitHub Free and GitHub Free for organizations, and in public and private repositories with GitHub Pro, GitHub Team, GitHub Enterprise Cloud, and GitHub Enterprise Server.
On GitHub, navigate to your site's repository. Under your repository name, click Settings. In the "Code and automation" section of the sidebar, click Pages. Under "Custom domain", type your custom domain, then click Save.
GitHub Pages is just the solution to that problem. It's free. You can host your website, including custom domain names(https://dhrumil.xyz), 404 error page, sub-domain (https://blog.dhrumil.xyz) and all over secure https.
All GitHub Pages sites, including sites that are correctly configured with a custom domain, support HTTPS and HTTPS enforcement.
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?
60
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
