This is an example post showing different ways to embed PDF files in your Hugo blog posts.

Setup

First, place your PDF file in the static/documents/ directory. For example:

• static/documents/resume.pdf
• static/documents/whitepaper.pdf

Method 1: Simple iframe (Recommended)

This is the most compatible method that works across all browsers:

1
2

<iframe src="/documents/yourfile.pdf" width="100%" height="600px" style="border: 1px solid #ccc; border-radius: 4px;">
</iframe>

Example with actual file:

1
2

<iframe src="/documents/resume.pdf" width="100%" height="600px" style="border: 1px solid #ccc; border-radius: 4px;">
</iframe>

Method 2: Embed tag

Another approach using the embed tag:

1

<embed src="/documents/yourfile.pdf" type="application/pdf" width="100%" height="600px" style="border: 1px solid #ccc; border-radius: 4px;" />

Method 3: Object tag with fallback

This provides a download link for browsers that can’t display PDFs:

1
2
3

<object data="/documents/yourfile.pdf" type="application/pdf" width="100%" height="600px" style="border: 1px solid #ccc; border-radius: 4px;">
    <p>Your browser doesn't support PDF viewing. <a href="/documents/yourfile.pdf">Download the PDF</a> to view it.</p>
</object>

Responsive Styling

You can make the PDF viewer responsive with better styling:

1
2
3
4

<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
    <iframe src="/documents/yourfile.pdf" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;">
    </iframe>
</div>

Live Demo

Here’s a working example with an actual embedded PDF:

How to Use

1. Place your PDF files in static/documents/ directory
2. Reference them in your markdown as /documents/filename.pdf
3. Choose one of the methods above and paste the HTML code in your markdown
4. Adjust width and height as needed

That’s it! The PDF will be embedded directly in your blog post and visitors can view it without downloading.