Site migration to GatsbyJS
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.
Now if you’ve never had to deal with building a WordPress theme in PHP (lucky you), I’ll say that I personally don’t find it to be the most pleasant development experience. This is likely due to my ignorance, inexperience, and–most definitely–impatience with learning PHP. I heard modern PHP can be great, and I mean no disrespect to the numerous PHP-specialized developers out there. However given that a large chunk of my experience is in modern Javascript and React, I was dismayed by the lack of PHP tooling available to me compared to what I’m used to. Prettier, ESLint, Typescript, and rich IDE annotations, anyone?
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!
In case you missed the memo, GatsbyJS is a new-ish CMS platform based on modern web tooling and written entirely in Javascript. The engine encapsulates a common toolchain (Webpack, React, Node) into a single package/framework and allows you to build amazing static web pages with the power of the JS ecosystem. The plugin community around this project is incredibly rich, making it a strong contender against WordPress’ longstanding reign.
The Migration
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?
Alternatives Explored
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.
Ghost
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.