Saturday, January 6, 2018

How to display PDF in a web page directly from Github?

Problem

This does not work when you try add this https://github.com/sumanbogati/images/raw/master/sample2.pdf  PDF-Url to your a web page, today we will know how to display PDF into a web page directly from Github.

The process of displaying PDF directly via Github

pages.github.com is used to create the static website and interestingly, the content of that website is served from the Github repository. You would create a repository on the Github, put the PDF under that repository/website, and give the URL of PDF on your website for displaying the PDF.

How to create a static website using Github?


Make the static website by creating the repository using your Github username, For example, if your username is sumanbogati, then you should create the repository named sumanbogati.github.io, When you land this sumanbogati.github.io into the browser, it shows the content of index.html of this repository. 

The below image gives some light on how to create a static website using your Github username, more details can be found at HERE



After creating the repository/website, now you need to put the PDF on that repository through the interface or command line. If you just place the PDF on a root of repository, then a PDF-Url would be something like,


If there is a PDF inside directory under the root of repository, then PDF-Url would be like,


Now you can use the HTML tag like embed, iframe or object for displaying a PDF on a web page.

<embed src="https://sumanbogati.github.io/dirname/sample.pdf" type="application/pdf" />

You can find the demo HERE.