Website Changelog on Kaveen Rodrigo

New pages, photos and other oddities

Tue, 25 Aug 2026 00:00:00 +0530

To my two followers, here’s an update on the site. Leave the comforts of your RSS readers and checkout what I’ve done here.

Inspirations

Couple of weeks back, my desire to make the site better was rekindled, after seeing Thamara’s website. Nicking ideas from it, is a better description for this post.

The indieweb is great, but lost interest and tinkering with the site itself eventually. No doubt a reaction I had maintaining my old NextJS blog, which had deprecated dependencies, two seconds after bootstrapping.

What’s new

I was able to get most of these done in a small time, using LLM tools, to give some transparency check my /ai page to learn how these tools are used. In short not for content text, photos, etc.

Theme and update home page

New theme based on newcss which I have supplemented with custom css. Goodbye simplecss.org what a great lesson in semantic HTML. Home page is no longer just a paginated post list, but shows a sampling of new posts, projects and photos.

Photos

I’ve always had problems in publishing photos, unsure of quality and standards to hold. Therefore I’ve made the careful distinction “photos” not “photography”, what ever that means. Goal being to have a chronological timeline of /photos organized in albums of what stopped me in the busy world.

For the content timestamp purists, please forgive me for inserting postings historically.

Comments

I had let go of interactivity for some time, as integrating with external platforms is not something that was of interest to me. But I’m easy to please, if you say something is built with Go and uses SQLite, you got my attention.

Remark42 comments engine is hosted on my server and now folks can leave comments. Also with it comes a /guestbook (empty page with a comments box).

Series taxonomy

Posts can belong into a series, this will give a brief intro about the series page and a dedicated page for posts under this series.

Miscellaneous new pages

The following new pages were added.

/slashpages index of top level links.
/resume hypertext copy of my resume.
/colophon how is this site built.
/ai how LLM tools are used in relation to this site.

What to expect

Once again I have supplemented my lack of content with more eye candy. I’m going to get into groove of writing more, perhaps bring back 100 words a day.

More /photos, really pleased with this. Curating and picking highlights and writing some words on them is fun!

The site typography and styling is really rough, will be refining it more. Maybe a Git based CMS?

Migrating my blog, again (Hugo)

Sun, 28 Apr 2024 16:19:34 +0530

Time goes by fast, the last time I posted on this site was in 2022. I’m alive and doing well, more than well to be honest, a lot of good news¹.

But today let’s talk about the state of this website. In the last week there has been a considerable change to the makeup and hosting of this website. It wen’t from being a Next.js website hosted on Netlify to being a Hugo SSG(static site generator) on a Debian VPS on Linode. This site has always been an SSG, even with Next.JS it was using the static html export feature.

Image 1: Negambo, Sri Lanka, 2024

Why am I doing this?

Before getting into specifics, looking back there has been a lot of changes in the way I approach these problems. I must accept my naiveté and short sighted when setting my website four years back.

I’m looking for simplicity and having control of my website in this new implementation.

I’m tired of keeping the dependencies up to date of a JavaScript project².
The website was one of my first Next.JS projects therefore it has some questionable code and questionable DX.

Migrating to Hugo

Hugo is a static site generator written in Go, I’ve never been interested in learning Go have always been aware of all the tools that I used daily that are written and maintained with it. Also a year back I took up a new job which uses Go as the primary backend language, but I digress.

There is no customisation here, I downloaded a copy of Hugo and chucked in my content and bootstrapped a custom theme using simple.css³.

I was able to hit the ground running fairly quickly by dropping my markdown files with YAML frontmatter.

title: RSS Feed for next.js blog
description: >-
 On creating an RSS feed for this blog, and how it's not as tedious as you think.
date: '2021-06-19T17:12:26.723Z'
thumbnail: 'cmb_np.jpg'
category:
 - projects
 - web-dev
tags:
 - nextjs
type: post
slug: rss_feed_nextjs

Configuring multiple taxonomies based on the attributes was straightforward.

[taxonomies]
 category = 'category'
 tag = 'tags'

But one of my biggest pain points was asset management, before there was a singular folder which had all of my images and it was a mess. I wanted to switch over to use page resources instead, which will have all the assets needed on the content folder itself.

With my laziness, coaxing chat-gpt and spending more time bug fixing resulted in this script, which migrated all my blog posts to their own folders with relative links to images.

import os
import shutil
import re

def migrate_markdown(source_dir, destination_dir, base_img_path):
 # Ensure destination directory exists
 if not os.path.exists(destination_dir):
 os.makedirs(destination_dir)

 # Iterate through Markdown files in source directory
 for filename in os.listdir(source_dir):
 if filename.endswith(".md"):
 # Read Markdown file
 with open(os.path.join(source_dir, filename), "r") as file:
 markdown_content = file.read()

 # Extract folder name
 folder_name = os.path.splitext(filename)[0]

 # Create folder
 new_folder_path = os.path.join(destination_dir, folder_name)
 os.makedirs(new_folder_path)

 # Move Markdown file
 new_markdown_path = os.path.join(new_folder_path, "index.md")
 shutil.copy(os.path.join(source_dir, filename), new_markdown_path)

 # Copy images to folder
 img_paths = re.findall(r"/img/([\w-]+.\w{1,5})", markdown_content)
 for img_path in img_paths:
 img_filename = os.path.basename(img_path)
 shutil.copy(os.path.join(base_img_path, img_path), os.path.join(new_folder_path, img_filename))

 # Update image paths to be relative
 markdown_content = re.sub(r"/img/([^'\"\(\)]+)", r"\1", markdown_content)

 # Write updated Markdown content
 with open(new_markdown_path, "w") as new_file:
 new_file.write(markdown_content)

# Example usage
source_dir = "./posts"
destination_dir = "./content/posts"
base_img_path = "./static/img" # Base path for images
migrate_markdown(source_dir, destination_dir, base_img_path)

Tips I wish I’d knew days back

Yes to RTFM, but these are the customisations that were done.

Customize markdown image rendering

It’s best that the image tags in markdown be rendered in a figure tag and have compression applied you can do that using an hook in the layouts directory. layouts/_default/_markup/render-image.html.

{{- $imgURL := .Destination -}}
{{- $altText := .Text -}}
{{ $image := .Page.Resources.Get $imgURL }}
<figure>
	{{ if $image }}
		{{ $image = $image.Process "resize 1000x webp q50" }}
		<img src="{{ $image.RelPermalink }}" class="summary-image">
	{{ end }}
 <figcaption>{{ $altText }}</figcaption>
</figure>

This also has image processing, where I requested that the images be resized to 1000px on width and exported as webp with 50% quality.

Minifying CSS

I found the documentation on this, but what I missed was the fact that the css files should be in the assets directory not the static directory.

{{ $style := resources.Get "style.css" | minify | fingerprint }}
{{ $custom := resources.Get "custom.css" | minify | fingerprint }}
<link rel="stylesheet" href="{{ $style.Permalink }}">
<link rel="stylesheet" href="{{ $custom.Permalink }}">

Minifying HTML content

I’d guessed this is done via configuration, but it’s done using during the build stage using a cli flag

hugo --minify

Conclusion

Migrating to hugo only took me a couple of days, and compared to the custom Next.js code base, this is much better DX and updating my toolchain is only a single step to replace the hugo binary. This is one of the reasons not choosing to opt into using Tailwind as well.

Shall post about that soon ↩︎
Did use dependbot, but then proceeded to forget about it ↩︎
Do enjoyed my old website theme made with Tailwind, but wanted to get started quickly. Might re-visit it later ↩︎

RSS Feed for next.js blog

Sat, 19 Jun 2021 17:12:26 +0000

This blog finally has an RSS feed, I welcome you to 1999. When building my own blog instead of using a blogging platform I knew I was getting into a world of pain.

Most of the site is complete and usable, but what lacked was an RSS feed for potential followers to subscribe with! Let’s leave the talk and get-into it!

Image 2: Colombo, Sri Lanka 2017, Newspaper Stand

NPM Dependencies

We’ll have to install a new package aptly named rss for making it easy to generate the RSS feed. Why reinvent the wheel, eh?

yarn add rss @types/rss

note: I added @types/rss as my next.js project is in typescript

Making A Fake Route

This is probably the point some might have scratched their heads. How can we create a custom dynamic file during build time?

There is no easy way, but this hack works perfectly. Create a new file in pages named something like static_file_build.tsx (Easter Egg!)

