How to Run HTML Files Directly from Github, Instead of Just Viewing Their Source

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

View html file in github repo?

This may be because the file you're trying to preview isn't a complete HTML document.

Make sure you add <!DOCTYPE html>, <html>, <head>, and <body> tags to make it into a complete HTML document, then try again.

Viewing interpreted HTML, rather HTML source, on github and gist

Is it possible to point others to an HTML file on github.com such that when they view the file, they view the HTML page rather than its source?

Only by using Github Pages

Normally on github, and even when the extension in the URL bar is .html, the HTML code is not interpreted by the browser (why?).

Because the purpose of Github is to manage code, not to host webpages.

URLs do not have file extensions. Browsers determine what to do with content based on the Content-Type header.

When an HTML page is viewed on gist.github.com, the HTML page is indeed seen rather than its source. Is this the main (or a main) feature of the difference between github and gist?

It doesn't when I test it.

Github proper is for hosting Git repositories.

Gist is for showing ad-hoc code samples managed by git, but without the full interface to the repository.

Can I edit a html file directly on Github (on my browser, not desktop)?

Yes, you can do it on GitHub itself.

  1. In your repository, browse to the file you want to edit
  2. In the upper right corner of the file view, click to open the file editor.

Sample Image


  1. On the Edit file tab, make any changes you need to the file. I am going to add a new paragraph as "new paragraph".

Sample Image


  1. Then commit the changes. At the bottom of the page, type a short, meaningful commit message that describes the change you made to the file. You can create a new branch and commit the changes as follows simultaneously as follows. I add the branch name as "new-branch".

Sample Image


  1. Next, open a pull request to merge your changes to the main branch.

Sample Image


  1. Finally you can merge the changes from your branch to the main branch.

Sample Image


  1. Now you can view the updated file.

Sample Image

Can I view changes to a GitHub hosted page before committing to master?

While your pages are hosted on GitHub, they are rendered differently depending on your GitHub pages settings.

If you are using Jekyll as a static site generator with GitHub Pages, you can then setup your GitHub Pages site locally with Jekyll.

The idea remain to check your pages before pushing to GitHub.

Including JavaScript files from GitHub into HTML pages

You will be able to do it with a URL similar to this:

https://rawgit.com/h5bp/html5-boilerplate/master/src/js/plugins.js

Note that this is not the same as clicking on the "raw" button within GitHub;
that button will also give you a clean version of the file, but it will be sent
with the wrong headers.


A Word of warning; the file is not not being served from GitHub. It is being
redirected through the rawgit.com domain. As is stated on https://rawgit.com:

Hey! rawgit.com is just for fun and is not associated with GitHub in any
way.

Keep in mind that the owner of that domain is now in control of the traffic and
is able to manipulate it as they see fit.



Related Topics



Leave a reply



Submit