The Wiert Corner – irregular stream of stuff

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

  • My work

  • 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 1,310 other followers

Hosting an HTML gist containing JavaScript

Posted by jpluimers on 2016/06/22

The

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 https://rawgit.com/ 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
    1. https://cdn.rawgit.com/jpluimers/4f07a2f3f9b9890a3a44e184c1abadf2/raw/aecaf36cd4eefea76780dd0ba1fde484b6710fe5/20160531-Google-Plus–403.-That%25E2%2580%2599s-an-error.–Your-client-does-not-have-permission-to-get-URL–sorry–IndexRedirect–workaround.html
    2. These are served through MacCDN but no guarantees or support.
  3. The development URLwhich translates both of the above raw URLs to
    1. https://rawgit.com/jpluimers/4f07a2f3f9b9890a3a44e184c1abadf2/raw/aecaf36cd4eefea76780dd0ba1fde484b6710fe5/20160531-Google-Plus–403.-That%25E2%2580%2599s-an-error.–Your-client-does-not-have-permission-to-get-URL–sorry–IndexRedirect–workaround.html
    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 README.md and FAQ there.

HTML Preview as alternative of rawgit is very slow

Later I learned about GitHub & BitBucket HTML Preview (at http://htmlpreview.github.io/) 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.

–jeroen

 

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:

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s

 
%d bloggers like this: