The thoughts of Spicer Matthews

Using Hugo with Google Docs

Date: Aug 01, 2019

Quick tip alert! This is how I import Google docs into Hugo.

I am becoming a big fan of Hugo to build static sites like this one and this one. Since Hugo does not ship with any fancy GUI as other content management systems do -- typically you produce your content within your text editor such as Atom.

Editing Hugo Post in Atom

Text editors are great but they are not ideal for producing well-thought-out written content. I like to produce my content in Google docs and then import it into Hugo. Below is a video showing how I do it. The basic steps are as follows:

  1. Write your post within Google docs. Adding any basic formatting you want.
  2. Export the document to HTML (File -> Download as -> Web page).
  3. Open the HTML in your text editor and copy the content of the body.
  4. Visit https://imperavi.com/redactor and clear the content of the sample editor on the home page.
  5. Copy your HTML body into the editor. Then click view source. You now have clean HTML.
  6. Copy the clean HTML into your Hugo post and make any tweaks you need.

Hope you find this helpful.

Happy coding!!