Relative links between html docs

inglestone · 04-05-2023 03:58 AM

Hi yall!

Just started learning to use GCP for hosting a static website for my thesis project. So far, I've managed to set everything up correctly, and the website is live. However, I cannot for the life of me figure out why the relative links between HTML docs and CSS don't work.

In my index.html I have a <a href="./other.html"> and it works fine in VSCode but just returns a 404 on the live page. Similarly, this didn't work for the CSS but I could solve that by linking the storage URL instead of the relative path.

Is this something that isn't possible with this stack or have I missed something this basic because I really cant find an answer.

Thanks in advance

qt

When relative links lead to a 404 that most likely means the resource does not exist. In your example it appears that you're using a directory relative url to reference other.html. I would check that other.html sits in the same exact directory structure as the page that the a element is hosted on. As an example if your link is on example.com/dir/home.html your link will go to example.com/dir/other.html.

It's also possible that the GCP service you are using to host your static site is removing the html extension, so instead of example.com/other.html the address is example.com/other

Those two scenarios are likely candidates. If this doesn't work please share what GCP service you are using and what VS Code tool you are using locally and I can take another look.

inglestone

Thank you for your reply!

I think the way I structured the directories didn't mesh with how I used the relative links. Before, it was example.com/project_name/index.html and so on. Now I just removed that middle directory project_name and it seems like that solved it, right now I'm waiting for the change to propagate to the live page to see if it works there.

I'm using GCS Buckets to serve the webpage, I followed this tutorial on the Cloud Guides page. In VSCode I'm just using the regular live-server plugin to preview and it worked there.