script/serve-public.js(404): handle relative URLs

dscho · dscho · commit 9b59a3062bad · 2025-03-15T14:22:33.000+01:00
When building the site with `HUGO_RELATIVEURLS=true` (which is the
default when building locally), the `404.html` page rightfully assumes
that its resources, such as images, can be found via relative URLs like
`./images/favicon.ico`.

That leads to a problem when the `serve-public.js` script wants to Use
it in case it does not have certain file that is in a subdirectory. For
example, when a developer directs their web browser to
http://localhost:5000/docs/git-undo, the result will be the 4O4 page,
but it will be unstyled because it looks for the CSS and the wrong
location.

The solution is to specify the base URL explictly in the served 404
page. In this instance it is easy because we know exactly that this
script will serve the site via http://localhost:5000/ and therefore the
base url is simply the `/`.

Signed-off-by: Johannes Schindelin &lt;johannes.schindelin@gmx.de&gt;
diff --git a/script/serve-public.js b/script/serve-public.js
@@ -49,7 +49,11 @@ const handler = (request, response) => {
     } catch(e) {
         console.log(`Could not read ${filename}`);
         response.writeHead(404, {'Content-Type': 'text/html'});
-        fs.createReadStream(path.join(basePath, '404.html')).pipe(response);
+        // insert <base> to fix styling
+        const html = fs.readFileSync(path.join(basePath, '404.html'), 'utf-8')
+          .replace(/<head>/, '\n  <base href="/" />')
+        response.write(html)
+        response.end()
         return;
     }
 };
