How I Built My Website

Building a website in 2023 involves a combination of modern technologies and best practices. From automatic code splitting to server-side rendering and easy deployment, Next.js provides a range of features that make building websites a breeze.

Meher Howji avatar image
··· Likes

NextJS

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

Bulma

Bulma is a vanilla CSS library, 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 web is so evolving I didn’t to invest any time maintaining stylesheet, upgrading them and all the nuances that come with a library.

I knew I wanted something like sass based that supports nesting of classes and handles name-spacing. Luckily NextJS 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 NextJS takes care of the rest.

Now, by having NextJS CSS modules I do have added a layer of processing over my vanilla CSS. But even if I pull out css modules out of my system, I would just have to add a wrapping classname 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.