511

On http://github.com developer keep the HTML, CSS, JavaScript and images files of the project. How can I see the HTML output in browser?

For example this: https://github.com/necolas/css3-social-signin-buttons/blob/master/index.html

When I open this it doesn't show the rendered HTML of the code of author. It shows the page as a source code.

Is it possible to see it as rendered HTML directly? Otherwise I always need to download the whole ZIP just to see the result.

niutech
  • 28,923
  • 15
  • 96
  • 106
Jitendra Vyas
  • 148,487
  • 229
  • 573
  • 852
  • 9
    similar question: [Can I run HTML files directly from GitHub, instead of just viewing their source?](http://stackoverflow.com/questions/6551446/can-i-run-html-files-directly-from-github-instead-of-just-viewing-their-source) – Amro Apr 03 '13 at 13:57
  • 4
    as of June 2019, [raw.githack.com](https://raw.githack.com) seems to be the most convenient solution (see answers to [question linked above](http://stackoverflow.com/questions/6551446/can-i-run-html-files-directly-from-github-instead-of-just-viewing-their-source)) – leopold.talirz Jun 08 '19 at 10:24
  • 5
    This is a really old thread but the fact that this isn't immediately obvious and easy to solve on github's site is insane. – ForceLeft415 Mar 19 '21 at 08:09

11 Answers11

626

The most comfortable way to preview HTML files on GitHub is to go to https://htmlpreview.github.io/ or just prepend it to the original URL, i.e.: https://htmlpreview.github.io/?https://github.com/bartaz/impress.js/blob/master/index.html

niutech
  • 28,923
  • 15
  • 96
  • 106
  • @Denis: Which browser and which URL are you using? For now, it supports only Webkit and Gecko browsers. – niutech Sep 03 '12 at 18:43
  • @Denis: Sorry, Firefox 3.6 is too old to be supported. That said, you can open Firebug any try to debug it, if you are determined. – niutech Sep 08 '12 at 01:57
  • Any idea how to do this on a private repo? I don't want to paste my private URL w/ token into that tool. its a sweet tool tho. – rynop Sep 21 '12 at 20:28
  • @rynop: HTMLPreview is open source and it doesn't save any history, so nobody will know if you paste your private URL (except Github and Yahoo). – niutech Oct 03 '12 at 23:09
  • Prepending `htmlpreview` produces an error `404 There isn't a GitHub Page here.` – Alec Jacobson Feb 25 '14 at 19:15
  • @mangledorf, my bad, should prepend `http://htmlpreview.github.com/?` not just `htmlpreview.` – Alec Jacobson Feb 25 '14 at 19:16
  • 68
    Note that this only works for public repos. Private ones will give the error message `Error: Cannot load file` – Erik Trautman Aug 19 '14 at 22:51
  • 47
    http://htmlpreview.github.com/ partly fails at rendering JavaScript and CSS. The alternative http://rawgit.com/ works better, serving files with proper Content-Type headers. – Julien Carsique Jan 16 '15 at 15:03
  • @JulienCarsique But RawGit is a third-party proxy and can disappear one day, unlike github.com. Which URL doesn't work properly? – niutech Jan 16 '15 at 22:32
  • @niutech http://htmlpreview.github.io/?https://github.com/nuxeo/nuxeo.github.io/blob/7.1/downloads.html – Julien Carsique Jan 16 '15 at 22:37
  • `http://htmlpreview.github.io/?https://github.com/Startouf/IBDV/blob/master/Site/index.html` Will not show my WebGL animation ! – Cyril Duchon-Doris Apr 19 '15 at 14:42
  • @JulienCarsique, Cyril DD: The problem is due to the 'Access-Control-Allow-Origin' header in the AJAX response, which is blocked by browsers. Sorry I cannot do much with it. – niutech Apr 20 '15 at 22:09
  • This site doesn't work well with different encodings. Loading a windows-1250 page, properly stated in ``, leads to wrong encoding. – Ondra Žižka Mar 29 '16 at 21:43
  • Hello, is there any similar tools for displaying markdown file ? – tcpiper Jun 30 '17 at 01:45
  • 1
    Great solution, thank you! I added the links to my R Notebooks with the prefix to the README.md file and it renders my nb.html file very well. Here is the page in case anybody wants to see how it works: https://github.com/sargdavid/snippets.cvi and http://htmlpreview.github.io/?https://github.com/sargdavid/snippets.cvi/blob/master/rnotebook/ggplot_heatmap.nb.html – Davit Sargsyan Aug 12 '17 at 17:16
  • @Shane, it now works with Github Enterprise :-) Simply enable it in your repo's Settings under the 'GitHub Pages' settings. Then, the settings page will give you the relevant link. (Apparently, it's usually simply putting `pages.` in front of the url. But don't worry, the config page will give you the correct url after you have enabled it – Aaron McDaid Jan 02 '19 at 13:15
  • your example http://htmlpreview.github.io/?https://github.com/bartaz/impress.js/blob/master/index.html doesn't work htmlpreview.min.js:1 A parser-blocking, cross site (i.e. different eTLD+1) script. See https://www.chromestatus.com/feature/5718547946799104 for more details. – Vasilii Suricov Jan 04 '19 at 14:08
  • 9
    Looks like this solution stops works at last days of December 2018 until now however we still have this https://stackoverflow.com/a/8446391/860099 – Kamil Kiełczewski Jan 07 '19 at 03:59
  • it's a shame there isn't a renderer/view button, but then I realise you couldn't have a view button for every type that exists (but it would still be nice though) – Madivad Mar 18 '19 at 22:50
  • Couldn't it be useful to update the provided links with https (secure) protocol instead of http? I just realized I kept missing the obvious over a past couple of links, but it might be just the uniquely dark copy-paste monster in me doing things :) – brezniczky Aug 20 '19 at 00:27
  • If you use this service and have problems with React's react-router-dom - just try to use . – Eugene Zalivadnyi Dec 03 '20 at 07:41
  • You're relying on an external website to solve the the problem that your **browser** isn't turning perfectly good HTML into a render. Phooey. – Kaz Apr 02 '22 at 15:41
  • 1
    404 cant find my repo is private – Mostafa Imani Nov 24 '22 at 07:47
114

If you don't want to download an archive you can use GitHub Pages to render this.

  1. Fork the repository to your account.
  2. Clone it locally on your machine
  3. Create a gh-pages branch (if one already exists, remove it and create a new one based off master).
  4. Push the branch back to GitHub.
  5. View the pages at http://username.github.io/repo`

In code:

git clone git@github.com:username/repo.git
cd repo
git branch gh-pages
# Might need to do this first: git branch -D gh-pages
git push -u origin gh-pages # Push the new branch back to github
Go to http://username.github.io/repo
Jade
  • 3,156
  • 1
  • 34
  • 44
Ross
  • 46,186
  • 39
  • 120
  • 173
  • I have forked a project now how i can copied it to github pages. – Jitendra Vyas Dec 09 '11 at 14:56
  • 1
    Updated my answer with a process. – Ross Dec 09 '11 at 15:38
  • 3
    It's well documented here https://help.github.com/articles/creating-project-pages-manually – Leif Gruenwoldt Feb 18 '13 at 16:15
  • 2
    Why first create a master and clone it ("play it safe" in creating-project-pages-manually) ? Can one not `checkout --orphan gh-pages` **only**, push that, without messing with master at all ? – denis Mar 07 '13 at 17:48
  • 1
    You can also select the branch to publish in your repository settings, in the first tab (Options) near the bottom. It default to gh_pahes if the branch exists, else None (disabled). You can select master or any other branch. – Thomas Guyot-Sionnest Apr 17 '20 at 15:53
71

Message from RawGit's creator and owner on https://rawgit.com:

RawGit has reached the end of its useful life October 8, 2018 RawGit is now in a sunset phase and will soon shut down. It's been a fun five years, but all things must end.

GitHub repositories that served content through RawGit within the last month will continue to be served until at least October of 2019. URLs for other repositories are no longer being served.

If you're currently using RawGit, please stop using it as soon as you can.

When I tried to use it, I got:

403 Forbidden

RawGit will soon shut down and is no longer serving new repos. >> Please visit https://rawgit.com for more details.

You can use RawGit:
https://rawgit.com/necolas/css3-social-signin-buttons/master/index.html

It works better (at the time of this writing) than http://htmlpreview.github.com/, serving files with proper Content-Type headers. Additionally, it also provides CDN URL for use in production.

Inigo
  • 12,186
  • 5
  • 41
  • 70
Julien Carsique
  • 3,915
  • 3
  • 22
  • 28
  • 2
    I confirm that it works better than htmlpreview. At least, it's showing my WebGL animations. – Cyril Duchon-Doris Apr 19 '15 at 15:00
  • 1
    It works faster actually, and with Bokeh ([e.g.](https://rawgit.com/jadianes/data-journalism-python/master/notebooks/tuberculosis-evolution-visual/tuberculosis-evolution-visual.html)), it shows some of the interactions (e.g. tooltips) that don't work with htmlpreview. – jadianes Sep 23 '15 at 15:46
  • Like htmlpreview, doesn't work with private repositories. Git makes the URLs for these like public URLs by adding ?token=, but these tools should understand it and pass it to GH together with the rest. – zakmck Sep 09 '16 at 08:43
  • 2
    This is from the FAQ for rawgit: Can I use a rawgit.com development URL on a production website or in public example code? No. Only use rawgit.com URLs for low-traffic testing or for sharing temporary demos with a few people during development. Please use cdn.rawgit.com for anything that might result in heavy traffic or that people might copy and paste into their own code. ... There is more explanation available – BarryPye Nov 09 '16 at 12:44
  • This one solved a problem I had with Github's html preview - some anchor links in my html page just didn't work there, while they work perfectly fine in Rawgit. thanks! – noamgot Oct 01 '17 at 15:37
  • 12
    Can confirm: Rawgit will be shut down as of October 2019. – samcozmid Mar 19 '19 at 02:11
  • 2
    https://raw.githack.com/ as an alternative for RawGit. More info: https://stackoverflow.com/questions/62740362/how-to-show-demo-with-html-and-javascript-d3-js-on-github-for-every-commit – mkczyk Oct 11 '20 at 10:31
  • 1
    It seems RawGit has reached the end of its useful life. – Naeem Khoshnevis Feb 26 '21 at 16:04
45

It's really easy to do with github pages, it's just a bit weird the first time you do it. Sorta like the first time you had to juggle 3 kittens while learning to knit. (OK, it's not all that bad)

You need a gh-pages branch:

Basically github.com looks for a gh-pages branch of the repository. It will serve all HTML pages it finds in here as normal HTML directly to the browser.

How do I get this gh-pages branch?

Easy. Just create a branch of your github repo called gh-pages. Specify --orphan when you create this branch, as you don't actually want to merge this branch back into your github branch, you just want a branch that contains your HTML resources.

$ git checkout --orphan gh-pages

What about all the other gunk in my repo, how does that fit in to it?

Nah, you can just go ahead and delete it. And it's safe to do now, because you've been paying attention and created an orphan branch which can't be merged back into your main branch and remove all your code.

I've created the branch, now what?

You need to push this branch up to github.com, so that their automation can kick in and start hosting these pages for you.

git push -u origin gh-pages

But.. My HTML is still not being served!

It takes a few minutes for github to index these branches and fire up the required infrastructure to serve up the content. Up to 10 minutes according to github.

The steps layed out by github.com

https://help.github.com/articles/creating-project-pages-manually

Davor Josipovic
  • 5,296
  • 1
  • 39
  • 57
hendrikswan
  • 2,263
  • 1
  • 20
  • 25
21

I read all the comments and thought that GitHub made it too difficult for normal user to create GitHub pages until I visited GitHub theme Page where its clearly mentioned that there is a section of "GitHub Pages" under settings Page of the concerned repo where you can choose the option "use the master branch for GitHub Pages." and voilà!!...checkout that particular repo on https://username.github.io/reponame

screenshot to support my answer

merv
  • 67,214
  • 13
  • 180
  • 245
Mukesh Rathore
  • 264
  • 2
  • 8
  • 1
    This now appears to be a paid product only if you are using a private repo. It's available for public repos. – anakaine Mar 29 '21 at 01:21
4

Also, if you use Tampermonkey, you can add a script that will add preview with http://htmlpreview.github.com/ button into actions menu beside 'raw', 'blame' and 'history' buttons.

Script like this one: https://gist.github.com/vanyakosmos/83ba165b288af32cf85e2cac8f02ce6d

nvioli
  • 4,137
  • 3
  • 22
  • 38
aiven
  • 3,775
  • 3
  • 27
  • 52
3

I have found another way:

  1. Click on the "Raw" button if you haven't already
  2. Ctrl+A, Ctrl+C
  3. Open "Developer Tools" with F12
  4. In the "Inspector" right-click on the tag and choose "Edit HTML"
  5. Ctrl+A, Ctrl+V
  6. Ctr+Return

Tested on Firefox but it should work in other browsers too

bb1950328
  • 1,403
  • 11
  • 18
  • 1
    Very good; a proper technical solution which solves the real problem without any monkey business of relying on external websites. This should be something in the File menu of your browser: "eval page text as HTML". – Kaz Apr 02 '22 at 15:45
  • 1
    IMHO, it would be faster to save the raw html page anywhere and to open it with a browser (just press Downloaded files button). – Yaroslav Nikitenko Jul 01 '22 at 20:47
2

If you have configured GitHub Pages you can get your public url like as:

https://<username>.github.io/<repository>/index.html

where <username> & <repository> will be the placeholder for username & repo name respectively

So, the result will be like this: http://necolas.github.io/css3-social-signin-buttons/index.html

If it is an organization with GithubPages enabled in all the repositories it will be something like:

https://<org>.github.io/<repository>/
Vinod Srivastav
  • 3,644
  • 1
  • 27
  • 40
2

Two approaches (for public repositories) worked well for me: both VERY SIMPLE and ABLE TO RENDER COMPLEX HTML PAGES with links to local CSS files and local JAVASCRIPT/VUE files.

  • METHOD 1 - With GitHub pages

To set up, go to: https://github.com/YOUR_ACCT_NAME/YOUR_REPO_NAME/settings/pages (see screen shot below)

enter image description here

Example of my original HTML page on the repo: https://github.com/BrainAnnex/life123/blob/main/experiments/life_1D/diffusion/diffusion_1.htm

How it looks rendered: https://brainannex.github.io/life123/experiments/life_1D/diffusion/diffusion_1.htm Notice how all the styling, graphics and interactive controls are all good :)

  • METHOD 2 - With free service raw.githack.com

Go to https://raw.githack.com/ and enter the full URL of yourpage (including the "/blob" part); e.g. https://github.com/BrainAnnex/life123/blob/main/experiments/life_1D/diffusion/diffusion_1.htm

Then the site generates 2 links that work quite well :)

A good alternative if GitHub pages were to become unavailable!

Julian - BrainAnnex.org
  • 866
  • 11
  • 17
1

If you are using an enterprise Github, you might not want to have a public facing github pages. One thing that worked for us is to:

For a HTML file in: https://github.private-repo.com/team/project/blob/master/order.html

Following is the URL that opens in a browser and retrieves the latest file as HTML: https://github.private-repo.com/pages/team/project/order.html

Guru
  • 2,331
  • 6
  • 31
  • 48
0

This isn't a direct answer, but I think it is a pretty sweet alternative.

http://www.s3auth.com/

It allows you to host your pages behind basic auth. Great for things like api docs in your private github repo. just ad a s3 put as part of your api build.

rynop
  • 50,086
  • 26
  • 101
  • 112
  • 3
    Looks like a 3rd party service which has nothing common with git. Where is the instruction how to use it in context of this question? – Stalinko Mar 24 '20 at 04:31