Can I run HTML files directly from GitHub, instead of just viewing their source?

Question

If I have a .html file in a GitHub repository, e.g. for running a a set of JavaScript tests, is there any way I can view that page directly—thus running the tests?

For example, could I somehow actually see the test results that would be produced by the jQuery test suite, without downloading or cloning the repo to my local drive and running them there?

I know this would basically put GitHub in the static content hosting business, but then again, they just have to change their mime-type from text/plain to text/html.

Can you update the accepted answer on this one? There is now a way of doing this - see @niutech's answer... — Alex Dean, Oct 15 '12 at 14:16
possible duplicate of [Link and execute external JavaScript file hosted on GitHub](http://stackoverflow.com/questions/17341122/link-and-execute-external-javascript-file-hosted-on-github) — Troy Alford, Oct 24 '14 at 20:42
Possible duplicate of [How to see an html page on github as a normal rendered html page to see preview in browser, without downloading?](https://stackoverflow.com/questions/8446218/how-to-see-an-html-page-on-github-as-a-normal-rendered-html-page-to-see-preview) — Michael Freidgeim, Nov 29 '18 at 21:03

chmanie · Accepted Answer · 2019-03-31T17:39:38.227

398

You might want to use raw.githack.com. It supports GitHub, Bitbucket, Gitlab and GitHub gists.

GitHub

Before:

https://raw.githubusercontent.com/[user]/[repository]/[branch]/[filename.ext]

In your case .html extension

After:

Development (throttled)

https://raw.githack.com/[user]/[repository]/[branch]/[filename.ext]

Production (CDN)

https://rawcdn.githack.com/[user]/[repository]/[branch]/[filename.ext]

In your case .html extension

raw.githack.com also supports other services:

Bitbucket

Before:

https://bitbucket.org/[user]/[repository]/raw/[branch]/[filename.ext]

After:

Development (throttled)

https://bb.githack.com/[user]/[repository]/raw/[branch]/[filename.ext]

Production (CDN)

https://bbcdn.githack.com/[user]/[repository]/raw/[branch]/[filename.ext]

GitLab

Before:

https://gitlab.com/[user]/[repository]/raw/[branch]/[filename.ext]

After:

Development (throttled)

https://gl.githack.com/[user]/[repository]/raw/[branch]/[filename.ext]

Production (CDN)

https://glcdn.githack.com/[user]/[repository]/raw/[branch]/[filename.ext]

GitHub gists

Before:

https://gist.githubusercontent.com/[user]/[gist]/raw/[revision]/[filename.ext]

After:

Development (throttled)

https://gist.githack.com/[user]/[gist]/raw/[revision]/[filename.ext]

Production (CDN)

https://gistcdn.githack.com/[user]/[gist]/raw/[revision]/[filename.ext]

Update: rawgit was discontinued

edited Mar 31 '19 at 17:39

answered Jun 18 '13 at 22:35

chmanie

5,016
3
21
28

Yeah thanks for adding this, since asking this question a long time ago I switched to this service. Let's make you the accepted answer :). – Domenic Jun 19 '13 at 04:48
16

Just an FYI: This doesn't seem to work at all for private repos, for obvious reasons. – rfay Sep 12 '13 at 19:45
It doesn't seem to load the javascript. – PyRulez Dec 27 '13 at 23:16
rawgithub.com is a private site. And it can alter the content of a page. It is insecure. – ZAB Jan 29 '14 at 13:33
[rawgit.com](http://www.rawgit.com) works for me. Thanks for pointing me in the right direction! – Gary Sheppard Apr 30 '14 at 23:52
rawgit links can be used as external links in jsfiddle – Anton Lyhin Jan 22 '16 at 23:31
1

For some reason I'm not getting a text/html content type on my HTML pages so it just shows the source :( – benji Feb 01 '19 at 23:13

score 208 · Answer 2 · edited Dec 01 '21 at 05:49

208

There is a new tool called GitHub HTML Preview, which does exactly what you want. Just prepend http://htmlpreview.github.io/? to the URL of any HTML file, e.g. http://htmlpreview.github.io/?https://github.com/twbs/bootstrap/blob/gh-pages/2.3.2/index.html

Note: This tool is actually a github.io page and is not affiliated with github as a company.

edited Dec 01 '21 at 05:49

charmoniumQ

5,214
5
33
51

answered Sep 03 '12 at 18:40

niutech

28,923
15
96
106

4

Is this also possible on private repos? – Björn Andersson Oct 24 '12 at 06:08
Doesn't work with frames (Javadoc): http://htmlpreview.github.com/?https://github.com/MartinThoma/prog-ws1213/blob/master/Blatt-01/javadoc/index.html :-( – Martin Thoma Nov 19 '12 at 06:30
It doesn't work with relative images loaded via javascript on chrome. `Cross-origin image load denied by Cross-Origin Resource Sharing policy.` – ubershmekel Apr 01 '13 at 20:11
@ubershmekel: Could you please provide a URL of the HTML page you were trying to load? – niutech Apr 02 '13 at 20:15
http://htmlpreview.github.com/?https://github.com/ubershmekel/mine3js/blob/master/index.html – ubershmekel Apr 03 '13 at 06:24
@ubershmekel It's because Three.js wants to download an image from another subdomain (htmlpreview.github.com and raw.github.com) and it's blocked by browsers. There is nothing I can do with it. – niutech Apr 08 '13 at 08:58
If you could avoid using `` i.e. mirroring raw.github at htmlpreview.github then this won't be an issue. Also, this whole thing should be at github.io nowadays. – ubershmekel Apr 08 '13 at 12:45
@ubershmekel I have just applied the migration to github.io. The use of `` is necessary for scripts and imgs to load properly. Keep in mind, HTMLPreview is a purely client-side script and it cannot act as a proxy. – niutech Apr 09 '13 at 12:58
3

It loads relative paths properly allowing for linking to JS/CSS inside of the github repository. This is fantastic. – Nathan Lilienthal May 20 '13 at 18:47
It doesn't seem to load the javascript. – PyRulez Dec 27 '13 at 23:17
@PyRulez Could you provide an URL? – niutech Dec 27 '13 at 23:57
Oh wait, never mind. They just provided code for generating javascripts. They didn't put the actual output. – PyRulez Dec 28 '13 at 00:31

score 20 · Answer 3 · answered Mar 28 '13 at 09:40

To piggyback on @niutech's answer, you can make a very simple bookmark snippet.
Using Chrome, though it works similarly with other browsers

Right click your bookmark bar
Click Add File
Name it something like Github HTML
For the URL type javascript:top.location="http://htmlpreview.github.com/?"+document.URL
When you're on a github file view page (not raw.github.com) click the bookmark link and you're golden.

score 7 · Answer 4 · answered Jul 13 '12 at 08:47

7

You can either branch gh-pages to run your code or try this extension (Chrome, Firefox): https://github.com/ryt/githtml

If what you need are tests, you could embed your JS files into: http://jsperf.com/

answered Jul 13 '12 at 08:47

Gianluca Esposito

500
6
5

score 6 · Answer 5 · answered Jun 12 '12 at 16:46

I had the same problem for my project Ratio.js and here's what I did.

Problem: Github.com prevents files from rendering/executing when the source is viewed by setting the content type/MIME to plain text.

Solution: Have a web page import the files.

Example:

Use jsfiddle.net or jsbin.com to create a webpage online then save it. Navigate to your file in Github.com and click the 'raw' button to get the direct link to the file. From there, import the file using the appropriate tag and attribute.

<!DOCTYPE>
<html>
    <head>
        <link rel="stylesheet" href="http://code.jquery.com/qunit/git/qunit.css" type="text/css" media="screen" />
    </head>
    <body>
        <h1 id="qunit-header">QUnit example</h1>
        <h2 id="qunit-banner"></h2>
        <div id="qunit-testrunner-toolbar"></div>
        <h2 id="qunit-userAgent"></h2>
        <ol id="qunit-tests"></ol>
        <div id="qunit-fixture">test markup, will be hidden</div>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/qunit/git/qunit.js"></script>  
        <script type="text/javascript" src="https://raw.github.com/LarryBattle/Ratio.js/master/src/Ratio.js"></script>  
        <script type="text/javascript" src="https://raw.github.com/LarryBattle/Ratio.js/master/tests/js/Ratio-testcases.js"></script>  
    </body>
</html>

Live Demo: http://jsfiddle.net/jKu4q/2/

Note: Note for jsfiddle.net you can get direct access to the result page by adding show to the end of the url. Like so: http://jsfiddle.net/jKu4q/2/show

Or....you could create a project page and render your HTML files from there. You can create a project page at http://pages.github.com/.

Once created you can then access the link through http://*accountName*.github.com/*projectName*/ Example: http://larrybattle.github.com/Ratio.js/

Nice idea use js fiddle to let the browser load the files from github but why not using the "Add Resources" of JSFiddle? — Filippo Vitale, Jun 24 '12 at 00:34

score 4 · Answer 6 · answered Jul 25 '14 at 11:19

Here is a little Greasemonkey script that will add a CDN button to html pages on github

Target page will be of the form: https://cdn.rawgit.com/user/repo/master/filename.js


// ==UserScript==
// @name        cdn.rawgit.com
// @namespace   github.com
// @include     https://github.com/*/blob/*.html
// @version     1
// @grant       none
// ==/UserScript==

var buttonGroup = $(".meta .actions .button-group");
var raw = buttonGroup.find("#raw-url");
var cdn = raw.clone();
cdn.attr("id", "cdn-url");
cdn.attr("href", "https://cdn.rawgit.com" + cdn.attr("href").replace("/raw/","/") );
cdn.text("CDN");
cdn.insertBefore(raw);

Execution of script 'cdn.rawgit.com' failed! $ is not a function — xiaoyu2er, Jul 26 '17 at 04:00

score 4 · Answer 7 · edited Dec 03 '16 at 11:41

You can do this easily by Modifying Response Headers which can be done with Chrome and Firefox extension like Requestly.

In Chrome and Firefox:

Install Requestly for Chrome and Requestly for Firefox
Add the following Headers Modification Rules:

a) Content-Type:
- Modify
- Response
- Header: Content-Type
- Value: text/html
- Source Url Matches: /raw\.githubusercontent\.com/.*\.html/
b) Content-Security-Policy:
- Modify
- Response
- Header: Content-Security-Policy
- Value: default-src 'none'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; script-src * 'unsafe-eval';
- Source Url Matches: /raw\.githubusercontent\.com/.*\.html/

score 3 · Answer 8 · answered Oct 29 '13 at 13:54

i wanted to edit html and js in github and have a preview. i wanted to do it in github to have instant commits and saves.

tried rawgithub.com but rawgithub.com was not realtime (it's cache refreshes once a minute).

so i quickly developed my own solution:

node.js solution for this: https://github.com/shimondoodkin/rawgithub

score 3 · Answer 9 · answered Apr 10 '14 at 21:45

raw.github.com/user/repository is no longer there

To link, href to source code in github, you have to use github link to raw source this way:

raw.githubusercontent.com/user/repository/master/file.extension

EXAMPLE

<html>
...
...
<head>    
<script src="https://raw.githubusercontent.com/amiahmadtouseef/tutorialhtmlfive/master/petdecider/script.js"></script>
...
</head>
<body>
...
</html>

score 2 · Answer 10 · answered Jun 23 '18 at 21:50

If you have an angular or react project in github, you can use https://stackblitz.com/ to run the application online in your browser.

Enter your Github username and repository name to view the application online - stackblitz.com/github/{GITHUB_USERNAME}/{REPO_NAME}

This works even without Node_Modules uploaded to Github

Currently support projects using @angular/cli and create-react-app. Support for Ionic, Vue, and custom webpack configs are coming soon!

score 2 · Answer 11 · answered Oct 28 '22 at 17:00

2

Github has a static page hosting service called github pages, you can find it under settings, and then select pages, and select the branch you want to use for the page and hit save.

answered Oct 28 '22 at 17:00

Michael Kielbasinski

25
7

Vijay · Answer 12 · 2015-10-28T07:26:53.960

This solution only for chrome browser. I am not sure about other browser.

Add "Modify Content-Type Options" extension in chrome browser.
Open "chrome-extension://jnfofbopfpaoeojgieggflbpcblhfhka/options.html" url in browser.
Add the rule for raw file url. For example:
- URL Filter: https:///raw/master//fileName.html
- Original Type: text/plain
- Replacement Type: text/html
Open the file browser which you added url in rule (in step 3).

Can I run HTML files directly from GitHub, instead of just viewing their source?

12 Answers12

GitHub

Before:

After:

Bitbucket

Before:

After:

GitLab

Before:

After:

GitHub gists

Before:

After:

Linked