What we will make this route do is,

Render Dummy Page.
Load Latest Post Details.
Write a XML string to a file.

This file serves no display purpose but to ber an entry point to build our rss feed.

import fs from 'fs'

const DummyPage = () => {
 return "Dummy Page";
}

const buildRss = (posts: PostEntity[]): string => {
 // TODO;
}

export const getStaticProps = async () => {
 // Depends On Your Implementation
 const posts = PostAPI.getLatest()
 // Generate Feed XML
 const feedXml = buildRss(posts)
 // Write Generated RSS Feed To Public Folder
 fs.writeFileSync("public/rss.xml", feedXml);

 return {
 props: {
 posts
 },
 }
}

export default DummyPage

As shown above, it’s clear how this works. Depending on your backend get your latests posts loaded and let’s get cracking on building the feed!

Building The Feed

Now this is where the installed rss package comes to the rescue. It has an easy interface/api to build the feed and export the xml. Let’s complete the buildRss function!

Create Feed Object

The first task is to create the feed object. It should be instantiated with your basic site details.

let feed = new RSS({
 title: "Kaveen R",
 description: "blog posts",
 feed_url: `${process.env.BASE_URL}/rss.xml`,
 site_url: `${process.env.BASE_URL}`,
 pubDate: new Date()
});

Add Posts To Feed Object

Next task is to iterate through all your blog posts and add them to the aforementioned feed object.

// Add Each Post to feed
posts.forEach((post)=>{

 // Take Markdown Content & Convert To basic HTML
 const body = ReactDOMServer.renderToStaticMarkup(
 <ReactMarkdown
 escapeHtml={false}
 source={post.content}
 />
 );

 feed.item({
 title: post.matter.title,
 description: body,
 url: `${process.env.BASE_URL}/posts/${post.matter.slug}`,
 date: post.matter.date,
 category: post.matter.categories,
 author: "Kaveen R",
 })
})

Important Notes

description should contain an HTML representation of your blog post content. Buy invoking ReactDOMServer.renderToStaticMarkup() we’re generating HTML for a given React component. This will change with the libraries you use

categories is a list of unique strings, when using customizable RSS readers users can filter your latests post using the mentioned catagories.

Serializing The Feed

Last step is to convert the feed object into an XML string which will be written to file by our dummy page!

return feed.xml({indent: true});

Now when building your page you’ll see that feed is generated an place on /public/rss.xml!

Housekeeping

There are a couple of more things to do! We ant to make sure that our RSS feed is complaint and also can be found by feed readers. This is how to quickly do that

Checking For Feed Errors

To Make Sure we deliver the best RSS feed to all users, we can validate it using a tool such as W3 Validator which will validate and give suggestions on how to make the feed better.

Making Sure The Feed Is Discoverable

On one of your main next.js template(such as _app.ts) include the following in the header, this meta tag will guide compatible software to the feed.

<Head>
 <link
 rel="alternate"
 type="application/rss+xml"
 title="RSS"
 href="/rss.xml"
 />
</Head>

Adding `rss.xml` to gitignore

This is to anyone who is using GIT VSC. To avoid commiting the RSS file to VCS accidentally add the feed reference to the .gitignore file.

public/rss.xml

That’s it folks! Now you got a RSS Feed for your blog. It maybe 22 years too late, but at-least we got it!

Complete Code Sample

Here is the complete code sample which we ran through today!

import fs from 'fs'
import RSS from 'rss'
import ReactDOMServer from "react-dom/server";
import ReactMarkdown from "react-markdown";

const DummyPage = () => {
 return "Dummy Page";
}

const buildRss = (posts: PostEntity[]): string => {
 
 // Create Feed With Site Details
 let feed = new RSS({
 title: "Kaveen R",
 description: "blog posts",
 feed_url: `${process.env.BASE_URL}/rss.xml`,
 site_url: `${process.env.BASE_URL}`,
 pubDate: new Date()
 });
 
 // Add Each Post to feed
 posts.forEach((post)=>{
 
 // Take Markdown Content & Convert To basic HTML
 const body = ReactDOMServer.renderToStaticMarkup(
 <ReactMarkdown
 escapeHtml={false}
 source={post.content}
 />
 );

 feed.item({
 title: post.matter.title,
 description: body,
 url: `${process.env.BASE_URL}/posts/${post.matter.slug}`,
 date: post.matter.date,
 category: post.matter.categories,
 author: "Kaveen R",
 })
 })
 
 // Serialize Feed & Return as string
 return feed.xml({indent: true});
}

