About this project

My girlfriend is a wedding planner and we started the company together. The business is doing quite well since Bali’s borders reopened again after a 2 year pandemic.

Why fix something that works?

The first iteration of Amora’s website is a typical website built in Wordpress, using a ridiculous amount of plugins to get the simplest of simplest things done. This is one of those typical website where you’re scared to update a plugin or the PHP version, because it might collapse the entire house of cards. Most people that have used Wordpress for a while might know what I mean.

Using Wordpress and the Elementor plugin it was quite easy to drag and drop and build pages and write blog articles, at the cost of having a slower bulkier website.

But, zero regrets! Building the site like this for the early days of our company. It made it possible for us validate the market and grow into a phase where people would actually trust us to arrange their happiest day of their life in Bali.

Pandemic, and the aftermath

🕰 Flash forward a couple of years after 2 years of closed borders.

The website of Amora is one of our most important marketing channels. Now that business is growing again, we needed to add more content to the website. It was still the same mess from years ago, a simple update could completely devastate everything and wow, it was tough to maintain as it there’s still a ‘tech debt’ haunting the site.

I decided to not continue this path. The site was essentially a website duct-taped with several plugins, where every new page would’ve compounded in to a higher ‘tech debt’. Since the business is actually becoming financially healthy, it’s now the right time to start building a proper Wordpress ‘stack’.

Rebuilding

I started by building a custom lightweight Wordpress theme and getting rid of at least 90% of all the plugins. I was excited to write some code again. I got to work and made the first demos for a Wordpress theme using Advanced Custom fields, Vanilla PHP, Bootstrap and Laravel’s mix (webpack). The Wordpress theme was getting quite fast! things looked promising.

Suddenly, I caught my self using debug tools that I’ve otherwise would have never even bothered with. That’s when I quickly found out that Wordpress used at least 50 database queries to fetch data for a dead simple page that just shows information about a wedding package. Seriously?

I know. It’s always been like this, it’s normal right? But should we just accept it for what it is? It left quite a bitter aftertaste and I was wondering if there was a fundamental better way. Why run so many queries for every single visitor? It just didn’t feel right to me.

Skipping a Typical Wordpress Site for a Jamstack

Should I stop using Wordpress at all? But, my girlfriend knows how to use Wordpress pretty well. Now, she’s so busy now that business taken off again. Too busy to learn another CMS that might have similar issues anyway. I kept looking for solutions. At some point, I was familiarising myself with database caching, Wordpress static site generation, Cloudflare caching, even using raw MySQL queries, until I stumbled on this movement called the Jamstack movement.

💡 “Jamstack is an architectural approach that decouples the web experience layer from data and business logic, improving flexibility, scalability, performance, and maintainability.”

In English: Jamstack is a way to build websites that keeps different parts of the website separate. So, the website is made up of two main parts: the “front-end” and the “back-end.” By keeping these two parts separate, it makes the website faster and easier to change. They front and the back don’t even have to know of each other’s existence. Like if you want to change something on the front or back, you can do that without affecting the rest of the website.

It seems that using Wordpress as a Headless CMS + a Static Site Generation tool like Jeckyll or Hugo was the solution!

Choosing a Static Site Generator

But which Static Site Generator should I choose? I wanted to learn the toolset that’s has a significant demand in 2022. The reason for this, is having an enormous gap in my resume. Especially in relevant skills. This is due to my entrepreneurial activities. Perhaps I could fill these gaps in skillset by using the right tool that has the best outlook for future career possibilities. I have to learn a new tool anyway.

React seemed to dominate the industry in 2022, and that’s how I stumbled on Next.js. Next.js is built on React, and I quickly found out that Next.js can be used for static site generation while having a headless CMS in the background providing all the business data at build time. Using Next.js was an absolute no-brainer!

I dived straight into Next.js together with Tailwind CSS and GraphQL to fetch data from the Headless Wordpress CMS. Wordpress does not care anymore how the front-end is built, it’s just the provider of business data now, without the need of all those dreadful plugins!

At the time of writing, I tried to test a demo, to see if all of this effort was worth it. I tried Cloudflare Pages to deploy the site for free at Cloudflare’s network. It was surprisingly easy and user friendly, and the demo site was live very quickly. I could recommend it to any small sized business or startup. ☁️

When I tested the page speed using Google’s lighthouse, I managed to achieve a whopping 100% page speed score. 🤯

Wow! It was totally worth the effort!

Was Next.js the best choice?

I would say it’s definitely not a bad choice. Creating a statically generated website is very easy with Next.js as you just have to run the following command in your project root:

yarn next build && yarn next export

However Next.js does have some caveats regarding Static Site Generation.

For example, it still ships with React.js code, even if you use zero javascript on your pages. Compared to the usual bloated React project, this might seem trivial, but to me it makes absolutely no sense.

There is a way to disable this, but it’s quite a hacky approach which I didn’t really like. In order to strip out random chunks of Javascript, I needed to add the following code above every page:

export const config = {
    unstable_runtimeJS: false,
}

This effectively strips away Javascript that you don’t need for a statically generated website.

I bumped into a promising project, called Astro, which seems to be even more focused on static page generation compared to Next.js. The templates seem compatible with plain HTML templates,React, Vue and Svelte templates, if that makes you happy.

I haven’t looked to much into it, but I certainly will.