How to link a pdf which opens a pdf-viewer in GitHub pages

I am very new to GitHub and to web developing. I am creating a static personal page on GitHub pages. I have a set of slides and I managed to link to them using a picture. However, I am stuck with the solution below, which opens my directory and previews the file but does not open the slides nicely in a pdf-viewer.

<a href="" class="image fit" ><img src="images/marr_pic.jpg" alt=""></a>

I am too noob to understand the solutions below:

Opening PDF in a browser with Github Pages

The only suspicion that I have is that this might be due to the fact that the website has not been published yet, but I am just speculating. Could anyone explain to me how to fix this?

Crossposting from here

1 Like

From the HTML code that you provided, it looks like you’re trying to grab a PDF from a separate GitHub repository that is non-relating to your GitHub Pages  one. To fix this issue, it is recommended that you upload the PDF to your main  GitHub Pages repository and then referencing it in your HTML code. For example:

<a href="/pdfs/ProjMarr_slides.pdf" class="image fit"><img src="images/marr_pic.jpg" alt=""></a>

^ this is also assuming you put the PDF file in its own respective pdfs folder. If you still have a problem getting it to open correctly, try adding this to your <a> tag:


Hope this works out well!


Thank you so much, you have been most helpful and kind.

For those who might be reading this because of a similar issue, I want to point out two minor things:

  1. The depository was already the one pertaining to my GitHub Pages. The issue was that by calling it as above, I was (I think) effectively treating it as an external depository;
  2. Once I used the correct method for calling the file, it worked. The only thing I had  to change (relative to your suggestion) was that I had to delete the firts “/” you put in your path.

The working solution was:

<a href="pdfs/ProjMarr_slides.pdf" class="image fit"><img src="images/marr_pic.jpg" alt=""></a>

instead of

<a href="/pdfs/ProjMarr_slides.pdf" class="image fit"><img src="images/marr_pic.jpg" alt=""></a>

Thank you so much for your help.