Hello world, and how I made this website

After about a decade of putting it off, I finally got around to making a personal website. These are the first words written here. (Behold!)

Making a personal website is not considered hardcore engineering these days, and there are many "right" ways to go about it. Nonetheless, I found that settling on an approach that suited my goals and personal tastes required some research.

In doing that research, I benefitted from reading a number of excellent posts others had written about their blogging tech stacks. While there's no shortage of such posts by other writers, I felt compelled to make my own contribution to "how I made my blog" genre. So here's a quick writeup explaining my aspirations for the website, and how I chose the stack I ended up with.

My goal at the outset was to create a flexible "personal home base" on the internet. At a minimum, this would be a place to share information about myself, publish occasional blog posts, and link out to other projects and content across the web. Pretty basic stuff.

But I was also looking for a bit of a learning experience. As someone without much of a frontend development background, I was hoping to build things "the hard way", and rack up a few skill points while at it. That meant steering clear of low-code tools such as WordPress, Squarespace, Wix, etc, which surely would have gotten the job done much quicker.

To make things even more fun, I set a budget of $0.

With those requirements in mind, I began my research, and eventually landed on the following stack:

1. Gatsby as my frontend framework. I knew I wanted to be working in React, and so found myself choosing between Gatsby and Next.js. Gatsby seemed to have a more established ecosystem, probably a result of having been around longer. Meanwhile, Next.js seemed to have more buzz, and offered some novel features geared toward sites with large numbers of pages. I opted for the relative maturity of the Gatsby ecosystem, knowing I wasn't going to need the extra scalability that Next.js offered.
2. Netlify for building and deploying my site. There are many solutions out there for deploying static sites. I've worked with teams that used Netlify and had a good experience. It also offers a generous free tier.
3. Netlify CMS for managing content. To stay within my budget of $0, I had to be pretty conservative with my choice of CMS. Most options are server-based, and need to be self-hosted, or purchased as a managed SaaS. Netlify CMS brands itself as a "Git-based CMS", which means its "backend" is just your codebase's Git repo, rather than a separate server application. It does the trick.
4. Material UI as my React component library. In the spirit of building things "the hard way", I chose not to use any project starters or templates for my site. But I also didn't want to completely reinvent the wheel, so I found a middle ground using the popular Material UI component library for layout and styling.
5. MDX for...well, I'm not sure what I'll do with it yet, but it seemed fun. MDX is a variation on Markdown that lets you include JSX directly in your content. If I feel like including interactive React components in my blog posts, now I can do that. The future is bright.

And that's about it! After some effort cobbling these pieces together, I now have a snappy, zero-cost, modern foundation for my site that I'm pretty happy with. I found the DIY approach to be a fun exercise, but anyone looking for a lower friction way to get started with a similar stack might benefit from using this starter project using Gatsby and Netlify CMS.