Building this site

This is just a record of how I built this site - the tech behind it and the reasons for using said tech.

I've designed and redesigned my personal site many times by now. Each time, for whatever reason, it was from scratch, with a custom design.

That's caused some problems:

  • Each time a new section was needed, it would require thinking about how it fits best into the existing design system. Being OCD about design, this was a time sink. Because the more complex the existing design, the more time each new component would take.

  • I designed and hosted the website on no-code platforms. They were easy to work with, but they were also expensive for a personal site that makes no money. It wasn't sustainable to pay $15-$25 each month just to keep the site up.

  • It was hard to keep the site updated. There was a lot of friction in getting ideas from thoughts to pixels, as the tools were sometimes clunky, and would get in the way of getting into 'the flow'.

Of course, this isn't to say the tools are to blame.

The biggest factor behind a poorly kept personal site was probably this:

I didn't see a personal site as a way to express who I was and share my journey. I saw it more as a way to showcase my final work, which is I think, not the best way to go about it.

I have a different philosophy now.

New Criteria

It was time to build a new site that could grow with me for years. For that to happen, it needed to satisfy the following criteria:

  • It should be easy to build and extend
  • It should offer the ability to be gradually improved over time in terms of its design and features
  • It should be relatively cheap to create, host and maintain

Having learned some basic web development, I decided to go with a self-coded, simple site with a markdown blog component.

The Stack

The stack I used is a pretty popular one these days:

  • Next.js site hosted on Vercel
  • MDX for the markdown blog
  • Tailwind CSS for styling

All of the pages on the site, including the home page, are Markdown files, augmented with React in the same file where needed (which is why the file extension is .mdx instead of .md). The header (my name and the nav bar) is usually the only React component on the page.

The magic is, of course, in how the next/mdx package, and others like it, convert the markdown part into HTML and CSS behind the scenes. It's really neat.

The design of the site is inspired in large part by the simplicity of Adam Wathan's site. It'll grow into something unique from here I think.

Benefits

  • Markdown is a distraction-free way to write. It's easy to get into a focused session without having to worry about how stuff looks.

  • I could keep the design super minimal to start with, so I can focus more on writing consistently, and improve the design over time, little by little.

  • The site is basically just static HTML and CSS files, so there is a lot of flexibility in where it's hosted. It also makes it pretty fast to load.

All in all, I'm pretty happy with the setup.

Will it make me a better, more consistent writer?

It won't by itself.

The most important piece of the puzzle was to develop a healthier perspective when it comes to sharing thoughts on the internet. Having mostly done that, it's time to build a lasting writing habit, and a convenient setup will certainly help with that.