Building an Open Source Blogging Platform with Appwrite and Hugo

#opensource #javascript #beginners

Have you been in a situation where you think of starting your own blog? Yes? What stops you? The thought of building a blogging site? I have you covered with Appwrite and Hugo! 😎

📢 What is Hugo?

Hugo is a static site generator with tonnes of amazing themes to choose from (you can also make your own themes). You can setup Hugo and get it running in a single command brew install hugo (choose the one for your OS). To learn more about Hugo, get started from here.

📢 What is Appwrite?

Building a web/mobile solution? Need some help with the backend? Appwrite to the rescue - it is an open-source solution, containing all core APIs to build an application. It helps you build secure apps, faster. Appwrite also handles authentication, realtime databases, file storage, cloud functions, and more with SDKs for web, mobile, and server side languages.
Read about some newly added goodness from here.

Now that you know what Hugo and Appwrite is, you probably might have guessed what we are going to use it for. Hugo will be our site generator while Appwrite handles the backend.

Let's get started building! 💻

📝 Prerequisites

If the installations were successful:

You will have Appwrite running in localhost (Go to your browser and enter http://localhost/auth/signin , if you get the sign-in page, you are all set)
Type the command hugo version, if it returns the version, you are good to proceed.

🧠 Approach

By now you must have noticed that the content in Hugo is markdown. Our aim is to store content in a database (this is where we use Appwrite) and use that to generate markdown files which gets listed in our blogging site.

🪜 Steps included

Choosing a Hugo theme and installing it
Putting some content and running it on localhost to see how it works
Making a project in Appwrite
Setting up the Database, adding collections to it
Fetching data from Appwrite
Converting the data from Appwrite into markdown while Hugo is building
Verifying if our content is being reflected in the site

▶️ Getting started

You can follow the Hugo quick start tutorial to get a site running in few minutes.
You can choose a different theme from here and download it using the command: git clone https://github.com/guangmean/Niello.git themes/Niello in your root directory.

Note: I have used Niello for my site, you can choose any.

This is how your folder will look, after you have downloaded the theme of your choice. 👇

Once you have signed in to Appwrite, you create a project first, by clicking on "Create a project". Give it a name and click "Create".

For example:

From the left pane we choose "Database" (which will contain our blog contents) and click on "Add Database" .

Then click on "Add a collection" and give it a name [for e.g Hugo Blog]
Once you have a collection created, choose the permission level as "Document level". From the same page, copy the "Collection ID" and keep it handy, we will use this in the later steps.

A blog consists of two string attributes "Title" and "Body", so we go ahead and add attributes within our Database collection.

P.S - Choose "New string attribute" and enter the text "Title" in Attribute ID , also add a "Size". Repeat the same for "Body"

Our next step is to fetch the data from Appwrite, we use the code from Database API document. We use the Collection ID that you have copied in the above step. Create a new .js file and add the following lines 👇

const sdk = new Appwrite();

sdk
    .setEndpoint('https://[HOSTNAME_OR_IP]/v1') // Your API Endpoint
    .setProject('5df5acd0d48c2') // Your project ID
;

let promise = sdk.database.listDocuments('[COLLECTION_ID]');

promise.then(function (response) {
    console.log(response); // Success
}, function (error) {
    console.log(error); // Failure
});

Note: Add some documents before running the above pile of code

We have successfully fetched the data, we now move to getting it converted to markdown and let Hugo build from it. (It is time to use your JavaScript skills) 😉

In the same file(the one created above), where we fetched our collections data, we write the following code:

let promise = database.listDocuments('COLLECTION ID');

promise.then(function (response) {
    console.log(response);   

    const template = `
---
title: "\"{{title}}\"  "
date: {{date}} 
---
{{desc}}
`;


    for (let i=0;i<=response.documents.length-1;i++){
        const obj= response.documents[i];
        const tempObj ={
            title: obj.Title,
            date: new Date(),
            desc: obj.Body
          }

          const op = render(template, tempObj);
          const opPath = `./quickstart/content/posts/${obj.Title.split(" ").join("-")}.md`
          fs.writeFileSync(opPath, op)
    }

}, function (error) {
    console.log(error);
});

Explaining the above block of code:

Putting the fetched data from Appwrite into the markdown template of Hugo
Running a loop that puts the above markdown file in the path from where Hugo can build (for this example, the path is: content\posts)
The loop continues until all the documents from our Appwrite collection is uploaded

The entire code will be something like this:

const sdk = require('node-appwrite');
const fs = require("fs");
const {render} = require("mustache");

// Init SDK
let client = new sdk.Client();

let database = new sdk.Database(client);

client
    .setEndpoint('APPWRITE_ENDPOINT') // Your API Endpoint
    .setProject('APPWRITE_PROJECT') // Your project ID
    .setKey('APPWRITE_API') // Your secret API key
;

let promise = database.listDocuments('COLLECTION_ID');

promise.then(function (response) {
    console.log(response);   

    const template = `
---
title: "{{title}}"  
date: {{date}} 
---
{{desc}}
`;


    for (let i=0;i<=response.documents.length-1;i++){
        const obj= response.documents[i];
        const tempObj ={
            title: obj.Title,
            date: new Date(),
            desc: obj.Body
          }

          const op = render(template, tempObj);
          const opPath = `./quickstart/content/posts/${obj.Title.split(" ").join("-")}.md`
          fs.writeFileSync(opPath, op)
    }

}, function (error) {
    console.log(error);
});