A very simple CMS using google docs and BSS

Following on from an earlier post (User Defined Content), I expanded my code to create a very simple CMS using google docs to allow the client to edit the page.

Setup:

Google Docs:

Create a doc for each page you want to manage, add your text, then File>Share>Publish to Web

Copy the link in the publish to web dialog box to be added to the relevant gdoc in the javascript

Bootstrap Studio

In your bss page create an empty heading element with an ID of showtitle, and an empty div with an ID of showcontent

bsdesign file available here if you want to test: simplecms.bsdesign - Google Drive

It uses just one js file:

var url = location.href.split("#")[0]; //set url removing any anchors
url = url.split("?")[0]; //remove any parameters from url
var gdoc = ""; //set gdoc to empty

/*set the homepage*/

if (
  url.includes("index.html") ||
  url == "https://cms.bss.design/" ||
  url == "http://cms.bss.design/" //change to YOUR homepage with https and http
) {
  gdoc =
    "https://docs.google.com/document/d/e/2PACX-1vRVG8Bsugj9h041OCos6RGInDu7SYeUfh04gn8FtgPHHBKJX3jkT3UGBfuH2WiVNyoJ3JxhyQEC3uYD/pub";
}

/*set other pages*/

if (url.includes("sample-page.html")) {
  gdoc =
    "https://docs.google.com/document/d/e/2PACX-1vR4z7VBP67vY6P9m_EnG6eImP8-v1roN8Y7DL5S5UcA5QhX9iPuIMQR0w128RE6NpVyjAZLGo8dpmeS/pub";
}

if (url.includes("another-sample.html")) {
  gdoc =
    "https://docs.google.com/document/d/e/2PACX-1vSvvJknJMPbWBmweVB5vKNoXhYiyBJzvAKOCZNrpMKHEf5-hoG2-sLjadP_Xb-IW1S3nGPrmMDKu0PA/pub";
}



// ---------------------------------------------------------------------------------------------

if (gdoc != "") {
  fetch(gdoc)
    .then(function (response) {
      return response.text();
    })
    .then(function (html) {
      var parser = new DOMParser();
      var doc = parser.parseFromString(html, "text/html");

      var title = doc.querySelector("#title").innerHTML;
      var content = doc.querySelector(".doc-content").innerHTML;
      content = content.replace(/<span\/?[^>]+(>|$)/g, ""); //remove spans created by google docs

      document.querySelector("#showtitle").innerHTML = title;
      document.querySelector("#showcontent").innerHTML = content;
      document.querySelector("#showcontent img").removeAttribute("style"); //remove the google docs styles for images
    })
    .catch(function (err) {
      console.warn("Something went wrong.", err);
    });
}

Example here:

3 Likes

hi @richards
Well done, this is really useful.

2 Likes

I love the BSS Community. Posting amazing content, such as this. I’ve been trying to create a Publii theme to match my website to import that, but this seems easier to keep track of.

I’ll definitely be playing around with this soon. Great job, @richards ! and thank you for the BSDesign File.

@GregoryAM You are welcome.

I like the idea of Publii, I looking into incorportating it into a news site that I manage, unfortunately it would have taken a lot of setup and third party cloud syncing to allow multiple editors in different locations. Also (probably an error on my part) it was taking forever to upload 1000+ pages everytime I made a change. That was a few years ago, I might take another look when I have a suitable project come in.

One of the concerns I have about my code, is how well it will perform for SEO as during a crawl there is no content until the js has run, I know google are developing a bot that will crawl after the dynamic content has loaded, but I don’t know if it will become the norm. I might have to create a (non-latin) dummy site and see if it gets picked up.

1 Like

@richards Honestly, Publii has been the coolest CMS that I’ve found lately. The only thing that I’m trying to do now is create my own theme to match my website.

I’ve played around with 11ty, which that was a great CMS. I just didn’t like the idea that I had to move the website outside of Bootstrap Studios hosting over to Netlify.

Now, for the idea of using Google Docs as a CMS. I think I can get behind that. I use Google Products a lot and this may make creating posts a lot easier since I use Google Docs on my phone. I’m not too worried about the idea it’s not being Crawled, since the blog I plan on creating is just an extension of my blog on Tumblr.