404 NOT_FOUND for simple HTML & CSS site

Help
1

I have a simple html and css website. I was getting the infamous 404 NOT_FOUND until I found that I needed to create a vercel.json file and add the following:

{
    "rewrites": [
        {"source": "/(.*)", "destination": "/"}
    ]
}

However, now when I click on a page that is not the index.html, it shows me the index.html page but in the url shows the url of the page that I clicked on. In other words it only shows the home page when other pages are clicked on.

1 Like
2

Hey @joemurrayaz. That configuration would work for something that handles routing, like an Express.js site. If your site is actually just HTML then this configuration is working as expected by only showing the home page.

If you go to the Source tab on the deployment details page, then toggle over to output, that will let you see which pages are included in the deployment and then paths to access them. Just make sure you remove the current rewrites configuration.

We have a list of other 404 debugging tips that can help you solve this.

But if you need more help, please share your public repo or a minimal reproducible example so we can work together from the same code to find the best solution for you

3

So you’re saying that I need to remove the vercel.json file and find the real problem with the 404?

4

Yes. That configuration isn’t right for a plain HTML site. It would only be appropriate if you had a framework or library intentionally handling routing from the root path.

Something else was causing the 404, but it’ll be difficult to solve until you remove the rewrites config.

5

This is what I had to do:

  1. When deploying to Vercel:
  • Choose “Other” as your framework preset.
  • Leave the “Build Command” field empty.
  • Set the “Output Directory” to . (a single period).

I got that from perplexity.ai

6

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.