The Wiert Corner – irregular stream of stuff

Jeroen W. Pluimers on .NET, C#, Delphi, databases, and personal interests

  • My badges

  • Twitter Updates

  • My Flickr Stream

  • Pages

  • All categories

  • Enter your email address to subscribe to this blog and receive notifications of new posts by email.

    Join 2,481 other followers

Hosting an HTML gist containing JavaScript

Posted by jpluimers on 2016/06/22


The “embed” dropdown allows to get URLs for sharing and git cloning.

Recently I did my very first JavaScript in HTML development. Since it was a one page experiment, I didn’t want to put it in an official repository of it’s own.

I will explain about the content in a future post, but first about getting it on-line as a HTML file that can run JavaScript.

This is the hosted page: Work around G+ “403. That’s an error.” errors.

Gists are the base

Gists are pretty amazing. They have history, syntax highlighting (which you can embed on your own page, see Using Github as a Syntax Highlighter for Your Blog or Website), can show an overview of files or even raw content. This holds for public and secret gists.

The history of all the files comes from a repository: in fact all gists are in fact git repositories of which you can get the URL (be it https or ssh) is under the “Embed” dropdown: see the screenshot on the right.

So the gist itself is available under these URLs:

The individual files can either be viewed as syntax highlighted (when they’re small enough, not binary and github knows how to highlight them), or as raw files:

  1. syntax highlighted
  2. raw redirect
  3. raw redirected

The problem is that the RAW files are only served in two Conten-Types:

  • If the RAW files are text, they will be served as text/plain Content-Type.
  • But if they are binary, then they will be served as application/octet-stream.

This means that even if a file has an .html extension, it will not be served as text/html Content-Type so a browser will not recognise it nor execute any JavaScript in it.

This is where Rawgit comes in:

Rawgit is for “hosting”

Rawgit is hosted on and has three text boxes:

  1. The source URL that isn’t really clear what to paste in. Experimenting with the above, it’s the raw redirect URL or the raw redirected URL:
  2. The production URL which translates both of the above raw URLs to
    2. These are served through MacCDN but no guarantees or support.
  3. The development URLwhich translates both of the above raw URLs to
    2. These are throttled/blacklisted/nagged upon excessive use.

Since at first the URL parsing wasn’t clear, I did this URL translation:

  1. gist
  2. rawgit (fails)
  3. git
  4. rawgit (succeeds)

Hosting your own rawgit

If you don’t like the MaxCDN dependency you can host it on your own by cloning the rawgit repository on github and following the and FAQ there.

HTML Preview as alternative of rawgit is very slow

Later I learned about GitHub & BitBucket HTML Preview (at through javascript – Can I run HTML files directly from GitHub, instead of just viewing their source? – Stack Overflow.

It also has one edit box to paste a URL in:

It takes ages for the page to load, so that’s no success.


<!DOCTYPE html>
Works around G+ 403 errors like these:
403. That’s an error.
Your client does not have permission to get URL /sorry/IndexRedirect?continue= from this server. That’s all we know.
<h1>Work around G+ "403. That’s an error." errors</h1>
<p>Please enter the Google 403 error URL:</p>
<input id="googlePlus403Url">
<button type="button" onclick="decodeGooglePlus403UrlMethod()">Submit</button>
<div id="decodedUrlsCaptionDiv">
<p id="decodedUrlsCaption">Here you will see the decoded Google Plus URLs so you can follow them:</p>
<ul id="decodedUrlsUl">
// based on
function decodeGooglePlus403UrlMethod() {
var googlePlusUrl = "";
var errorText = "";
// Get the value of the input field with id="numb"
var googlePlus403Url = document.getElementById("googlePlus403Url").value;
var stripPrefix = ";;
var prefix = stripPrefix + ";;
var suffixStart = "&q=";
// now skip anything until the suffixStart, so we kill `CGMSBLzJ3TkY7vzttwUiGQDxp4NL-KfC7ZN3j6E2rFd4pZYndOXSbvYqOWh0dHBzOi8vcGx1cy5nb29nbGUuY29tL3UvMC8rTHluZGFIZWNodC9wb3N0cy9mU1NYaDk2cmNMaQ`
// Am I a SO developer now? At least I'm quickly learning some JavaScript basics…
if (googlePlus403Url.indexOf(prefix) == 0) {
var lastSuffixStartIndex = googlePlus403Url.lastIndexOf(suffixStart);
if (lastSuffixStartIndex == 1) {
errorText = "SuffixStart missing in URL";
} else {
// now strip the bits we don't need, then decode what is left.
// I always wondered why they call it substring instead of subString
var googlePlusEncodedUrl = googlePlus403Url.substring(stripPrefix.length, lastSuffixStartIndex);
// decoding got a new new a while ago:
googlePlusUrl = decodeURIComponent(googlePlusEncodedUrl);
} else {
errorText = "Wrong prefix in URL";
// for now, just add the output; in the future, only add unique output.
// Based on
var decodedUrlsUl = document.getElementById("decodedUrlsUl");
var decodedUrlLi = document.createElement('li');
if (errorText == ""){
var aTag = document.createElement('a');
aTag.setAttribute('href', googlePlusUrl);
aTag.innerHTML = googlePlusUrl;
} else {
var aDiv = document.createElement('div');
aDiv.innerHTML = errorText + " " + googlePlus403Url;


2 Responses to “Hosting an HTML gist containing JavaScript”

  1. […] At first you’d think that gists can only hold text files. That’s not true, and I hinted to this last week in Hosting an HTML gist containing JavaScript. […]

  2. […] Hosting an HTML gist containing JavaScript […]

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: