A personal blog is a great way to share your thoughts on the Internet. Though setting one up requires quite a bit of effort. A hosting service, a database, and a way to communicate with the data are all vital ingredients. Fortunately, Google Sheets presents itself as a pretty good database option that can be accessed by a simple JS function. A few advantages include,
- Familiar interface, easy data entry
- Enable collaboration with sharing permissions
- Cloud Sync with Google Apps
We’ll start off by creating a new Google Sheet with some sample data. Using Tabletop.js gives us access to the contents of the document in JSON format. We can then build an awesome UI with easily repeatable HTML templates to make the data easy to read.
It should be noted that this approach is not recommended for production environments.
1. Create a sheet
Login to Google Sheets. Create a new sheet, name it something cool like, “My Awesome Blog”.
Go to “File” > “Publish to the web”. Do not copy the given URL.
Share the sheet by clicking the “Share” button on the top-right. Make sure to copy the “Get shareable link”, it will be useful for the next step.
2. Add sample data
Add some sample data that we can later pull with our web app. Define meaningful column headings.
imgURL: The URL to the image thumbnail
tag: Category for the type of content
headline: Headline for the article
article: Written content
3. Test out the connection
We’re ready to take our database for a test-run.
Using tabletop.js we can access the contents of the given Google Sheets and display it on screen. Remember to replace the “key” with the URL from step 1.
4. Display data
Now that we can access the data, let’s make it look presentable.
Define a generic HTML template to serve as the view. To learn more about how the HTML template tag is used, check out the previous post.
<template id="entry-template"> <div class="entry-container"> <div class="thumbnail"> <img src="https://dummyimage.com/150x150.png" alt="Thumbnail" /> </div> <div class="content"> <div> <div class="block"> <div class="tag"> <h2>CODING</h2> </div> </div> <h2 class="headline"> This headline will be replaced </h2> <p class="publishedAt">May 11, 2019</p> <p class="article"> This article will be replaced </p> </div> </div> </div> </template>
5. Test it out
Our new Google Sheets powered blog is ready to go.
Experiment by updating entries to the “My Awesome Blog”, reload the webpage and see the content change.
You can now control your blog without ever leaving Google Sheets!