Before we get to it, don't forget to subscribe to mine! 😁

What we'll do:

1. Get blog entries data.

2. Create a util function that writes XML and JSON files to our server file system (effectively creating the RSS feed).

3. Call the function at build time and making it run with a Vercel cron job.

First of all, install the following dependency into your project

npm install feed

Create a util function

First, I created a JavaScript file. This is where the whole logic to create the RSS feed resides.

/src/utils/generateRSSfeed.js

import { Feed } from "feed"

const generateRssFeed = async () => {
    //Code to generate the RSS feed
}

export default generateRssFeed();

Get blog entries data

Using the JavaScript fetch API:

/src/utils/generateRSSfeed.js

    const postsFetch = await fetch(`https://nicohorn.com/api/blog_entry`, {
        method: "GET",
    });

Let's define some useful variables

/src/utils/generateRSSfeed.js    

    const postsFetch = await fetch(`https://nicohorn.com/api/blog_entry`, {
        method: "GET",
    });
    const posts = await postsFetch.json();
    const siteURL = "https://nicohorn.com";
    const date = new Date();
    const author = {
        name: "Nico Horn",
        email: "contact@nicohorn.com",
        link: "https://nicohorn.com"
    }

Now, using the Feed library, we do the following:

/src/utils/generateRSSfeed.js

    const feed = new Feed({
        title: "Nico Horn's blog",
        description: "Welcome to my blog! Here I post my own thoughts and views about tech, 
        philosophy and pretty much anything that comes to my mind.",
        id: siteURL,
        link: siteURL,
        image: `https://nicohorn.com/ms-icon-144x144.png`,
        copyright: `All rights reserved ${date.getFullYear()}, Nico Horn`,
        updated: date,
        generator: "Feed for Node.js",
        feedLinks: {
            rss2: `${siteURL}/rss/feed.xml`,
            json: `${siteURL}/rss/feed.json`,
            atom: `${siteURL}/rss/atom.xml`
        },
        author
    })

Add each entry to the feed we just created:

/src/utils/generateRSSfeed.js

    posts?.forEach((post) => {
        const entryURL = `${siteURL}/en-US/blog/${post.id}`

        feed.addItem({
            title: post.title,
            id: entryURL,
            link: entryURL,
            description: post.description,
            content: post.content,
            image: post.cover_image,
            author: [author],
            contributor: [author],
            date: new Date(post.created_at),
        })
    })

Lastly, use the fs Node module to create a folder and write the files in the server:

/src/utils/generateRSSfeed.js
    
    fs.mkdirSync("./public/rss", { recursive: true });
    fs.writeFileSync("./public/rss/feed.xml", feed.rss2());
    fs.writeFileSync("./public/rss/atom.xml", feed.atom1());
    fs.writeFileSync("./public/rss/feed.json", feed.json1());

Final code:

/src/utils/generateRSSfeed.js

import { Feed } from "feed"
import fs from "fs";

const generateRssFeed = async () => {

    //This console log will appear in the console at build time.
    console.log("Creating RSS feed");
    const postsFetch = await fetch(`https://nicohorn.com/api/blog_entry`, {
        method: "GET",
    });
    const posts = await postsFetch.json();
    const siteURL = "https://nicohorn.com";
    const date = new Date();
    const author = {
        name: "Nico Horn",
        email: "contact@nicohorn.com",
        link: "https://nicohorn.com"
    }

    const feed = new Feed({
        title: "Nico Horn's blog",
        description: "Welcome to my blog! Here I post my own thoughts and views about tech, philosophy and pretty much anything that comes to my mind.",
        id: siteURL,
        link: siteURL,
        image: `https://nicohorn.com/ms-icon-144x144.png`,
        copyright: `All rights reserved ${date.getFullYear()}, Nico Horn`,
        updated: date,
        generator: "Feed for Node.js",
        feedLinks: {
            rss2: `${siteURL}/rss/feed.xml`,
            json: `${siteURL}/rss/feed.json`,
            atom: `${siteURL}/rss/atom.xml`
        },
        author
    })

    posts?.forEach((post) => {
        const entryURL = `${siteURL}/en-US/blog/${post.id}`

        feed.addItem({
            title: post.title,
            id: entryURL,
            link: entryURL,
            description: post.description,
            content: post.content,
            image: post.cover_image,
            author: [author],
            contributor: [author],
            date: new Date(post.created_at),
        })
    })

    fs.mkdirSync("./public/rss", { recursive: true });
    fs.writeFileSync("./public/rss/feed.xml", feed.rss2());
    fs.writeFileSync("./public/rss/atom.xml", feed.atom1());
    fs.writeFileSync("./public/rss/feed.json", feed.json1());

}

