If you build it, they (might) come - using Google Docs as a static site CMS
April 18, 2019•650 words
With just a little bit of Javascript and HTML, it is possible to set up Google Docs as your WYSIWYG ("What You See Is What You Get") editor and CMS (Content Management System).
Why would anyone use this you might ask? I am not sure, but the idea that anyone who had some familiarity with a Word processor (be it Microsoft Word or Google Docs) could design and publish content to their website with relative ease seemed pretty cool to me.
This is the base HTML and Javascript that you'll need:
<!DOCTYPE html>
<html>
<head>
<meta content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" name="viewport">
<title>My Awesome Website</title>
</head>
<link href="/index.css" rel="stylesheet" type="text/css">
<body>
<div class="layout">
<iframe src="https://docs.google.com/document/d/e/2PACX-1skksksoow929-hjGR_M1BKIbeKRf8SP7sG9eJuF8OBDSBAm7q0gXzmmKwqZFQUCNeTVvswz2WNT8no/pub?embedded=true"></iframe>
</div>
</div>
</div>
<script>
// get all iframes that were parsed before this tag
var iframes = document.getElementsByTagName("iframe");
for (let i = 0; i < iframes.length; i++) {
var url = iframes[i].getAttribute("src");
if (url.startsWith("https://docs.google.com/document/d/")) {
// create div and replace iframe
let d = document.createElement('div');
d.classList.add("embedded-doc"); // optional
iframes[i].parentElement.replaceChild(d, iframes[i]);
// CORS request
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.onload = function() {
// display response
d.innerHTML = xhr.responseText;
};
xhr.send();
}
}
</script>
</body>
</html>
So, what is this doing you might be wondering. I have a basic HTML template here, with a basic CSS file linked at the top to style my page. Then, it is a combination of iframes, div elements and a CORS request (Cross-Origin Resource Sharing) made via Javascript.
The content is brought in first as an iframe. Within Google Docs, it is possible to publish documents online for the public to see either as a link or iframe embed. We want to enable publishing and copy over the iframe embed code into our HTML file (as I have done above).
Now, what the Javascript / CORS request does is replaces this iframe into div elements that fit within the HTML. Iframes look ugly and often have scaling issues, but the CORS request here is both pulling content from the Google Doc and reformatting it as a div so it looks better. This way the content in the Doc follows the CSS page style we set.
Because we are using Google Docs, it means that there is no worry about storage limitations. Any image we add into our Doc does not count against your Google Drive storage limit, and can be inserted from anywhere using the "Add image via URL" option. Basic tables work as well!
Now, obviously there are some limitations to this system. Firstly, you are limited by Google Docs in terms of what kind of text styling / formatting you might want. You can't have scripts or anything media besides images (video and audio) within the Doc (although there are a few hacky workarounds to this, namely publishing via Google Slides and not Docs). Things look a bit janky on mobile browsers (especially when you have a few tables inserted), and I haven't quite figured out a way around this.
For a site like a blog or journal that is text + image focused, this system might be of some use to you. Static site hosting is free through services like GitHub, Gitlab and Netlify, so once you've set up the HTML file(s) you need this is a very inexpensive way of hosting a site (with the option of adding a custom domain and SSL for free as well!).
Give it a go and see what you can do!