How to configure base URL for a static website

Question

I have a static website - it has a few HTML, CSS, and js files. I can serve it locally, or I could publish it to a static website server like Netlify or Vercel.

Problem: I want to serve it at a base url. e.g. www.mydomain.com/baseurl. So for example, <link rel="stylesheet" href="dist/style.css"> in index.html should be converted to <link rel="stylesheet" href="baseurl/dist/style.css"> when deployed.

I could rewrite the URLs in all my files, but then it wouldn't work when trying to serve it locally.

How can I configure a base URL?

Answer 1

Just move everything into a folder called baseurl.

e.g. folder structure

- root
  - baseurl
    - index.html
    - dist
       - style.css

So, now www.domain.com/baseurl/index.html, which rewrites all requests to /baseurl to wherever this thing is hosted, should work because any requests for assets all start with baseurl and will all be rewritten.

Note

I did come across some weird behaviour though which I didn't understand. Say I had the following folder structure:

- root
  - baseurl
    - folder
       - index.html
       - markdown.md
       - dist
         - style.css

Note that markdown.md is on the same level as index.html and it is an asset required by index.html.

When I go to www.domain.com/baseurl/folder/index.html everything works fine.

However, if I go to www.domain.com/baseurl/folder/index.html then it complains about not being able to find www.domain.com/baseurl/markdown.md. It's looking for the asset in the wrong place.