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
orfalse
). 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
orfalse
). 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.