Force a quick redirect to HTTPS on Github Pages for your domain (and only your domain)

ssl-redirect.html

<script>
var host = "YOURDOMAIN.github.io";
if ((host == window.location.host) && (window.location.protocol != "https:"))
    window.location.protocol = "https";
</script>

var host = "YOURDOMAIN.github.io"
if (window.location.host == host && window.location.protocol != "https:") {
  window.location.protocol = "https:"
}

might be simpler

didn't know you could do that! I'll change it, thanks.

Would this be simpler?

<script>
if (window.location.host.indexOf('github.io') > -1 && window.location.protocol != "https:"){
    window.location.protocol = "https";
}
</script>

@Cnly Nice, that does seem simpler. I'd want it to be locked to hosts ending with github.io though, not just where it appears in the host name (e.g. http://github.iomega.com to make up an example).

<script>
if (window.location.host.substr(-10) == '.github.io' && window.location.protocol != 'https:') {
    window.location.protocol = 'https:';
}
</script>

I added a check for localhost, given that the common case is that when you hack your Jekyll site locally you don't have https setup.

  {% if site.force-https %}
    <script>
    // Don't force http when serving the website locally
    if (!(window.location.host.startsWith("127.0.0.1")) && (window.location.protocol != "https:"))
        window.location.protocol = "https";
    </script>
  {% endif %}

Just out of curiosity, but why are you checking that host == window.location.host? Is this because you don't want to force redirect to HTTPS if the visitor is at a custom domain that does not support HTTPS?

@PanosSakkos don't forget to include localhost:

<script>
if (!(window.location.host.startsWith("127.0.0.1") || window.location.host.startsWith("localhost")) && (window.location.protocol != "https:"))
    window.location.protocol = "https";
</script>

Since I do a lot of local testing before pushing commits to my site, I need to check that in the script:

<script>
// Don't force https when serving the website locally
if (!(window.location.host.startsWith("127.0.0.1")) && (window.location.protocol != "https:"))
    window.location.protocol = "https";
</script>

However, I still think what we all are doing is just another ugly hack. This feature needs to be built-into github pages.

Since I do a lot of local testing before pushing commits to my site, I need to check that in the script:

<script>
// Don't force https when serving the website locally
if (!(window.location.host.startsWith("127.0.0.1")) && (window.location.protocol != "https:"))
    window.location.protocol = "https";
</script>

However, I still think what we all are doing is just another ugly hack. This feature needs to be built-into github pages.

The most efficient way I've found to do this in the present is with CloudFlare's Page Rules:

See this tutorial on how to set this up on GitHub Pages:

• https://www.benburwell.com/posts/configuring-cloudflare-universal-ssl/

but also agreeing with @prahladyeri and others that this should be configurable in GitHub Pages itself 👍.

GitHub Pages now supports enforcement of HTTPS via config.

Because my Github page shows ssl warnings, i've reverse the example and added this piece of code to every .html and .md file to show it with http:

<script>
    if (window.location.host.indexOf('github.io') > -1 && window.location.protocol == "https:"){
        window.location.protocol = "http";
    }
</script>

Those files are fully public, there's no real reason to pass them with ssl to the user.
Maybe i add Ajax on the future, but it's good enough for now. Still don't know if there's something to try with yaml config for this.

@hakatashi thanks, saves me the hassle

@mikeumus "Always uses https" is equivalente to the 301 redirects?
Here is a tutorial about that: https://rck.ms/jekyll-github-pages-custom-domain-gandi-https-ssl-cloudflare/

@mikeumus worked AWESOMELY!!! ~THANK YOU!!!

You must check for http and NOT for https

bad:

window.location.protocol != "https:"

safe:

window.location.protocol === "http:"

Why? Because in webapps wrapped in Electron and NWjs there's no http - it's file: and chrome-extension:

So:

/*global window */
/*jslint browser: true */
(function (root) {
	"use strict";
	var h = root ? root.location.hostname : "",
	p = root ? root.location.protocol : "";
	if ("http:" === p && !(/^(localhost|127.0.0.1)/).test(h)) {
		root.location.protocol = "https:";
	}
}
	("undefined" !== typeof window ? window : this));

In this article, explain how to work HTTPS URL for your custom domain if you are using cloudflare.

https://infinitbility.com/always-use-https-url-using-cloudflare

shorter condition:

 if (window.location.href.match("http://MYDOMAIN")) window.location.protocol='https:'

Note that the MYDOMAIN can even be partial (e.g. to support both domain.github.io, domain.com, whatever) or use more complex regex matching. The important thing is to avoid the test domains (http://localhost, http://127.0.0.1, etc)

but where should i add the code. into my index.html?