How to See an HTML Page on Github as a Normal Rendered HTML Page to See Preview in Browser, Without Downloading

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

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

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

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

How to display the rendered HTML of the code in Github Repository

Looks like you are going to need to use Github Pages:

https://pages.github.com/

They have a nice tutorial set up.

Page layout rendered differently on github-pages

When you open the console while loading your site on GitHub Pages, it shows :

The page at 'https://cory-kramer.github.io/' was loaded over HTTPS, but requested an insecure stylesheet 'http://yui.yahooapis.com/2.7.0/build/reset-fonts-grids/reset-fonts-grids.css'. This request has been blocked; the content must be served over HTTPS.

You are requesting a file served over HTTP while your website (GitHub pages) is using HTTPS. This is not allowed by browsers for security purposes.

Because of that, the yui CSS file is not loaded, and your layout breaks.

As far as I can tell yahooapis (that you are using) does not provide an HTTPS version of its CDN, it should be easier for you to copy the file and add it to your GitHub repo, and then reference it relatively (as you did with your resume.css file)

As a side note : it works locally when you test on your machine, because when you opens it, it does not use http protocol (the url should start with file:// and not http://), so you are allowed to request non-secured http files.

---

Related Topics