Hugo on Wayne X.Y. Blog

Adding an Interactive Travel Map to Hugo Blog (Leaflet + JSON)

Tue, 10 Mar 2026 00:00:00 +0000

Adding an Interactive Travel Map to Hugo Blog (Leaflet + JSON)

Recently, I wanted to add an interactive map to the top of my blog’s Travel page to mark the places I’ve visited. After some consideration, I decided to use the open-source and lightweight Leaflet.js, paired with a custom JSON file to manage the locations and marker colors.

🗺️ Implementation Goals

Pin a map to the top of /life/travel to display the countries and places I’ve visited.
Centrally manage location data (including English and Chinese names, latitude, longitude, and custom colors) via a JSON file.
Use Leaflet.js to render the map, and automatically calculate the zoom boundaries (fitBounds) based on the JSON data to perfectly fit all markers.
Encapsulate the map into a Hugo Shortcode to easily reuse it across different language pages.

💾 Creating the Data File (Data Layer)

First, create a travel.json file under the data/ directory of your Hugo project. If you have new trips in the future, you just need to update this file without touching any code:

Hugo Image Management: GitHub vs Cloudflare R2

Tue, 03 Feb 2026 00:00:00 +0000

Hugo Image Management: GitHub vs Cloudflare R2

After setting up my Hugo blog and registering my own domain, I happily started updating the website via git push. But looking at the repository contents, I felt that pushing images together seemed a bit off XD. As I continue updating and maintaining the blog, images will inevitably increase, taking up too much space. Plus, if I switch development environments, I’d have to re-download a bunch of images locally when pulling.

Build an Automated Personal Blog with Hugo + Cloudflare Pages

Sun, 01 Feb 2026 00:00:00 +0000

Build an Automated Personal Blog with Hugo + Cloudflare Pages

Want to create a lightning-fast website that automatically updates every time you git push? This article will guide you through building a personal blog using the Hugo static site generator combined with Cloudflare Pages automated deployment service.

🛠 Why This Combination?

Originally, I used GitHub Pages for hosting, but since the repository must be public, I decided to switch to Cloudflare Pages connected to my GitHub repo. The setup was simpler than expected, and after each git push, GitHub Actions automatically runs and updates the website, ensuring everything works properly.