//This one I use it on the endpoint that the cron job runs.
export { generateRssFeed }
//It's exported like this, executed, because it'll be caled directly by a Node command in the CLI.
export default generateRssFeed();

Call the function at build time

Simply add the following command in the package.json

node ./src/utils/generateRSSfeed.js

/package.json 

  "scripts": {
    "dev": "next dev",
    "build": "node ./src/utils/generateRSSfeed.js && next build",
    "start": "next start",
    "lint": "next lint"
  },

Also, don't forget to add "type": "module" at the root level in the package.json.

That should be it. I ran into a few problems such as having to rename the postcss.config.js to postcss.config.cjs given that it's a CommonJS module.

Cron job

Now, what I did so far only works at build time, which is not all that useful if we want to keep our feed updated automatically. To solve this, I'm using a cron job that Vercel let us configure directly into the project. We could also call the function that creates the RSS feed in the POST endpoint that I use to create the blog post, but I had never used cron jobs in Vercel so I thought it would be a cool opportunity to try it out.

Learn more about cron jobs in Vercel: Cron Jobs (vercel.com)

Create a route.ts into the api folder in the project. The structure should look like this:

-/api

-/cron

-route.ts

/api/cron/route.ts

import { generateRssFeed } from '@/utils/generateEnglishRSSfeed';
import type { NextRequest } from 'next/server';

export function GET(request: NextRequest) {
    const authHeader = request.headers.get('authorization');
    if (authHeader !== `Bearer ${process.env.CRON_SECRET}`) {
        return new Response('Unauthorized', {
            status: 401,
        });
    }

    generateRssFeed();

    return Response.json({ success: true });
}

And now, create a vercel.json file at the root level of your project to configure the cron job. In this case, this cron job runs everyday at 1:00AM.

To learn more about cron jobs: Cron Jobs: The Complete Guide for 2024 (cronitor.io)

{
  "crons": [
    {
      "path": "/api/cron",
      "schedule": "0 1 * * *"
    }
  ]
}

That's all, enjoy!

Although there's many component libraries that solve this problem, it's always nice when building our own website to do all the little things by ourselves. In my case, I've always liked doing modals from scratch. Well, not so from scratch since I'm using React to manage the state, but otherwise, this approach works for plain HTML and JS. In my case, for a better user experiences, I like making my modals so that they close when the user click "outside" it, as shown in the image below.

So my approach was the following: when we attach an event listener to an element, such as the #modal we get an output with an object that contains all the info related to the event. In this case, the event listener would be an onclick so I went with the following solution, which is by far the simplest solution I know so far:

function closeModal(event){
   if(event.target !== document.getElementById("background_modal")){
      return //Do nothing, click is inside the modal.
   }
   //Code that closes the modal.
   //The program only reaches this part if the previous condition isn't true.
}

#This is the HTML structure
<div id="background_modal">
   <div onclick="closeModal">
     #Modal content
   </div>
</div>

That's it, try it out. Have fun!

Its been a long time since I wanted to craft and publish my own blog, been postponing it for more than 3 years actually. There are a lot of options out there for people who love to write but don't want to spend some serious hours coding their own blog, which I understand and respect, but in my case, I always wanted to do it my way, having to learn and try things out, the old fashioned way. The thing is, I love building stuff and I love sharing my thoughts and experiences, so that's a pretty good excuse for building this from scratch.

I'm Nico, I'm a software engineer, computer science graduate and I also teach at a local university. I have gathered some knowledge in the past few years as a developer but I can't stay put, I always feel that there's so much more to learn and, as the cliché goes, the more I learn, the less I know. This is my space to share that journey, to share what I learn and my thoughts on it. Knowledge should be shared and I'm here for it.