A very simple CMS using google docs and BSS

Showcase
1

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:

7 Likes
2

hi @richards
Well done, this is really useful.

2 Likes
3

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.

4

@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
5

@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.

6

Take a look at DropInBlog. It’s a nice blog api that costs about $12/month if you sign up for a year. It integrates with BSS and is very easy to use. It takes just one minute to embed into any webpage. It also allows for custom CSS and JSON API calls if you so choose. I like that it handles all the file storage. It is SEO friendly and you can upgrade if you need a team approach. They also provide for a free trial.

7

The issue is finding a decent FREE blog platform. Monthly subscriptions are the bane of my existence.

I tried this free CMS out many years ago on a client’s site, and from my recollection, it was pretty easy to setup and integrate. He ended up never using it, and then we lost him as a customer, so I never got to far into it, but I may give it another look.

Of course, you do need to have you own hosting to use this.

UPDATE: I just saw on their home page that this CMS is no longer being developed as of March 2022. Oh well.

8

Free is always a better option but when designing web applications for clients it’s much better to off-load as much as possible. Plus the DropInBlog is better utilized when consumers are creating Blogs on a consistent basis.