SSI in Subfolders

View in Browser. You don't need to read the source code for this example.

The SSI containing the HTML head section typically contains several relative URLs like:

    <link href="styles.css" rel="stylesheet" type="text/css">
    <link href="images/favicon.png" rel="icon" type="image/x-icon" >

Any of the SSI files that create the page layout probably contain relative URLs like:

    <img src="images/main_logo.png" alt="Main Logo" ...>

Here's the problem:
If you include the SSIs into files in both the site's main folder and also in a subfolder, then the relative URLs simply can't be accurate in both locations.

If two pages use the same SSIs, the relative URLs will be exactly the same regardless from which folder the pages are being served.
A Web browser has no idea that an HTML file it receives from the server was put together using SSI files.
It just tries to resolve the relative URLs, which can't be accurate relative to both a folder and a subfolder.

The Solution:
Instead of relative URLs in the SSI files, use "host root URLs" like below.

    /~yourusername/csci270/styles.css

From ANYWHERE within your site - including subfolders - the above URL (must begin with /) will resolve to

    http://csci.lakeforest.edu/~yourusername/csci270/styles.css

Caution:
Never begin a relative URL with / like below:

    /file.html      (NOT a relative URL.)

The above is a "Host Root URL" (not a relative URL).
A single leading / resolves to the root directory of the Host, which is http://csci.lakeforest.edu in our case.
So href="/file.html" resolves to http://csci.lakeforest.edu/file.html

Account-Based Hosting:
Your web sites are enabled by standard Web hosting granted to all user accounts on the server.
Therefore, /~yourusername resolves to your public_html folder.
Now you can see how "The Solution" posed above works.