Feb 07, 2021
I recently rebuilt my personal website. In this part I'll talk about some of the decisions I made.
Earlier this year I had decided to rebuild my personal website. Over the years
I've added more and more to my exising site, from a blog to an online resume.
The way I added these modules was to create a new React project, publish it to
Netlify, and point a subdomain under
glvn.co to the new project.
This worked well for a time but keeping up with all the projects and keeping them up to date was becoming more and more of a chore. So about 2 weeks ago I decided to rebuild all of these various projects into one site.
When I set out to build the site, my initial plan was to use a new technology in my stack that I've not previously used. Usually my decisions fall into two categories when starting new projects, either try out a new technology or stick with tried and true tech that's worked for projects in the past.
For this project I decided to try something new, and that new thing was
snowpack. My initial impressions of snowpack were very
postive, here's a build tool that is seriously fast and not a nightmare to
configure like Webpack. However as time went on I started to encounter issues.
My dealbreaker issue though was spotty support for babel aliases. I had setup
babel aliases like
@data. These worked for me before in the
past when using Webpack so I thought nothing of bringing them in. For some
reason though it just refused to work.
This wasn't a huge issue on it's own, but this also wasn't the first issue I had configuring Snowpack and I made the decision to move to something more battle tested: NextJS. It's been a while since I had used NextJS for a project but I knew thier lastest release included bunch of new features so I wanted to give them a go.
For the UI I went with TailwindCSS. Last year I fell in love with TailwindCSS after using it on a project and have since incorporated it into more and more projects that I work on. TailwindCSS is great because I'm not a designer and the UI's I'm able to crank out with TailwindCSS look top notch without the downside of all looking the same (something you encounter if you use Bootstrap).
When it came to the blog I decided to keep things simple and copy the example the NextJS devs provide in their blog starter. And used tailwindCSS typography to style the content generated by remark.
So far I've only thought of things for the initial build, after which I will likely be retrofitting the site with more upgrades. In Part 2 I will talk about building the site and some of the issues I had to overcome in the process.
Wouldn't it be nice to have your NetlifyCMS configuration in JS rather than YAML? Here's how you can do that.
Instead of rebuilding my website this year, I migrated it from Gatsby to NextJS. Here's how that went.
How to setup Storybook to work nicely with Styled Components custom theme.
There are tons of libraries out there that will help you with icons in React, but there's an even easier way.
A list of 10 awesome UI libraries that will help you bootstrap your next React project