I built this blog as a fun side project using some cool modern web tools. The blog is a static site generated with Next.js and written in TypeScript. I used Markdown for writing the posts, which makes it easy to format text and add images.
Template
The template I used is Next.js' blog-starter template, and I made some modifications to fit my needs. The template is designed to be simple and easy to use, with a clean layout and responsive design.
Changes
I made a lot of changes to the template to make it my own. One of the changes I made was to change the colour scheme to a nicer blue theme.
Social media links
I also added social media links to the header, so you can easily find me on GitHub, LinkedIn. Additionally, I also added a link to my Portfolio website in the header.
Tags
I also added tags to each post, so you can easily find related posts. The tags are displayed at the bottom of each post. You can click on a tag to see all posts with that tag, which was a feature I added to make it easier to navigate the blog.
Video Embeds
The template did not support video embeds, so I added support for that. Here's an example:
I used this in the Niels Rogge podcast post, which you can find here.
Styling
I made quite a few changes to the layout and design of the blog to make it more visually appealing.
The template contains a markdown-styles.module.css file that contains the styles for the Markdown content. I changed the styles of headings, paragraphs, lists, ... to make them look better.
and blockquotes, too!
# And code blocks
print("Hello, World!")
Deployment
I deployed the blog using Vercel. Vercel makes it easy to deploy Next.js applications, and it automatically handles the build process for you.
I added this blog as a subdomain to my main domain harmansingh.nl, which I pay a whopping €7.99 per year for, so you can access it at ti.harmansingh.nl.
All I had to do is add the Vercel domain (in my case: ti-harmansingh-nl.vercel.app) as a CNAME in my registrar, and whatever I wanted the subdomain to be in the Name-column. I went with "ti" because it stands for "Toegepaste Informatica" (applied computer science), which is the name of my study program.
Vercel automatically handles the rest. This is a great feature of Vercel, as it makes it easy to deploy applications to custom domains.
Why .nl and not .be?
I have been asked a few times why I don't have a .be domain since I live in Belgium and not The Netherlands. I was originally born in The Netherlands so it doesn't feel out of place to have a .nl domain. I usually go with one of two answers based on the person asking: the real answer, or the one I made up that actually makes more sense than the real one.
The answer I made up is that if you read the domain, pronouncing .nl as one sound, it sounds just like my full name (Harman Singh Nahal). The "Nahal" can be pronounced as "Nahl" like the author Roald Dahl. I know, it's a stretch, but it makes sense in my head.
The real reason is that I have not lost touch with my dutch side, and when I was looking for a domain, the .nl domain was 1 euro cheaper than the .be domain. I guess it's true what they say about the Dutch: they are cheap. I am not Dutch anymore (since 2021), but I still have a soft spot for my birth country.
Technologies
- TypeScript: A superset of JavaScript that adds static typing.
- Markdown: A lightweight markup language for formatting text.
- Vercel A cloud platform for static sites and serverless functions.
- Tailwind CSS: A utility-first CSS framework for building custom designs.
- Next.js: A React framework for building static and server-rendered applications.