I enjoy learning about what other developers use in their stacks. So I thought I'd share what powers this project with you as well.
Gatsby
As I mentioned in the previous article, for this website, I used Gatsby and not WordPress. I made this decision not because I don't use WordPress anymore but to step out of my comfort zone, learn a new tool, and get better at React.
If you don't know, Gatsby is a static site generator that uses React for the front end and can pull data from different sources, like Markdown files, WordPress, Shopify, Instagram, and many others.
Gatsby is cool for many reasons, but these are top four from my perspective:
- Speed. Gatsby sites are static, meaning there is no database and no server requests. That alone saves quite a few (milli)seconds. On top of that, Gatsby does a lot of optimization like prefetching, lazy-loading, code-splitting, caching out of the box.
- Security. If there is no database, there is nothing to hack. Simple as that.
- Scalability. Because Gatsby generates static assets, you don't have to worry about the amount of traffic or occasional spikes. Put your website on a CDN-ready hosting, and you are ready for Kanye West tweeting about your latest post about parallax animation.
- Developer Experience. It's just fun. No Webpack configuration, no performance optimization (to some degree), no custom tooling set up. You just run
gatsby developin the terminal and get to work. Gatsby handles the rest.
Content Management
I chose to use markdown to create all posts, projects, speaking cards, and email templates on the contact page. You can learn more about configuring Gatsby to use Markdown files in the official tutorial.
I like it because I can write content right in my code editor and keep all articles under version control.
This means I can create a separate branch for a new post and work on it until it's done. And if I need to, I can switch to other branches to make code updates.
CSS
There are many ways to style a React application: vanilla CSS, Sass, inline styles, but I decided to use Styled Components for this project.
For me, the biggest selling point was that now I could only load CSS that's actually used on the page — no more all-in-one style.css.
Another big thing is the ability to generate CSS based on different conditions dynamically.
You can read more about the good stuff Styled Components have to offer here.
Animations
I built most of the animations on the website with GSAP. If you aren't familiar with it, it's probably the most popular animation library out there.
It's not built specifically for React like Pose or React Spring, but you still can use it with it. I'll write a separate article about it because I've struggled to understand how to make it work in the beginning and couldn't find enough information online.
On a side note, I do feel I overdid a bit. Animations are fun, so it's very easy to get caught in the moment, forgetting the why and just keep animating everything. So one of the items on my to-do list for this website is to revise the animations and make them less apparent and more consistent.
Hosting
My old website was hosted on Digital Ocean. I chose to set up the droplet myself a few years ago to learn the basics of spinning up a server for WordPress. That's not what I do for a living, so I stumbled across many issues I didn't enjoy solving like file permissions or upload limits.
This experience made me realize how much work goes into creating a good managed WordPress hosting.
For the new website, I chose to host it on Netlify. For small sites like mine, it offers an unbelievably smooth experience! Connect your account to a git repo with the website, point it to a production branch, specify a build command, and you are good to go. This way, every time you push an update to that branch, it triggers a build on Netlify servers, and the website gets updated and pushed to the CDN.
And the best part — free tier is enough for that!
Migration
As I mentioned in the previous post, I decided to keep my old website for history's sake. But keeping a Digital Ocean account just for that didn't make much sense. I didn't want to spend time managing the server I don't use, so my second thought was to use Bluehost.
But then I struck me: "Wait a second... Maybe I can create a static website from my old website and also host it on Netlify?"
And it turns out there is a plugin just for that! It generates static pages from your WordPress website. There is one caveat, though: dynamic things like comments or contact forms won't work out-of-the-box.
So before running that plugin, I disabled all comments and replaced the contact form with a little link to my new website.
With a copy of my old website online, I was able to create redirects to my old articles that I don't want to move to the new website. This means no 404 errors in the logs.
Wrap Up
I had a lot of fun building this new website and learning new tools. I could've just used WordPress and launch the website faster. But I'm glad I've tried something new because now I have this experience I can use on other projects.