How do you serve responsive images from Cloudflare R2 in Hugo?

You build a custom Hugo shortcode that generates elements with breakpoint-specific sources. Upload images at full quality to Cloudflare R2, then use Cloudflare's image resizing service to serve optimized versions (320px for mobile up to 1600px for desktop) with automatic WebP conversion. This way you maintain a single source image but deliver the right size to each device.

What tech stack does this Hugo blog use?

The site runs on Hugo deployed to GitHub Pages, with Cloudflare as CDN and images hosted on Cloudflare R2. Social media automation is handled by Cloudflare Workers using Llama 4 Scout 17B for AI-generated posts to Bluesky and Twitter. A newsletter system uses Cloudflare Workers + KV with Resend for email delivery.

How do you automate social media posting from a Hugo blog?

Cloudflare Workers monitor the Hugo site's feed and automatically generate social media posts using Workers AI (Llama 4 Scout 17B). The workers create neutral, non-clickbait posts with banned word filtering, posting to both Bluesky and Twitter/X without manual intervention.

How does IndexNow work with Hugo for faster indexing?

IndexNow integration is automated through GitHub Actions. When content changes, the workflow checks which URLs have been recently modified based on the lastmod frontmatter field and submits only those URLs to search engines, resulting in faster discovery and indexing of new or updated content.

How do you add security headers to a GitHub Pages site?

GitHub Pages doesn't process _headers files, so a Cloudflare Worker intercepts all requests on the domain and injects HTTP security headers including HSTS, Content-Security-Policy with frame-ancestors, Cross-Origin-Embedder-Policy, Cross-Origin-Opener-Policy, and Permissions-Policy. The CSP must be kept in sync across the Worker, head.html meta tag, and _headers reference file.

How do you show most-read posts on a Hugo static site?

A Cloudflare Worker proxy queries the GoatCounter analytics API for the top 10 posts over the past 7 days. The Hugo site footer fetches this data client-side and renders a "Most Read" section. The Worker adds CORS headers and caches responses for 1 hour.

Hugo Blog Tech Stack: GitHub Pages, Cloudflare R2 & Workers

This site runs on Hugo, deployed to GitHub Pages with Cloudflare CDN. Images are hosted on R2 (static.philippdubach.com) with automatic resizing and WebP conversion.

The core challenge was responsive images. Standard markdown ![alt](url) doesn’t support multiple sizes. I built a Hugo shortcode that generates <picture> elements with breakpoint-specific sources—upload once at full quality, serve optimized versions (320px mobile to 1600px desktop) automatically.

Updates

March 2026

Hugo Upgrade — Upgraded from Hugo v0.128.0 to v0.157.0. Migrated deprecated .Site.AllPages to .Site.Pages in the sitemap template and .Site.Data to site.Data across navigation, structured data, and research templates. Removed a dead readFile security config key from hugo.toml. No breaking changes, zero deprecation warnings.

February 2026

Frontmatter Unification — Converted all 70 YAML frontmatter posts to TOML and added Key Takeaways to all 73 posts. Takeaways render as a visible summary box between the post header and content body, optimized for Generative Engine Optimization (GEO) so AI search engines can extract citation-ready passages.

Design Streamlining — Unified left-bordered aside components (key takeaways, newsletter CTA, disclaimer) to consistent 3px borders and aligned padding. Established a vertical spacing rhythm across post zones: key takeaways, content body, newsletter CTA, footer divider, related posts. Added breathing room around images (1.5rem padding). Refined key takeaways heading to 0.85rem uppercase label with square bullets.

Homepage Redesign — Rebuilt the homepage with a tabbed layout (Articles/Projects), year dividers, and thumbnail images served via Cloudflare Image Resizing. Consolidated navigation into a unified sidebar.

Security Headers Worker — Deployed a dedicated Cloudflare Worker on philippdubach.com/* that injects HSTS, CSP with frame-ancestors, COEP, COOP, and Permissions-Policy headers. GitHub Pages doesn’t process _headers files, so the Worker fills that gap. SHA-pinned all GitHub Actions and added Hugo binary checksum verification in CI.

Machine-Readable Feeds — Added JSON Feed 1.1 alongside RSS, a Posts API for programmatic access, and llms.txt/llms-full.txt for AI crawler discovery. All output formats configured in hugo.toml.

GoatCounter “Most Read” API — Built a Cloudflare Worker proxy that queries the GoatCounter API for the top 10 posts over the past 7 days. The footer’s “Most Read” section now fetches live data from this worker instead of a static list.

FAQ Section — New /faq/ section with per-category pages (Finance, AI, Tech, Economics, Medicine). Each post can define faq entries in frontmatter; Hugo aggregates them into browsable FAQ pages with FAQPage structured data for search engines.

Readnext Shortcode — Inline “Related” link to another post: {{< readnext slug="post-slug" >}}. Links are validated against live permalinks at build time.

RSS Feed Fixes — Stripped lightbox overlay elements from full-content RSS to prevent images appearing twice in feed readers. Added XSLT stylesheet for browser-friendly RSS rendering.

Cloudflare Cache Purge — GitHub Actions deployment now automatically purges the Cloudflare cache after each build.

Research Page — Dynamic /research/ page pulling publication data from data/research.yaml with SSRN links, DOIs, and structured data.

January 2026

Social Automation & AI Model Upgrade — Upgraded Workers AI model from Llama 3.1 8B to Llama 4 Scout 17B for better post generation. Added Twitter/X automation worker alongside Bluesky. AI generates neutral, non-clickbait posts with extensive banned word filtering.

Post Composer Enhancements — Added auto-closing brackets [ ( { in editor. Updated footer with social links matching main site. Deployed at post-composer.pages.dev.

UI/UX Polish — Fixed mobile footer spacing consistency. Increased homepage post spacing (3.75rem). Disclaimers now only display on individual posts, hidden on homepage. Centered related posts heading.

Content Organization — Taxonomy system with categories (Finance, AI, Medicine, Tech, Economics) and types (Project, Commentary, Essay, Review). Hugo generates browsable /categories/ and /types/ pages.

Disclaimer Shortcode — Six types: finance, medical, general, AI, research, gambling. Syntax: {{< disclaimer type="finance" >}}.

IndexNow Integration — Automated submissions via GitHub Actions for faster search engine discovery. Only pings recently changed URLs based on lastmod.

December 2025

Code Blocks — Syntax highlighting via Chroma with line numbers in table layout. GitHub-inspired color theme.

Newsletter System — Integrated email subscriptions via Cloudflare Workers + KV. Welcome emails via Resend.

Security & Performance Audit — Fixed multiple H1 tags per page. Hardened CSP with frame-ancestors. Added preconnect hints for external domains. Added seoTitle frontmatter for long titles.

November 2025

Shortcodes — HTML table shortcode. Lightbox support on images.

June 2025

SEO & Math — Open Graph integration for social previews. Per-post keyword management. LaTeX rendering via MathJax 3 (conditional loading).

May 2025

Full Rebuild — Migrated from hugo-blog-awesome fork to fully custom Hugo build.