Minimalist cogs illustration
Minimalist cogs illustration

New development stack

4/17/2017

Well I hadn't considered such a massive overhaul so early, especially after rolling out my [most mature and robust WordPress-based workflow] in january. But Vitaly Friedman's recent unveiling of the next Smashing Magazine was too good to be ignored especially with all the great pointers waiting to be explored.

Embracing the JAMstack

After so many years developing xavierwendling.com based on the WordPress CMS, PHP and MySQL, I have entirely switched this project to a JAMstack approach, meaning any dynamic programming developed in vanilla Javascript, API abstraction for server-side processes or database interactions, and content now stored in Markdown files and prebuilt into static HTML prior to deployment.

Static site generator

Like Smashing Magazine, my website generator of choice is the superfast Hugo static website engine. I also used the Victor Hugo boilerplate as a starting point to set up my custom asset pipeline based on Gulp, Webpack, SASS, postCSS and Babel. Finally, my deployment flow is based on Docker and automated with Ansible.

Benefits

For this project and for others, the benefits are many and significant.

Developer experience

The development experience is already greatly simplified and much more enjoyable for me as a developer. It would be even more so if this were a collaborative project. With no database to clone and no complex install to preform, bringing a new team member up to speed amounts to a simple git clone. Likewise testing and staging workflows are further simplified.

Performance

Despite serving media rich pages, this website's performance reaches new highs, close to or at a perfect 100 score according to the various benchmarking tools. Deploying to a CDN is my only remaining action item for a fully optimized configuration.

Security

The new approach also brings vast improvements in terms of security, with surface areas for attacks greatly reduced by serving static HTML content and by abstracting server-side processes into microservice APIs. Security is a never ending story but at least gone is the stress and embarrassment of having a website attacked after failing to promptly update WorPress to its latest release.

Deployment and scaling

Finally, although this is a small footprint project, deployment and scaling becomes so much more straightforward and flexible.

What next

As I write this, this website is still served from a single server with already excellent performance. Evolving to a CDN approach would be the next logical step and will be greatly eased by the very nature of the JAMstack methodology. Adding a CMS layer is another area of future investigation, especially for client projects. Lastly, with ongoing and future projects in mind, I am also eager to wrap my head around implications of a statically generated website on e-commerce integration.