Hello world, and how I made this website
June 04, 2022
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:
- 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.
- 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.
- 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.
- 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.
- 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.