Rewrite rules in hugo dev server

I have a page on my hugo site, /about, with three tabs that use the Web History API to act as if each tab had its own URL, /about/tab1, /about/tab2, and /about/tab3. On my hosting provider I have some rewrite rules that cause /about/tabN to be rewritten to /about. This works fine but one problem I have is that when developing this page with the hugo dev server, the auto-refresh functionality cases the page to reload when a file changes, and the hugo dev server doesn’t know about my rewrite rules, so every time I change a file I get a 404 because the browser is typically at a URL like /about/tab1, and when that URL is requested from the hugo dev server, it returns 404.

This is completely reasonable on the part of the hugo dev server and I could simply turn off the auto-reload functionality, but I was just wondering if there is any way that I can tell the hugo dev server about my rewrite rules, i.e. "when serving an HTTP request for “/about/tabN”, respond with what you would have responded with if the request were for “/about”.

Another option would be that whenever the auto-reload function fires, take the browser back to the URL from which the current page was originally loaded from, rather than refreshing the page at its current URL.

not really a rewrite rule, but you could utilize Alias together with Cascade to fake it.

In fact that

  • creates four pages
  • with the three tabX pages as client side redirects
  • only if the environment is development
  • which is true for running hugo server

about.md

+++
title =  'About'

[[cascade]]
   aliases = [ 'about', 'about/tab1', 'about/tab2', 'about/tab3']

[cascade._target]
environment = 'development'
+++

p.s. you will have to cleanup the public/about folder for a release build after building with hugo server. or use hugo --cleanDestinationDir. If not the redirect pages will stay.


even if there’s an idea - should have scanned the docs first

I have not read your post in detail, but the server config supports basic rewrite rules (ala Netlify):

2 Likes