As a developer, you know that you only see the source whenever you’re perusing HTML files on GitHub. It can come in handy to run the HTML file and view HTML on GitHub for various reasons, such as running a set of JavaScript tests.
But can you view HTML files directly from GitHub instead of just viewing their source?
While the first thing that might come to mind is GitHub pages, this answer has some limitations. The most obvious issue is that you must configure one repository at a time to work with GitHub pages. In other words, it is more of a static site generator. What is stopping GitHub from just displaying an HTML file directly?
View HTML on GitHub Method 1: Use Raw.Githack.Com
One way you can view HTML files directly from GitHub without spinning up an instance of GitHub Pages is to use raw.githack.com. Generally speaking, you’re just changing the URL to get the finished result.
Besides allowing you to view HTML on GitHub, this method also supports BitBucket and GitLab. To get started, select your repositories from your GitHub profile.
Select the repository you would like to view. When presented with the directory of files, open your Index.html file or equivalent.
Next, select Raw to view the source code for your file.
Once you have this page open, change the URL from raw.githubusercontent.com
To: raw.githack.com and hit enter. Voila! You can view your HTML file directly!
View HTML on GitHub Method 2: Use GitHub HTML Preview
This relatively new tool from a small developer is simple and easy to use. It is one of the simplest ways to view HTML on GitHub.To get started, copy the URL of your index.html file or equivalent while you preview the source in GitHub.
Then visit http://htmlpreview.github.io/ and paste your URL in the field. Hit preview and your HTML will be instantly previewed for you.
Method 3: Use GitHub Renderer
This free extension is designed to render HTML files on the fly as your cruise through GitHub. To get started, you’ll need to install the extension.
The easiest way to do this in Chrome is to download the extension as a .zip.
Look for the Download ZIP button on the GitHub project page. Extract/unzip the code somewhere. In Chrome, go to Menu, then select More Tools, then Extensions. Select the Developer mode checkbox and then click the Load unpacked extension button.
Now you can view HTML files as you browse through repositories on GitHub.
Simply click on the github-renderer bookmark to render them.
If you run into any issues, check to ensure that you have allowed pop-ups from *.github.com in your browser settings.
Final Thoughts: How to Run HTML Files Directly From GitHub
Generally speaking, you can only see the source when looking at HTML files on GitHub. For various reasons, such as running JavaScript tests, running an HTML file, and getting the finished result is helpful. Maybe you just want to see what an HTML file looks like.
Either way, there are a few ways you can view HTML files directly from GitHub without using GitHub Pages.
If I missed any good ones, or if you have any questions, please drop a comment below, and thank you for reading.
Feel free to check out my other GitHub tutorials, such as how to get your personal access token, or my favorite GitHub search tips.
