How I set up a personal blogging system. Week of 2/15/25 - 2/22/25

Two Broad Topics for This Week

1. Setting Up My Own Personal Blog System
2. A Programming Problem

Setting Up My Own Personal Blog System

Tech Stack

• React: A JavaScript library for building user interfaces.
• Next.js: A React framework for server-side rendering and generating static websites.
• Remark: A Markdown processor.
• Remark-rehype: A plugin to convert Markdown to HTML.
• Gray-matter: A library to parse frontmatter(metadata) from Markdown files.
• JavaScript: The programming language used.
• VSCode: The code editor used.

Overview

Next.js is a web app development framework built for the frontend UI framework called React. Leveraging the newest app router, I created this blogging system.

This post is not a tutorial but rather an overview of how I created a blogging system using Next.js.

Main Components

1. Dynamic Blog Posts Creation

In my Next.js application, I am using Static Site Generation (SSG), which dynamically generates websites based on predefined conditions. A Static website is a website that isn't dynamic, which means that the website is a simple document like a blog post. Making payments or pressing a button and something happening makes a website dynamic.

Here's how it works:

1. I have a directory(folder) named posts that contains Markdown files, with each file representing an individual blog post.
2. Each file is read by the computer, and its content is passed to the static site generator(which is basically a special subdirectory inside the app directory), which generates the webpages.

In the new app router by Next.js, the app directory contains subdirectories that represent different pages of your app. In my app, one of these subdirectories is named posts (for blog posts, different from the posts directory containing Markdown files). This posts subdirectory is where static sites (blog posts) are generated programmatically.

2. The Script That Makes This Possible

The script has three main functions:

getSortedPostsData()

Reads the Markdown files directory, processes each Markdown file to extract metadata (information like blog Title and Date), and sorts the metadata based on the date it was created.

getAllPostIds()

Reads the Markdown files directory and gives a structure containing the ids of all blog files (file name without extension).

getPostData()

Reads a specific Markdown file, processes its content to convert it to HTML, and gives the content based on the id.

These functions are used to create blog posts dynamically. Specifically, the getAllPostIds() and getPostData() are used by the static website generator to generate individual blog posts. I write my blogs as Markdown files, and each file is then read, and its content is converted into HTML using remark and remark-rehype.

You can find the source code to this blogging system here.

---

A Programming Problem: Grouped Anagrams

Problem Statement

Given an array of strings strs, group all anagrams together into sublists. You may return the output in any order.

Extra Information

An anagram is a string that contains the exact same characters as another string, but the order of the characters can be different.

---

Understanding the Problem

So, how I like to start solving problems is like this:
First, make the problem clear by asking: What is this problem asking?

So, What?
We are given an array of strings and need to group all anagrams within that array into subarrays.

• We start with a main array (input).
• We want to create subarrays containing grouped anagrams.

Once the problem is clear, we move to the next step: How do we solve it?

---

Approach to the Solution

To solve this problem, we need a structured approach. This is where pseudocode comes in handy.

1. Identify what we have:

• An array of strings.
• We need to group anagrams into subarrays.

2. Recognize useful tools:

• The hash map (dictionary) data structure.

Why Use a Hash Map?

A hash map allows us to store values in key-value pairs, which is perfect for grouping anagrams:

hashMap = {
    key: [],
    key: [],
    key: []
}

Each key will be a sorted version of a word, and the corresponding value will be an array of words that match that sorted key.

---

Breaking Down the Solution

A key observation:
If two words are anagrams, their sorted versions will be the same.

Example:

"eat" → "aet"
"tea" → "aet"
"tan" → "ant"

Using this, we can group words by their sorted version.

Key String Operations

To sort a string in JavaScript, we use:

sortedStr = str.split('').sort().join('');

• split(''): Converts the string into an array of characters.
• sort(): Sorts the array alphabetically.
• join(''): Joins the sorted characters back into a string.

This gives us a unique key for each group of anagrams.

---

Pseudocode

1. Initialize a hash map.
2. Iterate over the array of strings.
3. For each string:
   • Sort it to create a key.
   • If the key doesn’t exist in the hash map, create an entry.
   • Append the original string to the corresponding key.
4. Return all values in the hash map as an array of arrays.

---

Implementation in JavaScript

function groupedAnagrams(strs) {
    let hashMap = {};
    
    for (let str of strs) {
        let sortedString = str.split('').sort().join('');
        
        if (!hashMap[sortedString]) {
            hashMap[sortedString] = [];
        }
        
        hashMap[sortedString].push(str);
    }
    
    return Object.values(hashMap); // returns an array of values of the object
}

Explanation

• We iterate through strs, sorting each string.
• The sorted string becomes the key in the hash map.
• We store all anagrams under the same key.
• Finally, we return Object.values(hashMap), which extracts the grouped anagram arrays.

---

Summary

• Understanding the problem: Clearly define the input and expected output.
• Using the right data structure: A hash map helps group anagrams efficiently.
• Sorting as a key technique: Sorting strings allows quick comparison and categorization.
• Implementation: Use JavaScript methods like split(), sort(), and join() to manipulate strings.

This method ensures optimal efficiency and a clean solution for grouping anagrams.

---