Build a blog within 15 lines with Node.js and KeyVox

keyvox — Sat, 10 Feb 2024 17:53:56 +0000

You want a blog on your website but you don't have time to build the entiere CMS.

KeyVox is a simple API to build a blog within 15 lines.

How does it works ?

There is nothing to install, nothing to configure.

4 steps:

Create a blog in one clic
Write your articles in our CMS
Create an API key
Fetch your content from our CMS

Simple example with Node.js and Express

Let's start a new project.

npm i express dotenv keyvox-node

In this example, let's take this key (the API is read-only).
API_KEY="e5cd764a23bd72132a117756ed4ca0f1c1d1716b033eb479"

import KeyVox from 'keyvox-node';
import 'dotenv/config';
import express from 'express';
const kv = new KeyVox(process.env.API_KEY)
const app = express();
app.listen(process.env.APP_PORT)

Fetch news articles

const articles = await kv.articles.list({
    page: 1,
    limit: 6
})

{
  "data": [
    {
      "id": "2ae271b5-36b4-45e2-8a4a-7c95c38cde57",
      "title": "New NFT collection",
      "slug": "new-nft-collection",
      "status": "published",
      "meta": {},
      "background": "https://keyvox.dev/images/articles/2ae271b5-36b4-45e2-8a4a-7c95c38cde57/a00de3a7aed7a58c5b65a97a39a148c2c28fb187afa0.png",
      "tags": [
        {
          "title": "nft",
          "slug": "nft"
        },
        {
          "title": "defi",
          "slug": "defi"
        }
      ],
      "created_at": "2024-02-10T14:06:39.981Z",
      "updated_at": "2024-02-10T14:19:56.531Z"
    }
  ],
  "meta": {
    "url": "http://keyvox.dev/api/articles?",
    "count": 1,
    "pages": 1,
    "items_per_page": 9
  }
}

Then return a view as response.

app.get(async (req, res) => {
    const articles = await kv.articles.list({ page:1, limit: 6 });
    res.render('index.html', articles);
})

The html returned is a classical loop (we use Tailwindcss in the example).

<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-200">
  {% include 'header.html' %}
  <div class="container py-9 px-48">
    <h1 class="text-3xl my-6 font-black">Latest articles</h1>


    <div class="grid grid-cols-3 gap-9">
      {% for article in articles.data %}
      <div class="card bg-gray-50 rounded-lg shadow-sm pb-3">
        <div class="card-body ">
          <div>
            {% if article.background %}
            <a href="/infos/{{ article.slug }}">
              <img src="{{ article.background }}" alt="article background">
            </a>
            {% endif %}
          </div>
          <div class="flex">
            <a class="flex-1 px-3 py-1 text-sm" href="/infos/{{ article.slug }}">
              {{ article.createdAt | formatDateTimestamp  }}
            </a>
          </div>
          <h2 class="text-2xl font-bold flex">
            <a class="flex-1 px-3 py-2" href="/infos/{{ article.slug }}">
              {{ article.title }}
            </a>
          </h2>
          <div class="flex mt-3 px-3">
            {% for tag in article.tags %}
            <a class="bg-teal-700 text-xs px-3 py-1 mr-3 rounded-xl text-white" href="#">
              #{{ tag.title }}
            </a>
            {% endfor %}
          </div>
        </div>
      </div>
      {% endfor %}
    </div>

    <div class="flex justify-center  mt-6">
      {% for i in range(1, linksCount + 1) %}
      <a class="bg-purple-600 w-9 h-9 flex items-center justify-center text-white mx-1 rounded-lg" href="?page={{ i }}">
        {{ i }}
      </a>
      {% endfor %}
    </div>
  </div>
</body>
</html>

Fetch one article by id or slug

Some developers like to retrieve items by id, others by slug.
You have the choice.

app.get('/articles/:slug', async (req, res) {
  const slug = req.params.slug    
  const article = await kv.articles.retrieve(slug);
  res.render('article.html', article);
})

Then your html display data.

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://cdn.tailwindcss.com"></script>
        <style>
            article p {
                margin: 1rem 0;
            }
        </style>
    </head>
    <body class="bg-gray-200">
        {% include 'header.html' %}
        <div class="container mx-auto py-9 px-72">
            <article class="card bg-gray-50 rounded-lg shadow-sm pb-3">
                <div class="card-body px-8 py-3">
                    <div>
                        {{ article.data.createdAt | formatDateTimestamp  }}
                    </div>

                    <h1 class="text-3xl my-6 font-black">{{ article.data.title }}</h1>

                    <div>
                        <img src="{{ article.data.background }}" alt="">
                    </div>

                    <div>
                        {% for item in article.data.content %}
                            {{ item | safe }}
                        {% endfor %}
                    </div>
                </div>
            </article>
        </div>
    </body>
</html>

Fetch tags

Same way.

app.get('/tags', async ( req, res ) => {
  const tags = kv.tags.list();
  res.render('tags.html', tags);
})

This is the content of all tags in this blog:

{
  "data": [
    {
      "id": "89292a57-6937-4f72-9518-0070f7af9df1",
      "title": "nft",
      "slug": "nft"
    },
    {
      "id": "f72e61ac-bcb5-45ba-a191-9536ae19ea04",
      "title": "defi",
      "slug": "defi"
    }
  ],
  "meta": {
    "url": "http://keyvox.dev/api/tags"
  }
}

Fetch all articles by tag

app.get('/tags/id_or_slug', async (req, res) => {
    const articlesByTag = await kv.articles.retrieve(req.params.id_or_slug)
    res.render('tag.html', articlesByTags)

})

You have your blog embeded in your website very easily.

See the full example on GitHub