The Quiet Musings

WordPress as a Static Site Generator

August 6th, 2020 //

I have been keeping this weblog since 2003. It started as a way for me to learn PHP and MySQL and build my own blog system, comments, feed, and all. This was when Movable Type (Perl) was “the” go-to CMS for self-hosted weblogs back then. Eventually, I switched over to WordPress which is still what I use today for personal and work projects.

With the introduction of JAMstack, it has become “the” latest thing for websites. For clarification, JAMstack is a fancier more encompassing term for static sites. And as usual, as everything tech goes, one go-to thing of using a “new” thing is saying it’s better than the “old” thing. In this case server-side CMS.

Here is the thing

Using server-side CMS or JAMstack is a choice on what’s best for the project you are working on. How many skills the content editors have (Markdown or WYSIWYG), is it a large website, etc. And how much time you have to set up everything and maintain it. After trying a couple of static sites generators such as Jekyll, Hugo and 11ty. I wasn’t invested enough to learn the new templating system and figure out how to implement features that come out of the box with WordPress.

All the work and hacking to create what I already have with WordPress is not worth it for me for this weblog. Not to mention the 500+ post I would have to export from WordPress and into the new system. I follow people on Twitter who switched to JAMstack who spend hours and hours setting up a simple weblog. If you enjoy all that, that’s cool. I too sometimes pick up something new re-inventing the wheel and spend hours getting things set up and working. Like that one time, I switched from shared hosting and decided to run my website on a droplet on Digital Ocean. Every time the server needs to be updated I spend a couple of hours on it.

The best of two?

Since the past years, I have been keeping an online food guide in a subfolder of this website. Not the most ideal way. With WordPress it was easy to split the content in the admin side with post types. It’s a tiny site so it worked fine. But I wanted to give it it’s own domain and space for the lowest cost possible. It’s just a hobby site I keep for fun. Cheap hosting means headaches and expensive hosting is overkill. Enter the WordPress plugin WP2Static. It’s a simple plugin which can deploy a static version of your website to amongst other, Github, Bitbucket, Netlify, Amazon S3, or a zip file. It has version control, so you don’t have to deploy the whole thing with every small change.

Screeenshot WP2Static plugin

The site in question: The Hague Food Guide does not have a comment section or anything complicated. It’s just blog posts with text, images, and Google maps. As for the RSS feed, I read it’s an issue, but it works for me. I just hardcode the URL in the header and it works fine (so far). The biggest issue right now is Yoast sitemap breaking due to the XSL link.

My setup

I installed WordPress on my Macbook (localhost), I don’t update the site often, no need to be able to login from any device. Also, no need for paid hosting and no risk of being hacked.

I installed WP2Static to deploy the static files to Netlify. But for some reason, this does not work for me. Instead, I deploy it to Github which is connected to Netlify. Same result.

Screenshot Netlify deploy page

I opened port 80 on my router because otherwise, WordPress will have issues with some plugins (block editor). Once deployed I have to manually edit sitemap.xml on GitHub to remove the XSL link.

I created a 404 page in WordPress and I use Netlify conf file to make it work

The domain address is new. So next to needing to build op SEO again I also want a mail address with it. But not another email service to deal with. I use improvmx.com to forward mail to another email address.

And finally, I use Google Analytics because I am not happy with Matomo since it completely broke when I updated my server to PHP 7.3. I use anonymous tracking on Google, so I just get the basic stats like hits, visited pages and referrals.

Conclusion

I spend time updating the design, fighting the DNS of the domain. I barely touch domains once they are set up, so every time I forget that I have to set the DNS with service I am using (Digital Ocean or Netlify) and not with the domain seller. And, figuring out that port 80 needed to be open and fixing some accessibility issues.

Screenshot Lighthouse results. Performance 90, Accessibility 82, Best Practices 85, SEO 83

I use 4 plugins in WordPress, Yoast, Smushit, Ultimate Add-ons for Gutenberg (for their easy embedding on Google Maps in posts) and WP2Static. All CSS and JS files of these plugins also deploy with the static site. According to Lighthouse they slow down the site on 3G connections. I have yet to find a good way through WordPress functions.php to get all the plugin files to load async. The only reason I don’t score 100 on accessibility is that the Kofi button widget does not have an alt tag. I should email them about that.

I wonder how trustworthy Lighthouse is. It is a Google product. The same company that would love it if every website switched over to AMP pages. Also, every time I run the test the Performance score wildly differs.