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

User · Accepted Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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    lt  DOCTYPE gt   lt html gt       lt head gt           lt link rel  stylesheet  href  http   code jquery com qunit git qunit css  type  text css  media  screen    gt       lt  head gt       lt body gt           lt h1 id  qunit-header  gt QUnit example lt  h1 gt           lt h2 id  qunit-banner  gt  lt  h2 gt           lt div id  qunit-testrunner-toolbar  gt  lt  div gt           lt h2 id  qunit-userAgent  gt  lt  h2 gt           lt ol id  qunit-tests  gt  lt  ol gt           lt div id  qunit-fixture  gt test markup  will be hidden lt  div gt           lt script src  http   code jquery com jquery-latest js  gt  lt  script gt           lt script type  text javascript  src  http   code jquery com qunit git qunit js  gt  lt  script gt             lt script type  text javascript  src  https   raw github com LarryBattle Ratio js master src Ratio js  gt  lt  script gt             lt script type  text javascript  src  https   raw github com LarryBattle Ratio js master tests js Ratio-testcases js  gt  lt  script gt         lt  body gt   lt  html gt    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

User · Answer

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

User · Answer

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   lt html gt           lt head gt       lt script src  https   raw githubusercontent com amiahmadtouseef tutorialhtmlfive master petdecider script js  gt  lt  script gt       lt  head gt   lt body gt       lt  html gt

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

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

GitHub

Before:

After:

Bitbucket

Before:

After:

GitLab

Before:

After:

GitHub gists

Before:

After:

Examples related to javascript

Examples related to html

Examples related to github