# A very simple CMS using google docs and BSS

**URL:** https://forum.bootstrapstudio.io/t/a-very-simple-cms-using-google-docs-and-bss/9875
**Category:** Showcase
**Created:** [January 23, 2023, 7:09pm UTC](https://forum.bootstrapstudio.io/t/a-very-simple-cms-using-google-docs-and-bss/9875 "2023-01-23T19:09:00Z")
**Posts on this page:** 8
**Page:** 1

<div class="post-metadata">

### Author: ![richards](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/richards/32/3163_2.png) [@richards](https://forum.bootstrapstudio.io/u/richards)
#### Post date: [January 23, 2023, 7:09pm UTC](https://forum.bootstrapstudio.io/t/a-very-simple-cms-using-google-docs-and-bss/9875/1 "2023-01-23T19:09:01Z")

</div>

Following on from an earlier post ([User Defined Content](https://forum.bootstrapstudio.io/t/user-defined-content/9869)), 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](https://drive.google.com/file/d/1UOTh_x-fPnSSams9vpVTUK0rdV9tH5Gc/view?usp=sharing)

It uses just one js file:

```auto
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:

> **[A Simple CMS](https://cms.bss.design)**
>
> A simple CMS using google docs and boostrap studio

---

<div class="post-metadata">

### Author: ![R.Omer](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/r.omer/32/3158_2.png) [@R.Omer](https://forum.bootstrapstudio.io/u/R.Omer)
#### Post date: [January 24, 2023, 5:38am UTC](https://forum.bootstrapstudio.io/t/a-very-simple-cms-using-google-docs-and-bss/9875/2 "2023-01-24T05:38:56Z")

</div>

hi @richards  
Well done, this is really useful.

---

<div class="post-metadata">

### Author: ![GregoryAM](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/gregoryam/32/5101_2.png) [@GregoryAM](https://forum.bootstrapstudio.io/u/GregoryAM)
#### Post date: [January 24, 2023, 7:03am UTC](https://forum.bootstrapstudio.io/t/a-very-simple-cms-using-google-docs-and-bss/9875/3 "2023-01-24T07:03:10Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![richards](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/richards/32/3163_2.png) [@richards](https://forum.bootstrapstudio.io/u/richards)
#### Post date: [January 24, 2023, 10:25am UTC](https://forum.bootstrapstudio.io/t/a-very-simple-cms-using-google-docs-and-bss/9875/4 "2023-01-24T10:25:57Z")

</div>

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

---

<div class="post-metadata">

### Author: ![GregoryAM](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/gregoryam/32/5101_2.png) [@GregoryAM](https://forum.bootstrapstudio.io/u/GregoryAM)
#### Post date: [January 25, 2023, 6:54am UTC](https://forum.bootstrapstudio.io/t/a-very-simple-cms-using-google-docs-and-bss/9875/5 "2023-01-25T06:54:08Z")

</div>

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

---

<div class="post-metadata">

### Author: ![bound4glory07](https://forum.bootstrapstudio.io/letter_avatar_proxy/v4/letter/b/b487fb/32.png) [@bound4glory07](https://forum.bootstrapstudio.io/u/bound4glory07)
#### Post date: [February 16, 2023, 12:54pm UTC](https://forum.bootstrapstudio.io/t/a-very-simple-cms-using-google-docs-and-bss/9875/6 "2023-02-16T12:54:01Z")

</div>

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.

> **[Embed a Blog into Your Website in 3 Minutes - DropInBlog](https://dropinblog.com/)**
>
> Cloud Based. Integrates with Your Site Template - inherits your CSS. JSON API Available.

> **[Integrate your Blog with JSON API or Simple HTML - DropInBlog](https://dropinblog.com/integration/)**
>
> Cloud Based. Integrates with Your Site Template - inherits your CSS. JSON API Available.

> **[Blog Examples - DropInBlog](https://dropinblog.com/examples/)**
>
> A collection of live blog examples. Here's the best blogs all using DropInBlog.

---

<div class="post-metadata">

### Author: ![printninja](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/printninja/32/481_2.png) [@printninja](https://forum.bootstrapstudio.io/u/printninja)
#### Post date: [February 16, 2023, 4:22pm UTC](https://forum.bootstrapstudio.io/t/a-very-simple-cms-using-google-docs-and-bss/9875/7 "2023-02-16T16:22:28Z")

</div>

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.

> **[b2evolution blog/social CMS - A complete engine for your website!](https://b2evolution.net/)**
>
> One blog. Multiple blogs. Photo albums. User community. Discussion forums. Online manuals. b2evolution can run them all on a single installation. Right out of the box — plugins fully optional.

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

---

<div class="post-metadata">

### Author: ![bound4glory07](https://forum.bootstrapstudio.io/letter_avatar_proxy/v4/letter/b/b487fb/32.png) [@bound4glory07](https://forum.bootstrapstudio.io/u/bound4glory07)
#### Post date: [February 16, 2023, 5:05pm UTC](https://forum.bootstrapstudio.io/t/a-very-simple-cms-using-google-docs-and-bss/9875/8 "2023-02-16T17:05:30Z")

</div>

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.
