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

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.

This question is related to javascript html github

The answer is


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/


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!


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/


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

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

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);

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


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

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

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

In Chrome and Firefox:

  1. Install Requestly for Chrome and Requestly for Firefox

  2. Add the following Headers Modification Rules:

    enter image description here

    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/

There is a new tool called GitHub HTML Preview, which does exactly what you want. Just prepend http://htmlpreview.github.com/? to the URL of any HTML file, e.g. http://htmlpreview.github.com/?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.


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>

Examples related to javascript

need to add a class to an element How to make a variable accessible outside a function? Hide Signs that Meteor.js was Used How to create a showdown.js markdown extension Please help me convert this script to a simple image slider Highlight Anchor Links when user manually scrolls? Summing radio input values How to execute an action before close metro app WinJS javascript, for loop defines a dynamic variable name Getting all files in directory with ajax

Examples related to html

Embed ruby within URL : Middleman Blog Please help me convert this script to a simple image slider Generating a list of pages (not posts) without the index file Why there is this "clear" class before footer? Is it possible to change the content HTML5 alert messages? Getting all files in directory with ajax DevTools failed to load SourceMap: Could not load content for chrome-extension How to set width of mat-table column in angular? How to open a link in new tab using angular? ERROR Error: Uncaught (in promise), Cannot match any routes. URL Segment

Examples related to github

Does the target directory for a git clone have to match the repo name? Issue in installing php7.2-mcrypt How can I switch to another branch in git? How to draw checkbox or tick mark in GitHub Markdown table? How to add a new project to Github using VS Code git clone error: RPC failed; curl 56 OpenSSL SSL_read: SSL_ERROR_SYSCALL, errno 10054 How to add empty spaces into MD markdown readme on GitHub? key_load_public: invalid format git - remote add origin vs remote set-url origin Cloning specific branch