Wed Oct 14, 2020 △ Random, Technology
For a couple years now this blog existed on a [now defunct] domain https://yimd.net and has been left to rot mainly due to my indifference in maintaining a pretty website (sorry!). But actually, the real reason was due to the technical hurdles necessary to make the personal site and blog that I want to build within the narrow confines of a custom WordPress theme.
So you can imagine how hard it was to motivate myself to slog through pages of inline PHP tags to incrementally make my vision come alive.
Well, the time has come to change it all thanks to GatsbyJS!
After a few days of tinkering around, I’m happy to report that the site is now running WordPress as essentially a headless CMS (!) with a GraphQL endpoint that’s accessible to Gatsby via gatsby-source-wordpress-experimental.
It was difficult at first to grasp what the publishing workflow would be after incorporating Gatsby, but I seemed to have figured it out now:
- New posts/content will be posted and edited using the WordPress administrative UI via https://blog.daniely.im (WordPress site with custom theme)
- WordPress pages will not be used, since it requires hand-wiring custom page-*.php templates into the theme
- New pages, the landing page (most important), and overall site layout will be generated by Gatsby. With Gatsby, it allows me to build pages with React and all the great tools available to the frontend JS ecosystem.
This setup frees me from the pain of maintaining a WordPress theme chock full of inline PHP and WordPress-specific APIs/registries/directives. Which makes me wonder: how do the folks who monetize WP themes do it?
Separate Gatsby Landing Page and WordPress Blog
One route I considered was to separate my landing page and blog entirely, with the former running Gatsby and the latter remaining on WordPress. However as I dug more into how the Gatsby <-> WP integrations have matured, I found that the WP Gatsby and WP GraphQL WP add-ons have really pushed the envelope of merging the two worlds since I last left it.
The experimental add-on is now considerably faster when Gatsby scrapes the posts than before with the REST API.
One of the newer players in the CMS game is Ghost. Though the idea sounds interesting and was praised by members of HackerNews, I found that it’s significantly more difficult to setup a deployment than the drag-and-drop FTP install experience that WordPress is famous for. Their documentation seem to suggest that the subscription-based PaaS service is the easiest option, and I don’t think that’s any mistake.
Though the team offers an official Docker image, I haven’t been able to find tutorials for a self-hosting Ghost on a cloud provider, so that discouraged me from experimenting pretty quickly.
In the End
Overall, I’m quite happy with the setup I’ve built and think it’ll be a great foundation to build exactly what I envisioned. It strikes the balance of customizability and functionality by leaving the site building to React and the CMS features (such as syntax highlighting, comments, post tagging) to WordPress.
More updates on what that might be to come soon.