Lank Arnold Lank Arnold - 1 year ago 88
HTML Question

Script stops working when hosted on Github Pages

I built a random sentence generator -- when you click an HTML button, a random sentence is generated beneath it. The generation is powered by a simple script and jQuery.

It works fine on my local machine: When I open index.html in a browser, everything goes smoothly.

But once I upload to GiHub and visit the GitHub pages URL, the generator stops working. Clicking the button does nothing.

Here's the script (it's all contained within the index.html file):

<script src=""></script>


<script> function sentenceLoad() {

//declare arrays
var nouns = ['Mulder, Scully, and'];
var names = ['Assistant Director Skinner', 'the Cigarette Smoking Man', 'Alex Krycek'];
var actions = ['are running from alien bounty hunters', 'are tracking a shapeshifter', 'are hunting a mutant serial killer'];
var places = ['in the woods of New Jersey', 'in a government bunker', 'in Olympic National Forest'];
//shuffle through contents of each array, picking one entry per array
var randNoun = nouns[Math.floor(Math.random() * nouns.length)];
var randName = names[Math.floor(Math.random() * names.length)];
var randAction = actions[Math.floor(Math.random() * actions.length)];
var randPlace = places[Math.floor(Math.random() * places.length)];
//place the random entry into the appropriate place in the HTML
jQuery("h5").append(randNoun + "&nbsp;");
jQuery("h5").append(randName + "&nbsp;");
jQuery("h5").append(randAction + "&nbsp;");

The repo is

and the live site is

What would cause this to work locally, but not work on Github Pages?

Answer Source

If you open up your Developer Tools pane (in Chrome, right-click on the page and choose Inspect), you'll see this error in the Network console:

Mixed Content: The page at '' was loaded over HTTPS, but requested an insecure script ''. This request has been blocked; the content must be served over HTTPS.

You need to load your script over HTTPS instead of HTTP.

The reason this works locally is because you're using the file:// scheme on your local machine (or http:// if you have a local development server). The browser doesn't have a problem loading an external script over HTTP in this case.

However, Github Pages is hosting your file over HTTPS (a secure connection) for you. For security reasons, the browser won't load a script over HTTP if the page is hosted on HTTPS.

Just change the code in your <head> tag to load the script over HTTPS:

<script src=""></script>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download