Website Migration

Long time no see, I guess? I was so focused with VTuber NewsDrop that I only blog here sparsely. Now that you’re here, allow me to welcome you to my new website. I lost track of what version is this on, but I’ll put this on v6.

This time, we’re on a different platform – Hugo. My friends use it, VTubers use it, and now I’m using it. It’s been a journey learning how to deploy v6 online, and I’m thankful for every small wins I earned throughout.

Thought Process

Here’s my thought process when I decided to give Hugo a try for real.

I am no longer happy with using WordPress

At first it was just because of what’s happening at the top-level. Then it was because of my content getting messed up during migration.

Throughout the process of migrating my content from WordPress to Hugo, I’ve had to manually, painstakingly clean most blog posts of the dirt from plugins like Jetpack. When you enable their CDN, you can easily overlook the stuff it adds, supposedly to speed up load time.

When you export your site into a WXR file, it also keeps the stuff with it. For example, the images didn’t load because it was using the wrong source. When you keep over 500 posts in your blog, and most of these posts have the same concerns, you’ll have to open each Markdown files in the output and spend time finding and replacing it on Notepad++.

Cutting costs (?)

Another important factor is cutting costs. The economy’s terribly bad (not to mention, the sad state of our political affairs locally and globally adds to the frustration). As much as I’d love to keep things as is, I’m forced to cut some wires.

I’m happy with Ghost, but…

NodeJS, the one Ghost is dependent on, felt like hogging up my disk space. What do you mean the node_modules folder has so many stuff in it? I’ve been only dabbling in web development and my skills are outdated when I did all this stuff, so this still surprises me.

I love Ghost – but it’s not without its caveats. First, how to make it work on a cPanel setup? What do you mean I have to do SSH? What, even the cPanel has its limits? This is more or less what I’ve told my good friend Pat, who let this website in his space for years. Restrictions in cPanel’s system (especially if your setup’s under a WHM) made me want to stop using cPanel too.

I do want to try out Jekyll or Gatsby, however…

I failed to grasp both. Both look good, and I’m impressed with anyone who can deploy such sites, but I’ve tried doing both and by gut feel I can say it’s not for me – yet. (I’m keen to try these again with Handlebars in the future.)

What I did to get to this point

Now that I’ve made up my mind, how did I start? I’ve only known some basic git knowledge (I faked it till I made it). I recall the process as follows:

Convert my blog posts to Markdown.

I first tried wpXml2Jekyll but I wasn’t satisfied with the output. Then it took a while for me to take this task again until I saw exitwp-for-hugo, which kickstarted everything I need to do in order to migrate.

The code isn’t that much updated, so I had to unfortunately run the errors in the code through Claude. It explained to me what happened and then provided me a solution, which actually worked along the way. No wonder why developers are integrating artificial intelligence into their workflow.

Sidenote: One of my good friends Al told me about spec-driven development, and I had to confirm if there’s human touch involved. From what I understood, it involves checks and balances by humans throughout the process.

Audit all blog posts

Hugo’s server feature lets me browse through all my posts in a breeze, provided that I can navigate through it fast. I’m using PaperMod with some custom style overrides, and the pagination at the bottom of each post is helpful for me in auduting the whole site content.

As soon as I spot any image that’s not loading, I’ll switch to Notepad++, find the faults and replace it using the Replace tool. For example, all images linked as https://i2.wp.com/jayagonoy.xyz/wp-content/uploads/ have been linked back properly. i2.wp.com is from the remnants of Jetpack CDN, and I’ve switched to .com from .xyz for more than a year now.

Compress all the images

I know that my whole website takes up to 3GB of space using WordPress because of all the resizes it had to do, like image-XYZ-1024x768.png. Once I took all of the image assets out of WordPress and into Hugo, aggressively compressed it through Imagemagick and tracked through Git LFS, it took only a gigabyte of space ¹.

Deploy

I initially want to deploy the site on Github pages (it went kind of well at first), and then I tried out Cloudflare Workers, only to wrangle with wrangler. I just happened to see Ambi’s tweet, which saved me from stress because look at those errors there.

Hugo also recommends Netlify, so I took that suggestion and got no regrets.

In the Future

Moving forward, I’ve turned over my content into from platform to another, which means another set of dependencies.

Today’s WordPress integrates embedded content out of the box through oEmbed; but when you import those into Hugo, it only shows a URL. This happens most especially with Facebook embeds, and it’s up to you either you want to embed the Facebook post or just hyperlink it.

Conclusion

Overall, I’m happy with the outcome: Permalinks stay, with some exceptions that I can actually yank with the tools I have, and I’m learning how to deploy a Git repo into other places.

Now I’m thinking if I will make another Hugo instance to document my experience with maimai ².