Embedding PDFs in Your Hugo Static Website

Embedding PDFs in a Hugo static website can be incredibly handy in different scenarios. In my case, I wanted to add my CV to my website. However, I’ve also seen other applications, like adding documentation inline with text.

When I started, the documentation I found wasn’t comprehensive enough, and I had to piece together my solution from different sources. My main source of help was this GitHub repository. Here’s the gist of what I learned:

Using the Hugo Embed PDF Shortcode

There’s a Hugo shortcode developed specifically for Hugo-based websites. This shortcode allows you to embed a PDF file directly into a page on your Hugo site. It’s developed using the PDF.js library by Mozilla.

Setup

Method 1: Install as a Git Submodule

First, add the shortcode as a Git submodule:

git submodule add https://github.com/anvithks/hugo-embed-pdf-shortcode.git themes/hugo-embed-pdf-shortcode

Then, edit your config.yaml to include:

theme = ["hugo-embed-pdf-shortcode", "YourCurrentTheme"]
enableInlineShortcodes: true

Usage

In your Hugo website, place the following shortcode in any of your markdown pages:







    
        
    
       / 
    
    [pdf]
Additional Options

To hide pagination:





    
        
    
       / 
    
    [pdf]

To render a specific page number:





    
        
    
       / 
    
    [pdf]

To hide the loading spinner:





    
        
    
       / 
    
    [pdf]
Parameters
  • url (required): The relative location of the file.
  • hidePaginator (optional): Boolean (true or false). Hides the paginator for single-page documents.
  • renderPageNum (optional): Integer (any number from 1 up to the last page number in the document). Renders that specific page on initial load.
  • hideLoader (optional): Boolean (true or false). Hides the loading spinner while your document loads.

In my case, the cv.pdf file and the CV page (index.md) are located in the content/cv directory. My index.md for the CV page looks like this:

---
title: "Amir Kiani's CV"
---

[Download PDF](https://amirkiani.info/cv/AmirKianiCV.pdf)





    
        
    
       / 
    
    [pdf]

And that’s it! Now my CV is embedded directly on my website page, making it easily accessible and more professional-looking.