One of my goals for the last quarter of the year was to get some time to work on my personal site. The previous version was released five years ago, and the site has been virtually untouched since then.
The Stack
I wanted to try a new stack keeping WordPress as my primary CMS but build the frontend wholly decoupled for this version. The first decision was going the headless way, and there are several options to develop a headless site these days, NuxtJs, NextJs, Gridsome, Gatsby, etc. The second point was the use of ReactJS. The decision was easy considering these two variables, Gatsby.
Gatsby allows you to create static sites taking the content from external sources. These sources can be markdown files, APIs, and in my case, WordPress along with GraphQL.
We need a couple of plugins on our WordPress site to expose the site’s information via GraphQL, WP GraphQL, and WP Gatsby; after you activate the plugins, you don’t need to configure anything else.
If you don’t know what GraphQL is, let me tell you that it is an API where you can make queries directly from the client to obtain only the desired information.
As I said before, I’m using Gatsby as the site generator, but for the frontend, I use RactJS, Motion for some visual effects, and TailwindCSS for all the styling, and that’s it, nothing fancy.
I really enjoyed making this new version, and I’ll post more about what I learned in the process.
For now, that’s it, and if you want to learn more about Headless sites or chat, below, you can find my Twitter.
