A simple pdf embedding solution for Jekyll via Google Drive

I recently did some digging trying to figure out a good solution for embedding pdfs on a Jekyll site. I was putting together a custom theme for a friend with an interesting set of requirements:

• two post types: text, pdf
• multiple non-technical contributors
• prose.io CMS
• Github hosted

The final solution I came up with results in a page that looks like this:

Because they would be updating via prose.io rather than a local machine, I needed a way to embed them from somewhere other than GitHub, which doesn’t seem really optimized for that sort of file anyway.

There are some services out there for this and among them Issuu came closest to offering what we needed. However, their free tier injects ads into the iframe, and anyway all the features seemed like overkill for just displaying a pdf.

The best solution I could find was sort of a hack, embedding them as publicly shared files from Google Drive.

Setting up a pdf layout in Jekyll

So first let’s set up a new layout, pdf.html, within _layouts:

Note that if your CSS sets the body width to less than 100%, the embed won’t be full-screen like in my example.

Getting the embed code, copying and pasting

The process is:

1. upload pdf to google drive
2. make pdf public
3. copy embed code
4. paste into post
5. change inline width and height values to 100%

So once that’s set up, adding pdfs to the site is just a question of uploading to google docs and getting the embed code. The important thing here is to make sure the file’s sharing settings are set to “public”. Here’s a screencast showing where all the buttons are:

Drop that into your post, change the default width and height values to 100%, and you should have a file that looks something like this:

Perhaps there are more elegant solutions out there, but this is pretty straightforward, simple, free, and it works. Source available on GitHub if you’re curious.

I’m not super proud of this repository in hindsight, but have received some nice emails thanking me for this solution so figured I should leave it up as a public service.