1

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="http://code.jquery.com/jquery-1.10.1.min.js"></script>

and

<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").html("");
    jQuery("h5").append(randNoun + "&nbsp;");
    jQuery("h5").append(randName + "&nbsp;");
    jQuery("h5").append(randAction + "&nbsp;");
    jQuery("h5").append(randPlace);
}

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

Gerrard Cap.
  • 55
  • 1
  • 5

2 Answers2

8

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 'https://bobbyfestgenerator.github.io/' was loaded over HTTPS, but requested an insecure script 'http://code.jquery.com/jquery-1.10.1.min.js'. 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="https://code.jquery.com/jquery-1.10.1.min.js"></script>
Nate Barbettini
  • 51,256
  • 26
  • 134
  • 147
  • 1
    @LankArnold Happy to help! The console is the first place to check for stuff like this. BTW, you can upvote in addition to accepting, if it was a helpful answer. :) – Nate Barbettini Aug 13 '16 at 15:53
  • Or use the same loading scheme as the current page, by omitting the scheme from the URL: `` – Martin Kealey May 01 '21 at 02:35
0

Today I saw a similar problem, but not because of HTTP/HTTPS: when I published to GitHub pages, all of the CR/LF characters were removed in the source HTML. Perhaps not a big deal for HTML with closing tags, but when the entire source page is on one line, including JavaScript, well - any embedded comments in JavaScript caused all code afterwards (until the JavaScript closing tag) to be unexpectedly also commented out.

In this case some more code is treated like a comment:

    code...
    // a comment
    some more code...

Here's an example. Before, as viewed in editor:

Before

After push to GitHub, CR/LF apparently removed by GH-Pages actions:

enter image description here

Note how all the remaining JavaScript ends up disabled after the comment::

enter image description here

The (somewhat undesired) solution would be to remove the comment or better: use /* and */ comment wrappers instead of // at the beginning of the line.

gojimmypi
  • 426
  • 4
  • 7