
<p>Like many folks, I kicked off this year promising myself to do better, greater things over the next twelve months. In that spirit, I&#8217;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.</p>



<h2 class="wp-block-heading">General Project Brief</h2>



<p>My existing personal website was wildly out of date and I felt no longer adequately demonstrated my technical abilities as a maker and builder &#8211; <a href="https://github.com/ravenwilde/ravenwilde.github.io" data-type="link" data-id="https://github.com/ravenwilde/ravenwilde.github.io">it existed as a simple static site hosted by GitHub</a>. 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.</p>



<h2 class="wp-block-heading">Tech Stack Overview</h2>



<h3 class="wp-block-heading">Backend/CMS</h3>



<p>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 <a href="https://wordpress.org/" data-type="link" data-id="https://wordpress.org/">open source WordPress installation</a> that lives on the <a href="https://www.dreamhost.com/">DreamHost</a> server I&#8217;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. </p>



<p>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 <a href="https://www.wpgraphql.com/">WPGraphQL</a> 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.</p>



<h3 class="wp-block-heading">Client/Static Site</h3>



<p><a href="https://nextjs.org/docs">Next.js</a>&#8230; 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 <a href="https://nextjs.org/docs/pages/building-your-application/rendering#pre-rendering">hybrid application structure provided by Next.js</a> that should allow me to build out some richer user experiences as this site evolves.</p>



<p>To speed up development, I am leveraging this template: <a href="https://github.com/vercel/next.js/tree/canary/examples/cms-wordpress">https://github.com/vercel/next.js/tree/canary/examples/cms-wordpress</a></p>



<p>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 <a href="https://tailwindcss.com/">TailwindCSS</a>, a tool I have never used before. At first glance, I can&#8217;t say that I like it&#8230; more thoughts on that later&#8230; but I&#8217;m willing to give it a good review and see if I don&#8217;t change my mind.</p>



<h3 class="wp-block-heading">Deployment/Hosting</h3>



<p>As this is a Next.js project the obvious choice for hosting is <a href="https://vercel.com/home">Vercel</a>, 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&#8217;s features and make note of my thoughts in this development blog.</p>


jennifer.codes | development blog

New Year, New Website

More Stories

Utilizing Emotion, Tailwind, and Radix for Advanced Color Theming

WPGraphQL JWT Authentication