Creating Web Blog Pages Using Google Docs

December 24, 2016

Richard Moore

As I start to blog and bring up a hand rolled website I was wondering how to could create blog content and incorporate it into the website structure I had created. Being a big user of Google Docs, the thought crossed my mind about the possibility of creating blog content using Docs. A bit of exploring through the menu structure revealed a File->Download as->Web Page (.html, zipped), and I wondered if that would work. When you select this option Google Docs places a zip file in your download folder.

The resulting zip file has the name of your document file without any spaces. Opening the zip file reveals a single html file and an images folder for the images in the document.

I simply extract file zip file contents to an appropriate folder in my development file structure of our family website.

Opening the html file in a browser reveals that it is a fairly generic html page that represents the document (I have only shown the visible content, the remaining content is vertically scrollable).

Getting the html file to display properly in the webpage with the proper headers, navigation, background color, and in the proper location as shown below requires some hand hacking of the html file. It would not be all that hard to write some Javascript or Python to automate this process and I will most likely tackle this soon.

Looking at the actual html code reveals a pretty clean and organized structure that turns out to be fairly easy to read through and modify.

The first thing I do is put in some whitespace to separate the <head> tag code from the <body> code so I can put in formatting code.

Once the <head> tag has white space around it I add some Javascript and styling to html tags.

And add the HTML Comment Box code at the bottom to have a comment section.

First the file formatting.js is imported, this is a collection of Javascript functions I created for doing generic website formatting. I suppose this could be done in CSS, but I am long time software developer (30+ years) and just find it more fun to do that stuff in code. In the <head> tag the function addGoogleAnalytics is called to add Google analytics tracking to the page. To hopefully drive some traffic to my blog posts keywords are added, someday I need to spend more time figuring this out. In the <body> tag section the <body> tag itself is CSS styled for the proper background color and to have 0 pixel wide borders. The Javascript function commonPageHeaderBar creates the top header section of the web page:

While the Javascript function commonNavigationButtons adds the navigation to the left side of the web page:

If the resulting html code is brought up in a browser, the position of the html code from Google Docs is located with a absolute location of 0,0 since the other page elements are positioned using absolute locations.

The current fix for this problem is to simply edit the padding style to have a left padding of 200 pixels and top padding of 300 pixels.

This allows the Google Doc html to display in the proper place.

Happy blogging!

Comments