How I Built My Website

Building a website in 2023 involves a combination of modern technologies and best practices.

Meher Howji avatar image
··· Likes

Next.js

For generating static site for performance. However, one thing I noticed late in the development was that Next.js doesn't generate images of various sizes at build time, making Next.js not so true static site generator.

Bulma is a vanilla CSS library, with no JS-based components. I needed something timeless for styling because I didn't want to use a component library that tightly binds style with logic. Because the web is so evolving, I didn’t have to invest any time maintaining stylesheets, upgrading them and all the nuances that come with a library.

I knew I wanted something SASS baed that supports the nesting of classes and handles name-spacing. Luckily, Next.js supports CSS modules out of the box to handle this. So now I just plain vanilla CSS using utilities from Bulma for grids, basic layout classes etc and Next.js takes care of the rest.

Now, by having Next.js CSS modules, I have added a layer of processing over my vanilla CSS. But even if I pull CSS modules out of my system, I would just have to add a wrapping class name in my CSS because all my CSS is nested in a SASS-like format.

MDX

I am using Markdown X to write the contents of the post. Markdown was sufficient but I needed to rearrange the HTML structure that was generated from the markdown to be intercepted and rearranged in a different order or configuration. MDX does that by giving you a hook before it renders the document. My use case was creating a table of content for my post, and I needed to have an anchor tag within the heading tag.

## Heading -> <h2>Heading</h2> // Markdown
## Heading -> <h2><a href="intro">Heading</a></h2> // MDX

Vercel

The deployment is handled by Vercel. It deploys on every push to the master and also takes care of the image generation, which I highlighted earlier.

Auto Publish From Obsidian

I take my notes on Obsidian and it helps me evolve my posts from the notes that I gather from reading and learning. It is pretty simple actually, I just have Github Action that essentially copies tagged files in Obsidian to my website repo and triggers a commit on my website’s master branch. You can find more details in this post: How I Publish Obsidian Notes to a Next.js Blog