(Re)build Your Website Already!
4/18/2023 | Programming
If you're waiting for a sign, here it is.
You've waited around long enough. It's time to update your website.
No, I don't mean "update the copyright date in the footer". No I don't mean "fix the bug your girlfriend found when you were showing off your site to impress her". I mean update it. Modernize it.
Rebuild it.
Why would I rebuild my website?
Sure, I get it. Your website is perfect, just like you. Okay maybe not perfect, but it's pretty outstanding and you're proud of it. Well, you're proud of most of it. Except for that one thing. And that other thing. And it's a pain to update. And you built it in your own proprietary framework that you never documented and don't remember how it works...
I spent a lot of time justifying my decision to build my website with Hexo, an EJS based static site generator that is now largely defunct. At the time, I did it for all the right reasons: I wanted to learn something new, it seemed like a quick way to get up and running, and I liked that I could build and deploy it all for free.
That was 2018. I've learned a lot in four years.
Reason #1: Technology has changed
I also frequently tout and promote Gatsby/Sanity as the stack to end all stacks to my clients. I use it on almost anything that's a marketing type website. Why wouldn't I use it for myself?
Not only has web technology as a whole changed, my breadth of knowledge has changed dramatically, and I have a whole new way of thinking about building web apps and websites. My website should represent the fullest extent of my abilities, in and of itself a showcase of what I can do as a developer.
Now, I've put a lot of time and effort into making my website fast, compliant, with great Lighthouse scores, and all of that. I knew it would somewhat difficult to replicate all of that on a new, Gatsby-based replica of the site, but it was worth it moving forward. That leads me to...
Reason #2: It's hard to update
Even harder, though, is remembering to blog, to add portfolio items, to keep that resume up to date. If the technology hinders (not supports) you making quick updates here and there, you'll never do it. I speak from experience when I say you'll spend loads of time putting off the simplest tasks when they're hard to do.
On the other hand, building a website around a CMS of some kind will make that updating process easier, more achievable, and chances are, you'll actually do it.
Currently, I'm writing this article in Sanity, an incredibly customizable, headless CMS that I love for nearly any projects I take on that are content-heavy. I like it so much, in fact, that adding and updating content feels effortless - almost fun!
The other thing is taking the time to make sure you have a solid CI/CD pipeline in place. With modern hosting solutions for static sites such as Gatsby + Gatsby Cloud, Next + Vercel, or anything + Netlify, updating your site can (and should!) be as easy as pressing "Publish".
Reason #3: It's ugly
Okay, there's no guarantees on this one. I love my website, and get lots of complements on the design. That hasn't stopped me from having issues with it along the way. I've thought to myself, "Maybe I should categorize my blog" and "I don't like my portfolio layout" among other complaints. I've put it off and put it off, and rebuilding from the ground up has given me the boost I needed to finally make those changes, and I think it's a huge boost.
If you're not happy with the design of your site, or you know that deep down you're just not a designer, don't worry! There are so many themes, templates, and UI kits for nearly every framework out there, and you can find one to fit you.
Also, your website shouldn't show off your mediocre design skills, it should show off your killer dev skills. To that end, hire a designer! You can find someone to comp out a basic personal website for around $50 on Fiverr.com. You may not get the very best results, but you'll be surprised what people can push out for dirt cheap.
Where to start
How do you build a personal portfolio website in 2023? There are thousands (maybe even tens or hundreds of thousands) of ways to build yourself a website these days, and they're all valid.
If you say you're a React dev, build your site with React/Gatsby/Next. If you're trying to get started as a Svelte master, build your site in Svelte. If you present yourself as a .NET dev, build your site with .NET, even if that feels like overkill.
Your site is a reflection of you and your skills, so make it with what you know, and what you want the world to know you know, you know?
Some good stacks:
- PHP/Laravel/Contentful
- Typescript/Gatsby/Sanity
- Javascript/Next/Sanity
- C#/.NET/DotNetNuke
- Svelte/SvelteKit/dotCMS
- Python/Django/Django CMS
- Elixir/Phoenix/Strapi
How I did it
First, I assessed what I had. I liked my current site. I thought it was visually impressive and had mostly good content. It was hard to update the content or the code and built on an old system I didn't know any more.
Next, I determined a tech stack. Most everything I do today is Gatsby/Tailwind/Sanity, and I love working that way, so I decided to go that direction.
Then, I started building. With Sanity, I developed my schema structure first, essentially determining the data structures and types for the site: Pages, Posts, Categories, Portfolio Items, Projects. Once I had my editor all set up, I transferred content from the old site into Sanity and cleaned it up, plus made some edits along the way.
Now it's time for the frontend. I began by copying chunks of markup from the old site into React components, and then replacing their old, SASS-based classes with Tailwind styles to match. There are some slight differences from old to new, but mainly it's more consistent.
Finally, I updated a few things, added some nice features, and cleaned it all up a bit, before setting up my deploys through Gatsby Cloud.
It's time well spent, and I'd encourage anyone else to do the same!