BeFunky Blog

Technologies Used: WordPress, Node, Metalsmith, Nunjucks, PHP

Overview

The goal of this project was to move the BeFunky blog from using a WordPress theme on the front end to something that could utilize the same code and styles as the main company site. This would allow us to avoid keeping two separate style bases in sync, and would put all the code in one place for easier future maintenence. We wanted to keep the existing WordPress back end as it contained ten years of blog posts, had alot of SEO value, and post writers could keep working in a familiar environment

My Role

I was one of two front end developers on this project. I handled most of the fetching of the WordPress data via Node, and shaping that it into what we needed. I also wrote most of the WordPress plugin that formatted some of the datavbefore it was outputted by the API. My team lead helped with some of the trickier bits, like rebuilding only the neccessary pieces of the site when a post was updated or published.

Tech

After looking at a few different solutions we decided to roll our own. This would make it easier to integrate already existing code and allow for the most flexibility in the future.

The WordPress API is the main source of all the data, and I wrote a plugin to shape alot of the data before it hit the client. This included getting width/height for all the post images, post authors, and outputting the Gutenberg blocks in each post as an array of objects.

Once all the post data is fetched and parsed by Node we use Metalsmith render all the pages and then generate the static files. Metalsmith is a Node based static site generator and offers alot of flexibility. We used Nunjucks for templating. This part functions similarly to other static site generators out there, with template inheritance to more efficiently organize everything.

In addition to all the generated HTML the blog uses alot of Javascript to replicate features that were previously handled by WordPress plugins. Things includes things like lazy image loading, and only requesting a Vimeo video when the user clicks on the play button