Using Google Drive and Vue.js to Power A Blog
First things first, If you are interested in seeing how this blog post would look after being rendered through the web app, check it out on the website. If you’re curious to see what the Google Drive folder looks like that corresponds to the project, it’s also linked on the blog.
The Idea
A few weeks ago, while helping my friend with her blog, I realized how difficult it was to edit content on her current setup. Not only did the site editor take forever to load, but every page had to be designed and depending on the content, the formatting would get all sorts of messed up. All of this was just very overwhelming to non-tech savvy people who had never worked with web design before. So I thought, What is an easy, fast way to update content?
Using Google Drive to run a blog improves several things for beginner bloggers:
- There is little to no learning curve because most people are familiar with Drive
- The built-in collaboration features make it easy to share/edit drafts
- Modifying a document in Drive tends to be faster than loading an entire webpage editor to change its content
- Most importantly — it’s FREE
First, I had to determine what I wanted the web app to actually do. I wanted to be able to take advantage of all the perks of using Google Drive so I had to design a web app that did so. For my prototype, I cut it my long list of feature ideas to a two basic things: create/host a website with zero code and edit changes instantly. I had my idea, now I just had to figure out how to actually do it.
Creating a Minimum Viable Product
In most simplified terms, Drive2Site has three separate components. Enjoy my little sketch from the early days haha.
- Client — handles the rendering and user input
- Server — calls the database and Google Apps Script
- Google Apps Script — interacts with Google Drive to return formatted data
I decided to start with the Google Apps Script to convert a Google Doc to the proper HTML tags that will be stylized depending on a blog’s template. While, Google Drive does have a default “Export to HTML” button, its results are very unreliable and awkwardly formatted. I decided to create my own script that reads the different elements of a Google Doc (Headers, Paragraphs, Images, Links, etc.) and turns them into code chunks. I found excellent sample code on TechCloud. That code was actually the base of my project, I just added more specific listeners to allow for more customization.
The backend and frontend for this project where pretty straightforward — call the Google Apps Script API and store that data in a MongoDB. The only trick part was deciding when to update the document, but that can be an entire article on its own.
For this project, I decided to use a MEVN Stack — it was just overall the best blend of tech that I have some familiarity with and tech that matched my project goals well. A MEVN Stack consists of MongoDB, Express, Vue.js, and Node. For brevity, I’ll avoid the specifics of the code I used to get everything working, but if you want me to go into depth in future updates, just leave a comment or mention me on Twitter.
For my minimum viable product, I came up with the following requirements
- Script properly converts Doc to HTML
- Page knows when to update from Google Drive
- Projects can be created from the website
- All data is stored in MongoDB
- Google OAuth for Login
- At least one template to show how HTML is stylized
Here are some screenshots of the project creation process.
The Future
Currently, I only have the MVP done so obviously there is a lot of work to do. I’m trying to work as efficiently as possible in order to push out the private beta test. If you have any interest at all in this project, I recommend sign up for our mailing list because I’m going to send invites to the first 500 people on the list to the closed beta.
Well, that’s it for my first update. If there’s anything you want me to discuss (e.g. going into more depth with the tech) or if you have any feedback on the project, just give me a shout on Twitter.
