Like many folks, I kicked off this year promising myself to do better, greater things over the next twelve months. In that spirit, I’ve begun rebuilding my personal site as a showcase of my web application development skills. This blog documents the technical challenges and choices I encounter during this project.
General Project Brief
My existing personal website was wildly out of date and I felt no longer adequately demonstrated my technical abilities as a maker and builder – it existed as a simple static site hosted by GitHub. For this iteration, I want to display static content but also have a robust platform to build out some fun React micro applications. To get going quickly and skip to the fun parts, I have chosen tools that are accessible and easy to spin up.
Tech Stack Overview
Backend/CMS
I wanted fast, I wanted simple, and most importantly I wanted full control over my content. To accomplish this I turned to an old friend, a simple open source WordPress installation that lives on the DreamHost server I’ve had for ages. My first professional content management experience was with WordPress and I love that the open source nature of WordPress allows me to manage my content on my own server with little to no cost up front.
In my professional life I have grown accustomed to the relative joy one experiences while working with a GraphQL endpoint. For this project, I have set up the WPGraphQL plugin to expose a GraphQL endpoint that my client application will use to pull content from my WordPress site. I have never utilized WordPress in this fashion before and I am happy to see that this is now an option available to the WordPress community.
Client/Static Site
Next.js… I have never used it before! I have worked extensively with Gatsby over the years but never Next.js so this project is a great opportunity to learn something new. I am looking forward to exploring the hybrid application structure provided by Next.js that should allow me to build out some richer user experiences as this site evolves.
To speed up development, I am leveraging this template: https://github.com/vercel/next.js/tree/canary/examples/cms-wordpress
Speed, is of course the biggest reason to begin this project from a template. Another, is further opportunity to learn new things. This template, for instance, manages its styling with TailwindCSS, a tool I have never used before. At first glance, I can’t say that I like it… more thoughts on that later… but I’m willing to give it a good review and see if I don’t change my mind.
Deployment/Hosting
As this is a Next.js project the obvious choice for hosting is Vercel, the cloud hosting company that maintains the Next.js framework. It was so easy to spin up a deployment with just a few clicks to link it to my project repository and domain names. As this project evolves I will explore Vercel’s features and make note of my thoughts in this development blog.