#Relative paths in html

4 messages · Page 1 of 1 (latest)

ruby dirge
#

I have some a static subpage, external to Astro, that I want to serve along my Astro website, in a path like this: mywebsite.com/precompiledwebsite. For doing this, I placed the entire precompiledwebsite folder in the public folder of my Astro project. This folder has a root index.html file, and a series of subfolders with all the resources used by the precompiled website. For example, in precompiledwebsite/css, you can find css files that are referenced inside the root index.html file like this:

<link rel="stylesheet" href="./css/normalize.css">

After running npm run build, I can confirm that the entire precompiledwebsite folder is put under dist/precompiledwebsite. If I then run npm run preview, I can access the precompiled website by going to mywebsite.com/precompiledwebsite, exactly as intended. However, the CSS styles, as well as other resources, such as images, are missing, revealing that the relative paths seem not to be processed as paths relative to the location of the dist/precompiledwebsite/index.html folder, but rather from the root of the dist folder. What can I do about this?

next kilnBOT
#

Hi @ruby dirge. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Based on the information provided in the knowledge sources, I can offer some insights and suggestions regarding your issue with relative paths in HTML for a static subpage in your Astro project.

The problem you're experiencing is related to how Astro handles files in the public/ directory. According to the Astro documentation on the public/ directory, files placed in this folder are copied directly into the build folder untouched. This means that the relative paths in your HTML files remain as they are, which can lead to issues when serving the site from a different base path.

To resolve this issue, you have a few options:

  1. Use absolute paths: Instead of using relative paths like ./css/normalize.css, you can use absolute paths starting from the root of your website. For example:

    <link rel="stylesheet" href="/precompiledwebsite/css/normalize.css">

    This approach ensures that the paths are always resolved correctly, regardless of the current page's location.

  2. Adjust the base URL: If you want to keep using relative paths, you can add a <base> tag to your HTML files to specify the base URL for all relative URLs in the document. Add this to the <head> of your index.html:

    <base href="/precompiledwebsite/">

    This tells the browser to resolve all relative paths from the /precompiledwebsite/ directory.

  3. Use the base configuration option: If you're serving your entire Astro site from a subdirectory, you can use the base configuration option in your astro.config.mjs file. However, this might not be suitable for your specific case since it affects the entire Astro site, not just your precompiled website.

#

It's important to note that Astro's built-in asset handling and optimization features don't apply to files in the public/ directory. As mentioned in the Astro documentation on imports, files in public/ are copied directly into the final build without processing.

If you want to take advantage of Astro's asset optimization features, you might consider integrating your precompiled website more closely with the Astro build process. However, this would require restructuring your project and is not necessary if you just want to serve the precompiled website as-is.

Remember that when using npm run preview, you're testing your production build locally. Make sure to test your site in a production-like environment to ensure all paths resolve correctly when deployed.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: