The Stack
I am super happy to announce that I have update my personal website. I wanted to write a post about the technologies that I used to build the site and why I decided to use them:
The Front End
- GatsbyJS – A front-end framework built on top of React that generates static assets and creates lightning-fast web experiences. I chose Gatsby because of the performance it provides out-of-the-box and also the great developer experience.
- Styled Components – I love keeping my CSS coupled with my components and this library allowed me to write actual CSS in my JS files.
- Green Sock – This library allowed me to easily write some of the animations that live on the page. This was my first time using this library and overall I had a good experience.
The Back End
For my blog, I needed a way to pull in the content and wanted to experiment with a new CMS. I’ve used Contentful as a headless CMS on one of the sites that I build for my Fantasy Football League and it worked great, but I wanted to try something different. I was watching one of my favorite YouTube channels, Learning with Jason and saw him spin up a WordPress instance on AWS LightSail so I decided to do the same. The process was super easy and best of all, very cheap.
I went with the most basic plan to host my website and am currently only paying $3.50/month. After getting my server up and installing WordPress, I installed a couple of plugins:
- WPGraphQL – A free, open-source WordPress plugin that provides an extendable GraphQL schema and API for any WordPress site. This plugin allowed me to easily consume my blog post data using GraphQL in Gatsby.
- WPGatsby – This plugin has two primary responsibilities. One is to monitor activity in WordPress to keep my Gatsby site in sync with my WordPress back-end and the other is to configure WordPress previews to work with Gatsby (which I have not implemented yet).
It’s super exciting to be able to work with the most popular and robust CMS that’s out there and also have a blazing fast front-end that’s not reliant on WordPress to run. One of the things I want to do next is experiment with WooCommerce and try to sell something simple on my website just to see how it works.
Hosting
My Gatsby site is currently being hosted on Netlify. Netlify is a fantastic service that offers continuous deployment. Anytime I update my Github repo or publish a blog post, Netlify re-builds my static site.
Final Thoughts
Overall, I had a very good experience building this site. The development experience using Gatsby was fantastic and they provide all kinds of great plugins that make things easy. It was also a lot of fun getting a WordPress instance setup to easily pull in my content. I want to dive in even deeper and see what else I can do with my current headless architecture. I’m currently experimenting with the Advanced Custom Fields plugin to see what kind of data I can pull over to my Gatsby site. In my next post, I plan on writing about some of the issues that I ran into during developing the site and how I overcame them. Thanks for reading!
