Serving a Hugo Site from Multiple Domains Using Relative URLs

Want to host the same Hugo site on multiple domains without generating separate versions? By configuring Hugo to use relative URLs, you can efficiently serve the same fileset across multiple domains. Here’s how you can set it up.

Steps to Enable Relative URLs in Hugo

1. Configure Hugo to Use Relative URLs

In your config.toml (or config.yaml/config.json), enable relative URLs by setting the relativeURLs option to true:

relativeURLs = true

This instructs Hugo to generate links relative to the current page instead of absolute URLs.

2. Use the relURL Function in Templates

Ensure your templates use the relURL function for generating relative links. For example:

<a href="{{ .RelPermalink }}">Link</a>

This ensures that all links adapt to the domain being used, making them work seamlessly across multiple domains.

3. Avoid Hardcoding Base URLs

Avoid hardcoding the base URL in your content and templates. Instead, let Hugo handle link generation dynamically with its built-in functions.

Building the Site

Once you’ve configured relative URLs:

  1. Make sure your baseURL in the config.toml is set to /:
    baseURL = "/"
  2. Generate the production build using:
    hugo --gc --minify
    The output will be placed in the public/ directory with relative URLs.

Deploying the Site

Deploy the contents of your public/ directory to the servers hosting your multiple domains. Since the URLs are relative, the same fileset will adapt to any domain serving them.

Benefits of Using Relative URLs

  • Flexibility: One set of files can serve multiple domains effortlessly.
  • Efficiency: Simplifies your workflow by avoiding the need to rebuild the site for each domain.
  • Seamlessness: Ensures all links work correctly, regardless of the domain used to host the site.

By following these steps, you can streamline hosting your Hugo site on multiple domains.

Related Posts