1

I created a subdomain for my site

subdomain.example.com

I then pointed it to a subdirectory inside the /public_html folder on the server, where i created an index.html file. I referenced all assets in the html with ../img/, ../css/, ../js/ paths, but the page is having none of it. The index.html loads but all referenced files are shown as 404 in chrome.

What am I doing wrong?

Improve this question
2
  • "I then pointed it to a subdirectory" - Did you not point the subdomain to the subdirectory as part of the subdomain creation?
    – MrWhite
    Commented Oct 9, 2020 at 16:09
  • Yes. The subdomain is pointed to the subdirectory
    – Bravewart
    Commented Oct 11, 2020 at 11:14

1 Answer 1

Reset to default
3

I referenced all assets in the html with ../img/, ../css/, ../js/ paths.

These are client-side URL-paths; not server-side filesystem-paths. If the browser is currently at https://subdomain.example.com/ then a URL such as ../img/myimage.jpg cannot be resolved as intended from a client-side request. Since the browser cannot "go up" another directory (or rather URL path-segment) level - since it is already at the document root - it will most probably be resolved as https://subdomain.example.com/img/myimage.jpg - which presumably fails (404).

The same as typing https://subdomain.example.com/../img/myimage.jpg directly in the browser. The ../ path segment needs to be resolved by the browser before the request can be made.

You are probably better off not using relative URL-paths during development (unless you have specific requirements). Use a root-relative URL-path (starting with a slash) or absolute URL (with scheme + hostname) instead.

You need to rethink your directory structure. What exactly are you trying to achieve? A common repository for all assets or a way to reference assets on the main domain, without explicitly specifying an absolute URL.

There are various workarounds:

  • Use absolute URL-paths to your main domain. eg.
    https://example.com/img/myimage.jpg

  • Point the subdomain at the same root directory as your main domain and use a root-relative URL-path. eg.
    /img/myimage.jpg.

  • Point the subdomain at the same root directory as the main domain and use mod_rewrite to internally rewrite requests for pages to the subdirectory (so the subdirectory is hidden from the URL). But all (or some?) static assets to be served from the parent directory (and are not rewritten)? Reference assets using a root-relative URL-path, relative to the main domain. (Or specify a prefix and make the rewrite conditional?) Although this method is naturally far more complex and requires knowledge of conditional URL-rewriting (probably best avoided).

  • etc.

Improve this answer
5
  • thank you so much for explaining. That really helps. I'll try workaround 1 tonight. workaround 2: If I do it that way, how would the subdomain automatically load the index.html file in the subdirectory? workaround 3: would that be done in the .htaccess file?
    – Bravewart
    Commented Oct 11, 2020 at 11:14
  • "workaround 2: If I do it that way, how would the subdomain automatically load the index.html file in the subdirectory?" - Well, it starts getting more complex. If the subdomain points to the document root of the main domain then you wouldn't necessarily have a subdirectory. You could have index.html and index-subdomain.html and conditionally rewrite the request for the root based on the requested host header. Or, keep the subdirectory and again, conditionally rewrite the request (although this is really #3).
    – MrWhite
    Commented Oct 11, 2020 at 12:04
  • Yes, any URL-rewriting will require mod_rewrite in .htaccess (or the server config). If you have access to the server-config then you can also create symlinks (essentially "duplicating" the files) or create an Alias. Many possibilities depending on the specific requirements, but #1 is by far the simplest. But note that you need to be careful of any relative URL-paths in your CSS and JS files - if they are being used from two different URL locations - as you are naturally changing the base URL from which the relative URLs are relative to.
    – MrWhite
    Commented Oct 11, 2020 at 12:10
  • I have a follow up question. I am dealing with my website only once a year, so relevant knowledge fades away really quickly. I now want to serve a localized language version of the website www.website.com on www.website.com/en. I though I solved my previous problem with your help by placing an .htaccess file with a rewrite rule in the new folder. So, I copied the .htaccess file from the subdomain (from last November) in a newly created /en folder on my server. I also placed the translated index.html in that new /en folder.
    – Bravewart
    Commented May 27, 2021 at 11:34
  • But www.website.com/en just serves me the raw HTML without images or CSS. I am sure it's the same workaround as last time, but I cannot figure this out..
    – Bravewart
    Commented May 27, 2021 at 11:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.