Search code examples
htmlcssvercelstatic-files

Vercel not following/finding folder structure when serving static website

I have a static html website that I am deploying using vercel. link can be found here. However, there are some pages that return 404 yet the directory and index files are present.

Here is my folder structure.

folder structure

As you can see, there is the root folder containing index.html. A directory called sms-solutions and inside it, a directory called bulk-and-premium which contains index.html.

The linking of my CSS files in sms-solutions/index.html are as follows.

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

The location of the CSS file can be seen in the folder structure image above, i.e sms-solutions/css/style.css. However, my console shows that Vercel is trying to find the CSS file in the root of the project

My question comes in 3 parts.

  1. Why can I not view the content in the index file when I visit sms-solutions/bulk-and-premium or sms-solutions/bulk-and-premium/index.html? (I see a 404 Page not found error)
  2. Why can't vercel find my static (CSS) files?
  3. How can I be able to fix above mentioned issues?
Solution

  • The nested pages were setting the links relative to the root instead of their parent folder. You can solve this by adding a vercel.json config with the contents

    {
  "trailingSlash": true
}

    The trailingSlash config will ensure that the path always has a trailing slash to signal that you are in a folder so the relative link references will work