Adding Google Docs to website
Given that the Academic website theme comes with a place to upload talks, I thought I might as well upload the slides for my Senior Honors presentation. Unfortunately, this was a slightly more difficult task than I anticipated. The default format for slides in Hugo appears to be Markdown slides, which is fine, except when your talk was made in Google Slides.
Google Slides to Markdown?
My first thought was that there must be some tool to convert a Google slides talk into a Markdown document. For whatever reason, there are several tools (like this GitHub repo) to go the other direction, from Markdown to Google slides. I found a GitHub repo gdocs2md that claimed to go in the other direction, but the script provided doesn’t currently run (if anyone is a whiz at Google Apps and wants to take a stab at fixing up this code, it would be a great tool!). There is a Google Drive add-on called GD2md-html that converts Google Docs to Markdown or HTML, which should be useful for the future, but it doesn’t help with Google Slides.
Embedding Google Slides in Hugo
Having abandoned the idea of just converting my current slides into Markdown and going on my merry way, I started looking for a way to embed the Google Slides themselves into my website.
Hugo shortcodes
Hugo has certain snippets called shortcodes that are designed to address the problem of having to add raw HTML into Markdown. These shortcodes help render a content file according to a template created by Hugo. For example, the shortcode figure adds HTML functionality to the Markdown image syntax. There are shortcodes for Instagram (instagram), Vimeo (vimeo) and Twitter (tweet).
The gdocs shortcode
One of these shortcodes, gdocs, allows you to embed all Google doc types (Slides, Docs, Sheets, etc.) into your website. The HTML code for the shortcode can be found in the hugo-academic GitHub repo: https://github.com/gcushen/hugo-academic/blob/master/layouts/shortcodes/gdocs.html.
I tried inserting the following into the index.md file for my talk below the line with three + signs:
{{< gdocs "https://docs.google.com/presentation/d/e/2PACX-1vTsSj-oftLksGEKTkzCoBSIpzooO61ZMGAUzoGBv7u20OzMQK8ctX3gCpWTMm4UowrrWumFrdQsY0Cd/embed?start=false&loop=false&delayms=5000" >}}I got the URL by going to my Google Slides, and clicking File > Publish to the web. I selected Embed and copied the link following src=.
Unfortunately, this didn’t result in anything showing up on my page besides a large blank space where I assume Hugo was trying to put my presentation. I tried some variations on the above code, including adding src= before the URL (no change), and moving the entire code snippet above the +++ line in index.md (results in the error ” unmarshal failed: Near line 65 (last key parsed ‘image’): bare keys cannot contain ‘{’ “).
HTML code
At this point, I was feeling pretty discouraged, when I happened upon a Hugo forum post with the HTML code someone used to embed a Google Slides presentation. I have hardly any familiarity with HTML, but clearly shortcodes and I weren’t getting along very well, so I decided to give it a shot. I copied and pasted the code from the forum, replacing the URL following src= with my link from above, and voila! My slides appeared on the post.
Here is the code for reference:
<p><iframe src="https://docs.google.com/presentation/d/e/2PACX-1vTsSj-oftLksGEKTkzCoBSIpzooO61ZMGAUzoGBv7u20OzMQK8ctX3gCpWTMm4UowrrWumFrdQsY0Cd/embed?start=false&loop=false&delayms=5000" frameborder="0" width="800" height="600" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe></p>Moral of the story
It seems like shortcodes can be a really valuable feature of Hugo, especially should I ever need to include a video of some kind (or if I actually start using Twitter again and tweet something worth sharing, two improbable events). In the case of Google Docs/Sheets/etc., however, just using the HTML code snippet seems like the easiest option (and is a good motivation to learn HTML at a later date).