From WordPress Loss to Hugo Success: My Journey to a Modern Static Site

When my WordPress site vanished without a backup, I thought everything was lost. Luckily, with the help of tools like the Wayback Machine and modern static site generators, I was able to rebuild my site from scratch. Here’s my journey from WordPress disaster to Hugo success.

This post contains affiliate links, which means I may receive a small commission, at no extra cost to you, if you make a purchase using these links.

Step 1: Recovering Content with the Wayback Machine

The Wayback Machine turned out to be my lifesaver. I discovered that a fairly current version of my WordPress site was archived. Using Python and Beautiful Soup, I wrote a script to:

1. Iterate through my site’s archived pages.
2. Extract the HTML of each post, ensuring only the blog content was captured.
3. Update image paths to point to locally hosted versions.

This allowed me to recover not only the text but also the structure of my posts.

Step 2: Downloading Images from the CDN

Jetpack, a WordPress plugin I had been using, had cached all my images on its CDN. Another Python script came to the rescue here, downloading the referenced images and saving them locally. This script ensured that every image in my recovered HTML was preserved for future use.

Step 3: Choosing Hugo for My Rebuild

I decided to use Hugo, a static site generator, for its simplicity and speed. Hugo offered:

• Easy customization through themes and templates.
• Markdown-based content creation.
• Built-in support for shortcodes, which I leveraged extensively.

Hugo is an excellent choice for a pet project or something with a dedicated team. But if you’re trying to make a home for your business online give SquareSpace a try. You’ll be up and running in less time than it takes you to finish reading this blog post.

Step 4: Converting HTML to Hugo Markdown

With my recovered content and images, I converted each HTML page into a Hugo-friendly Markdown file. A custom script automated this process, extracting fields like title, description, and tags for Hugo’s front matter. Each post was then saved in its own directory with an index.md file and associated images.

Step 5: Setting Up Cloudflare Pages for Hosting

I uploaded my Hugo site to a private GitHub repository and connected it to Cloudflare Pages. Cloudflare Pages offered:

• Free and fast global hosting for static sites.
• Seamless integration with GitHub for automatic deployments.
• Built-in caching and performance optimizations.

Step 6: Enhancing the Site with Hugo Shortcodes

To make my site stand out, I created custom Hugo shortcodes:

• Recipe Card: This shortcode supports rich JSON-LD schema for Google Rich Results, making my recipe posts more discoverable.
• Affiliate Links: A simple shortcode for embedding product links with consistent formatting and tracking.

These shortcodes improved SEO and ensured a clean, professional presentation.

Step 7: Automating Image Optimization with GitHub Actions

Manually optimizing images for every post was time-consuming, so I automated the process with GitHub Actions. Here’s what happens on every commit to main:

1. Convert to WebP: Images are converted from JPEG/PNG to the more efficient WebP format.
2. Resize: Featured images are resized to a maximum width of 1920px, while other images are limited to 800px.
3. Update References: Markdown files are updated to reference the new WebP images.

Step 8: Refining My Workflow

For new posts, I streamlined my process:

1. Write content in Markdown using VSCode or directly from my phone with GitHub Mobile.
2. Use iOS Shortcuts to rename and upload images to the appropriate directory.
3. Push the post to a GitHub branch, where the CI pipeline optimizes images and validates the content.
4. Merge to main for deployment via Cloudflare Pages.

Lessons Learned

• Backups Are Critical: If I had kept a WordPress backup, I could have avoided this entire ordeal.
• Static Sites Are the Future: Hugo and Cloudflare Pages deliver unparalleled speed and simplicity.
• Automation Saves Time: From image optimization to CI pipelines, automation has made managing my site effortless.

Conclusion

Rebuilding my site was an unexpected journey, but it led to a faster, more secure, and easier-to-maintain platform. If you’re considering switching to a static site generator or need to recover lost content, tools like the Wayback Machine, Hugo, and Cloudflare Pages can make it possible.

View the scripts I used on GitHub

If you’re embarking on a similar journey or have questions, feel free to reach out. I’m happy to share what I’ve learned. Goodbye WordPress—hello Hugo!