How to see an HTML page on Github as a normal rendered HTML page to see preview in browser, without downloading?

HtmlCssGitGithubGithub Pages

Html Problem Overview


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.

Html Solutions


Solution 1 - Html

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

Solution 2 - Html

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 [email protected]: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

Solution 3 - Html

>  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.

Solution 4 - Html

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

Solution 5 - Html

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

Solution 6 - Html

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

Solution 7 - Html

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

Solution 8 - Html

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

Solution 9 - Html

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.

Solution 10 - Html

You can just turn on Github Pages. ^_^

Click on "Settings", than go to "GitHub Pages" and click on dropdown under "Source" and choose branch which you want to public (where main html file is located) aaaand vualaa. ^_^

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionJitendra VyasView Question on Stackoverflow
Solution 1 - HtmlniutechView Answer on Stackoverflow
Solution 2 - HtmlRossView Answer on Stackoverflow
Solution 3 - HtmlJulien CarsiqueView Answer on Stackoverflow
Solution 4 - HtmlhendrikswanView Answer on Stackoverflow
Solution 5 - HtmlMukeshView Answer on Stackoverflow
Solution 6 - HtmlVinod SrivastavView Answer on Stackoverflow
Solution 7 - HtmlaivenView Answer on Stackoverflow
Solution 8 - Htmlbb1950328View Answer on Stackoverflow
Solution 9 - HtmlrynopView Answer on Stackoverflow
Solution 10 - Htmljester96View Answer on Stackoverflow