In this article, we are going to learn How to see a page on GitHub as a normally rendered page to see a preview in a browser, without downloading, Users want to view a page (HTML files) on GitHub and want that page render in their browser instead of downloading the whole repository at their local machine allowing for efficient page viewing and will also save storage, time and network bandwidth.
There are some common methods that can be used to see a page on GitHub as a normally rendered page to see a preview in a browser, without downloading.
- Raw.githack.com
- htmlpreview.github.io
Note: This method only works for static html files if the file is dynamic This method will not work.
Approach 1: Using Raw.githack.com
This website offers a free service to view HTML files stored in GitHub repositories without downloading and directly render the files in the browser using a file raw link.
In this, we are Raw.githack.com website to open an HTML file from your own personal repository and paste the raw link of that file into the raw.githack.com website
- Step 1: Open your GitHub repository that contains a html file that you want to see the output in the browser
- Step 2: Click and Open the html file that you want eg index.html
- Step 3: Then click on the … more action button above the history button and click on copy permanent link. The GitHub link will be copied
- Step 4: Then go to Raw.githack.com and paste the link into the input box
- Step 5: Copy the URL in the production field and paste it into the browser
Note: Newly created files will take time to work
Now you can see the page rendered in the browse
Output:
Approach 2: Using htmlpreview.github.io
This allows you to render HTML files in GitHub without cloning or downloading the whole repositories. It is a client-side solution using a CORS proxy to fetch assets.
In this approach, we are using the htmlpreview.github.io to open an HTML file in another’s repository to display the page on the web and paste the raw link of that file into the htmlpreview.github.io website
- Step 1: Go to Github, search, and open a repository that contains a html file that you want to see the output in the browser
- Step 2: Click and open the html file that you want eg index.html
- Step 3: Then click on the … more action button above the history button and click on copy permanent link. The GitHub link will be copied
- Step 4: Then go to htmlpreview.github.io and paste the link into the input box
- Step 5: Click on the Preview button and the page will be rendered on a new tab
OR
- Step 4: On the browser enter this URL htmlpreview.github.io/? After that paste the copied link in the url and press enter the page will be rendered.
Output:
Previewing page using htmlpreview
This tool is highly useful for seeing a page directly on the browser rather than downloading it to your local computer and viewing it. It also links the file to different CSS files and other HTML files and they can also render when clicking on a nav link This also saves time, storage space, and network bandwidth.