As a product manager specializing in website development, I recently decided it was time to build my own website.
After all, I don't have enough money to afford a house 🏠... so why not own some digital land, instead?
This blog post will tell you exactly how I went about creating this website.
Drag & Drop? Or Code It From Scratch
Before I could even begin building a website, I first had to make a crucial decision:
- Do I use a drag & drop editor (easy mode)
- Or do I code the website myself 😎 (expert mode)
Obviously, I went with option 2 because I wanted to see if my CS degree was worth the money.
Just kidding... I went with option 2 because I want tight-knit control over every aspect of my site. I'm very particular about all the visual details, and want to eventually layer in more advanced functionality. For example, I'll likely integrate a headless CMS for my blog posts... that way I can create/edit posts directly from a fluffy UI, rather than update my markdown files directly. Advanced use cases often lead to a dead end when using visual editors.
For the record, if I had gone with option 1, I would have likely gone with Squarespace or Wix.
Technology stack
Next, it was time to select an appropriate tech stack.
My top priority here was to pick tools that are widely used. With high usage comes > extensive documentation > Stack Overflow posts > better ChatGPT answers > and, therefore, faster development velocity 🤑.
According to State of JS, the most widely-used rendering framework (from a sample of 39,471 respondents) in 2022 was Next.js. A rendering framework, as they define it, is a framework "focused on rendering and serving your application".
Next.js is a React-based framework for building full-stack web applications, which (again, according to State of JS) was the most widely-used front-end framework in 2022.
In terms of hosting, Next.js is owned by Vercel, who provides serving infrastructure; so that was an obvious choice.
Last but not least, I quite enjoy using TailwindCSS for styling. Next.js projects often come configured with Tailwind right OOTB, so my plan was to use it for this project. It seems to have quite the polarizing opinion in the dev community... but if you ask me? Nothing is better than throwing a space-y-8
between a massive fleet of <div>
tags 😌.
Forking a Project
Pure originality no longer exists in this world. We like to think that our own ideas are novel, but in reality they've been influenced by the world around you.
If Taylor Swift decides to start wearing crocs, half the U.S. population follows suit. People will pick a different color or use jibbitz to claim they have original style; but at the end of the day, these modifications are merely a thin veneer between them and Taylor Swift's drip.
In that same vein, many web development projects begin by "forking" a template. After perusing Next.js's gallery of breath-taking starters, I settled on this Portfolio Blog starter -- authored by Lee Robinson.
I had to pull some plumbing out of this starter... for example:
- Lee stores view counts for each of his blog posts in a database and fetches them client-side for his blog posts. My blog posts are going to be so popular that, frankly, I doubt any database could handle the volume; so I've removed that logic.
- The guestbook is a neat feature, but to be replaced by projects in my site
- Remnants of Lee's website in the OpenGraph tags and sitemap configuration