Welcome to the first post on my website! In this post, I talk about why I chose to use Google Drive as my CMS, and how to get started using the Google Drive API to serve web page content (like a CMS!).

The source code for this blog (written with NextJS), as well as the code shown in this post can be found in my github repository.

---

Blogging on the interwebs again

After a half-year hiatus from frontend work, I chanced upon this indieweb post and felt the urge to put up a webpage in my own corner of the web again.

So after a couple of evenings messing around with headless CMS (Content Management System) providers, I decided to go with Google Drive as my CMS because:

1. It has a functional API that I can utilize for serving blog content
2. No need to manage deployment of a backend
3. Free; or at least no additional cost to me
4. I can use Google Docs to author my posts

Exhibit 1 (me writing this post using Google Docs and Markdown):

How it was done

Prerequisites

Apart from an existing google account, a service account is also required for your site to authenticate with the Google Drive API. Refer to this link on how to create a service account using the google cloud console.

After creating your service account, grab the following:

• Google service account email
• Google service account private key (Keep this secure, and don’t share it)

Using the Google Drive API

Instantiating the Google Drive API Client is simple. You create a GoogleAuth object with your credentials and the desired scopes (permissions for the resources that can be accessed and the actions that can be performed on them).

import {GoogleAuth} from "google-auth-library";
import {google} from "googleapis";


const credentials = {
    client_email: process.env.GOOGLE_SERVICE_ACCOUNT_EMAIL,
    private_key: process.env.GOOGLE_SERVICE_ACCOUNT_KEY ?.replace(/\\n/g, '\n')
    // note: My account key string contained some newline literals like ‘\n’ that I had to get rid of
}


const auth = new GoogleAuth({credentials,   scopes: [
    'https://www.googleapis.com/auth/drive',
    'https://www.googleapis.com/auth/drive.appdata',
    'https://www.googleapis.com/auth/drive.file',
    'https://www.googleapis.com/auth/drive.metadata',
    'https://www.googleapis.com/auth/drive.metadata.readonly',
    'https://www.googleapis.com/auth/drive.photos.readonly',
    'https://www.googleapis.com/auth/drive.readonly',
],});


const driveService = google.drive({version: "v3", auth })


export default driveService;

Fetching Text Files

Next, you need to do the following:

1. Create a drive folder for your posts (which will be simple text files)
2. Share this folder with your service account. Note the folder id, which will be the string that follows at the end of the path, i.e.https://drive.google.com/drive/folders/your-folder-id
3. Upload a text file into this folder, containing some kind of sample text

Now, you are ready to start using the Google Drive API client. We are primarily interested in the files.list and files.get methods.

const postsFolder = process.env.POSTS_FOLDER_ID;


const listPosts = async () => {
    const fields = 'nextPageToken, files(id, name, createdTime, size, trashed, mimeType)';
    const posts = await driveService.files.list({
        q: `\'${postsFolder}\' in parents`,
        fields,
        spaces: 'drive',
        orderBy: 'createdTime desc',
    });
    return posts.data.files as unknown as PostMetada[];
}


const getFileById = async (id: String) => {
    const file: GaxiosResponse = await driveService.files.get({fileId: id, alt: "media"});
    return file.data as string;
}

You can then proceed to display your posts. With React, a very basic example it would look like this:

const post = async () => {
    const posts = await listPosts();
    return (<div>
        <div>
            {posts.map(
                (post: PostMetada) => {
                    return (
                        <div key={`post-${post.id}`}>
                            {getFileById(post.id)}
                        </div>
                    )
                }
            )}
        </div>
    </div>)
}

What’s Next?

So far what we have done is pretty basic. In the following parts of this series we will discuss actually using Google Docs to publish posts to your “Google Drive powered” website. After all, part of the appeal of a CMS would be the availability of a built-in editor.

We will also discuss the use of Google Drive for hosting any images that you wish to display on your website, since the “content” in CMS should be applicable to multiple forms of media, and not just text files.