export const getStaticProps = async () => {
 // Depends On Your Implementation
 const posts = PostAPI.getLatest()
 // Generate Feed XML
 const feedXml = buildRss(posts)
 // Write Generated RSS Feed To Public Folder
 fs.writeFileSync("public/rss.xml", feedXml);

 return {
 props: {
 posts
 },
 }
}

All Hail The JAM Stack!

Mon, 08 Jun 2020 14:33:40 +0000

I was having troubles with my website. I got it settled up just to be a landing page. A website with a high bounce rate and low retention yikes!

With leaving social media, I needed a new home to settle down my thoughts and have all my creations in one place instead of relying on other sites. Time to make the web personal again!

Image 1: What it looks like - June 2020

What’s a stack?

A stack is simply the selection of software that you use to run an application. My first website ran on LAMP Which was Linux, Apache, Mysql and PHP. It wasn’t cool to have a /static website those days.

Then What’s with the JAM?

Gone are the days of bulky server bootstrapping to get a simple website off the ground. JAM stack made it simple, it stands for,

Javascript.
APIs.
Markup.

The JAM stack is not really about the technologies used as some even totally drop the J from the stack. But it’s a way to approach building websites.

Instead of having bulky databases and web-servers, sites are to be pre-rendered using the APIs and Markup.

I'm not going to regurgitate on the JAM Stack,
read more on jamstack.org

So what’s my JAM Stack & Why?

My old website ran on Hugo which was technically JAM, but I never filled it with content as I was just lazy to read the docs.

Javscript: This time I opted to use Next.js and wrote my own CMS and rendered the UI with the Bulma CSS framework.

APIs: As said before I use my own custom one file Typescript CMS that reads off files. I call my API the _grail which has all the data to generate this blog.

_grail
├── categories
│ ├── fintech.md
│ ├── life.md
│ ├── projects.md
│ └── web-dev.md
├── microblog
│ ├── 2020-06-07T14:50:49+0000.md
│ └── 2020-06-07T15:21:14+00:00.md
├── pages
│ ├── page_about.md
│ ├── page_contact.md
│ └── page_home.md
└── posts
 ├── 2019-06-08_All-Hail-The-JAM-Stack.md
 ...
 └── 2020-05-08_Putting-the-past-on-disk-a077e62019eb.md

4 directories, 24 files

Markup: Good old markup with frontmatter to annotate metadata for each of the markdown posts

---
slug: "1591541449"
date: "2020-06-07T14:50:49+0000"
---
Hello World! It's my lonely *micro-blog*

Current Workflow

Current workflow requires me to write markdown on my text-editor and push it to a private github repository and afterwards it’s deployed instantly(Thanks to Netlify), but there are a couple of pain-points.

Quickly generate Content Templates - Currently I copy and old post markdown file and edit it, need some CLI.
Static file management - There is none, I currently just convert the images using IM and dump the images into the /static directories.

Conclusion

It’s not the best, I have to do my own styling and content structure. This allows me total control over the site and be able to expand it, which I will certainly do. Thanks for hanging on folks.

Website Changelog on Kaveen Rodrigo

New pages, photos and other oddities

Inspirations

What’s new

Theme and update home page

Photos

Comments

Series taxonomy

Miscellaneous new pages

What to expect

Migrating my blog, again (Hugo)

Why am I doing this?

Migrating to Hugo

Tips I wish I’d knew days back

Customize markdown image rendering

Minifying CSS

Minifying HTML content

Conclusion

RSS Feed for next.js blog

NPM Dependencies

Making A Fake Route

Building The Feed

Create Feed Object

Add Posts To Feed Object

Serializing The Feed

Housekeeping

Checking For Feed Errors

Making Sure The Feed Is Discoverable

Adding rss.xml to gitignore

Complete Code Sample

All Hail The JAM Stack!

What’s a stack?

Then What’s with the JAM?

So what’s my JAM Stack & Why?

Current Workflow

Conclusion

Adding `rss.xml` to gitignore