How to create a Blog with Hugo e Google Docs as BackEnd

Research

In these days I have felt the need to create the blog you are reading. While surfing the web, I became aware of the static site generators, I have always known what they are and that they have always existed but I had never given them much attention. Though, while surfing deeper, I was attracted by Hugo, one of the many new engines to generate static websites.

No WordPress

I needed to have something static for I don’t have a server where I can install Wordpress or other CMS and, for a small personal blog, I don’t think it’s necessary and it is also too expensive. Finally I wanted the blog to be efficient and scalable and cross platform.

DRY

The first thing I thought about as a programmer was: how many operations do I need to do to deploy without a CMS? how will I bring my new content online? I am also a Google Docs lover and I like writing and having everything in one place. So I asked to myself: how do I combine Hugo and Google Docs without having to turn a thousand cranks?

I studied the structure of MarkDown content and I started looking for something to convert Google Docs to MarkDown. The only useful thing I found on the web was this Googlescript mangini/ gdocs2md: Convert to Google Drive Document to the Markdown format, suitable for publishing. to whom I offer my heartfelt thanks.

Although this script is very effective, I needed something more than receiving the conversion of an article by email. To have something more automated, I modified the script a bit and created the link script as follows:

Link to my github repos

The script converts all the documents listed in a Google sheet, organizes into folders by categories, extracts images from articles, adds the MarkDown header, tags and finally creates a zip file containing all the contents. I decided to make the zip public and therefore downloadable, ready for deployment.

I then created a sort of database using a Google sheet as a table with this struct:

In this way I have the possibility to deploy everything or to update only what I modified using the first field ToDeploy field.

Subsequently, I created another google script that receives the id of the folder where there is the previously created zip. The script finally returns the public url from which it is possible to download the zip with the contents.

function doGet (e) {
  params = JSON.parse (JSON.stringify (e));
  var docid = params.parameters.docid;
  if (docid == null || docid == "") return;
  var parentFolder = DriveApp.getFolderById (docid);
  if (parentFolder == null) return;
  var url = parentFolder.getFilesByName ("BlogProd.zip"). next (). getDownloadUrl ();
  return ContentService.createTextOutput (url);
}

Finally I put them all together in the following script linux sh.

So I can automate building and deployment:

#!/bin/bash
#ln -s /home/yourname/works/luciosoftsite/blog/ ~/luciosoftsite
#ln -s /home/yourname/works/luciosoftsite/blog/content/ ~/luciosoftblogcontent
#requirements wget|unzip|hugo
folderid=”your google doc folder id”
yourscriptid=”your google script id”
cd ~/luciosoftblogcontent;
retriveurl="https://script.google.com/macros/s/$scriptid/exec?folderid=$folderid”;
downlodUrl=$(wget $retriveurl -q -O -);
fileName="download.zip";
wget -c $downlodUrl -O $fileName;
unzip -o $fileName;
rm -f $fileName;
cd ~/luciosoftblog;
#hugo serve -D
HUGO_ENV="production" hugo --config config.yaml
firebase deploy

The script is very simple, it calls the google script to retrieve the download url.

Once the url is recovered, the script does the download of the zip, extracts the contents into the Hugo contents folder, executes the command to create Build, and finally calls firebase for deploy.

And even today the magic has happened.

Yes, I could have followed a thousand other ways, even safer and more efficient. But this is a starting point, my goal is bigger. I would like to turn the linux script into a docker container and the google script into a dynamic application with google login. But this is another story that, maybe, you will be able to see in another link at my blog :)

Link al progetto ghithub