Skip to Content

Rebuilding My Site

January 1, 2022

WordPress plus Next.js logos

An overhaul of my site has been on my to-do list for quite some time. I am proud to have finally knocked it out and to continue to develop and improve this site.

Some of the previous iterations of this site have included:

  • A static site deployed via FTP in my early web development days
  • A simple WordPress blog on a traditional LAMP stack web host
  • Another static site consisting of a singular HTML file deployed to a LAMP stack web host
  • Yet another simple static site deployed on Netlify

I wanted to take a completely new technical approach and to also re-think my content. I absolutely love cooking and wanted to showcase this love on my rebuilt site. I plan to share recipes and techniques that I have found useful.

Site Architecture

I had several goals for my site:

  • Fast and performant
  • Accessible
  • Easy to iterate
  • Be a test bed for new ideas

I think that I have achieved these goals, with room to improve. This is a headless WordPress site, using Next.js and WPGraphQL.

Next.js

The front end of this site is built using Next.js. I am really fond of this library, particularly in the ability to have static and dynamic pages and routes.

WordPress

The WordPress backend of this site is pretty straightforward. Since I would be writing about both code and food, I wanted to clearly separate the two in the backend. While I could have created categories for the two subjects, I decided to turn “Food” into its own custom post type to provide more clear separation.

I am very fond of the composer library Extended CPTs by John Blackbourn and almost always use it when creating custom post types and/or custom taxonomies.

You can find the custom plugin for the WordPress customizations on my GitHub.

WPGraphQL

I used the wonderful plugin WPGraphQL, developed by Jason Bahl, to query from the WordPress backend. I really enjoy using this query language to be able to grab only precisely the data that I need. One of the amazing tools included with this plugin is a query explorer baked into the admin of the WordPress site. This proved to be an incredibly useful tool.

Netlify

The Next.js half of this site is hosted on Netlify. I created a very simple plugin to trigger a new build from the WordPress admin. You can view the repository for that plugin on GitHub.

AWS Lightsail

The WordPress back end portion of this site is deployed to AWS Lightsail. I chose this platform because of the lower complexity compared to other AWS products. The low price and automatic backups were also part of this decision. Since I do not expect a large amount of traffic and my site makes use of static pages, I think that this is a great fit.

Deployments

The deployment process for this site involves a few different components.

A Netlify build is triggered when I push code to the main branch of my GitHub repository. I can also trigger a build in the Netlify dashboard or from the WordPress admin using my custom plugin.

The WordPress install is all within a git repository, with a .gitignore file that excludes sensitive files, logs, and media. Within this central repository are submodules for plugins that are managed outside of this install. For example, I have public repositories for my backend functionality and Netlify build trigger plugins.

I am able to push my central WordPress repository to AWS Lightsail with git. I set up a post-receive hook that syncs files to the live environment folder and also syncs submodules.

Future Plans

This site is meant to be improved on. Here are some of my goals:

  • Improve content layout
  • More testing for accessibility edge cases
  • Optimized queries and rendering
  • Add comments
  • Add post preview
  • Improved SEO practices

Another goal for this site is to create simple tools for cooking. For example, it is in the pipeline to create dough calculators for corn tortillas and pizza dough.