Opening PDF in a browser with Github Pages

Question

I am using GitHub Pages to host my website. I have a PDF file that I want visitors to be able to open directly in a browser. But when I upload the PDF file to GitHub Pages and link to it it opens in GitHub's viewer. Is there any way to open the PDF in a browser? I do not want to upload the document to dropbox or Google Drive as these services are not available in certain countries.

Using a raw URL would lead to download. But I would like to have the file open in the browser.

Answer 1

Instead of loading your PDF directly from GitHub, include it in your GitHub Pages branch as a static file. This can be done by simply putting the file somewhere in your source tree:

Every other directory and file except for those listed above—such as css and images folders, favicon.ico files, and so forth—will be copied verbatim to the generated site. There are plenty of sites already using Jekyll if you’re curious to see how they’re laid out.

So put the PDF somewhere that makes sense, for example in pdfs/foo.pdf.

To make a link to this PDF work both locally and on GitHub Pages, Jekyll recommends the following (note especially point #2):

Sometimes it’s nice to preview your Jekyll site before you push your gh-pages branch to GitHub. However, the subdirectory-like URL structure GitHub uses for Project Pages complicates the proper resolution of URLs. Here is an approach to utilizing the GitHub Project Page URL structure (username.github.io/project-name/) whilst maintaining the ability to preview your Jekyll site locally.

1. In _config.yml, set the baseurl option to /project-name – note the leading slash and the absence of a trailing slash.

2. When referencing JS or CSS files, do it like this: {{ site.baseurl }}/path/to/css.css – note the slash immediately following the variable (just before “path”).

3. When doing permalinks or internal links, do it like this: {{ site.baseurl }}{{ post.url }} – note that there is no slash between the two variables.

4. Finally, if you’d like to preview your site before committing/deploying using jekyll serve, be sure to pass an empty string to the --baseurl option, so that you can view everything at localhost:4000 normally (without /project-name at the beginning): jekyll serve --baseurl ''

So now you can link to your PDF with {{ site.baseurl }}/pdfs/foo.pdf.

Answer 2

It's very easy to display Pdf in browser from Github static page, for that you need approach following process,

1. Make the static website/repository using your Github username, for example, if the username is sumanbogati then repository would be sumanbogati.github.io
2. Put the desired pdf in that repository
3. Now locate the Url of Pdf wherever you want

For example, to display pdf in Html web page

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

This is an instant demo. More details can be found Here.

Answer 3

Place the PDF file in a folder like; www.website/pdf/example.pdf this will stop the file downloading outside of the root directory.

The steps are:

1. Create a new file in main directory.

2. Name file /pdf/ and save it.

3. Upload example.pdf file to this folder

Result:: PDF is viewable at; www.website/pdf/example.pdf

4. Optional step to avoid the .pdf URL. Create a index.html file in this folder and create a blank html file with PDF embed tag:

Answer 4

Suppose your personal website is hosted in a Github page as follows:

https://username.github.io

The repository should be name as username.github.io. If you have a pdf file named document.pdf and you place it in the directory folder then you should be able to open it directly in the browser through the following link:

https://username.github.io/folder/document.pdf

To allow the user to open the pdf in a new window in the browser, you may use the following HTML, where "PDF" points to the link:

<a href="username.github.io/folder/document.pdf" target="_blank">PDF.</a>

Answer 5

You can link it this way

<a target='_blank' href={require('path/to/pdf/file')}>PDF Doc</a>

Then, when you push to GitHub page, you will see your pdf file path as so

https://userName.github.io/repoName/static/media/pdfFileName.hashNumber.pdf

I believe it works if you import the file instead of using require as well but I haven't tested with that.