Redirects Help & 404 Error

Site: rajeevj.netlify.app

Hi,
I’m very new to all this!

I have lots of HTML files in my “pages” folder.
When I view a page, it appears at: rajeevj.netlify.app/pages/home.html
How do I make the URL appear as: rajeevj.netlify.app/home.html

The _redirects file currently has:
/pages/* /:splat

Which I hoped would change the URL to rajeevj.netlify.app/home.html but it doesn’t.

Also, I currently have a “404.html” file here.
For some reason, this page doesn’t appear when the error occurs:
https://rajeevj.netlify.app/abcde
The docs say this so it should work:

If you add a 404.html page to your site, it will be picked up and displayed automatically for any failed paths.

Any idea how to fix these 2 issues?

Thanks,
Rajeev :grin:

@yoyoman0909 Welcome to the Netlify community.

You must have figured this out because each of these works as expected for me.

Well, a question for you. If you need those files to appear in the way you mentioned, won’t it be easier to not save those files in the pages folder? It’s better than redirecting I would say. Is there any specific reason for this setup?

About the 404 page, it works only when the 404.html page is in the root of the website, that is, yourdomain.com/404.html. Since you have it in pages directory, it won’t work. You’d have to add another redirect rule for that and that returns us to my first point.

If you’re still interested to use redirects, the file should look something like:

/* /pages/:splat 200!. That’s my guess and I haven’t tested. However, with this setup, all your website’s files would have to be in the pages folder and that includes the CSS, JS and any other file.

1 Like

Thank you so much!
/* /pages/:splat 200! seemed to work. I had it the wrong way around.

I like to set up my website files like this where I have 4 folders in the root; pages, css, js & images.
I noticed when I placed my 404.html in the root, it worked as expected.
I would still like to keep it in the “pages” folder to keep it neat, what redirect rule would I have to use for that? If that’s not possible, I’ll just keep it at the root.

When you mentioned all my other files would have to also be in “pages”, I’ve tried to get around that with 3 extra rules. The last rule works but none of the others do.

/404.html /pages/404.html :splat 200!
/css/ /css/:splat 200!
/images/ /images/:splat 200!
/js/ /js/:splat 200!
/* /pages/:splat 200!

/* /pages/404.html 404

It should probably be /css/* and so on. Notice the asterisk.

Thanks! The 404 Error Page is working great!

https://rajeevj.netlify.app/

However /pages/ has started appearing in the URL again and the image for the icon in the tab is not displaying but does display at https://rajeevj.co.uk/images/logo.png.

Any idea why?

/* /pages/404.html 404
/css/* /css/:splat 200!
/images/* /images/:splat 200!
/js/* /js/:splat 200!
/* /pages/:splat 200!

Does it work if you put the 404 rule at the end of the file?

@yoyoman0909 I’m not a redirect guru, but these entries look all wrong to me.

First, though, you’d be better off putting top-level content (such as your main index.html and 404.html pages) at the top level, instead of putting them in a directory and trying to finagle redirects.

Here’s my perhaps uninformed take on your redirects:

/* /pages/404.html 404 looks like you are redirecting everything to a 404 page inside your /pages/ subdirectory.

/css/* /css/:splat 200! looks like you are redirecting /css/ requests to /css/. Is this necessary?

The next two /images/ and /js/ redirects seem to be doing the same thing as the /css/ redirect.

/* /pages/:splat 200! would not be needed if you put your top-level files at the top level.

Because you are redirecting page requests to files in your /pages/ subdirectory, I would expect /pages/ to be in the URL.

Am I missing something?

Yes, but for the URLs returning 404.

Yes, because the last rule is redirecting /*, that is everything to the /pages/ directory. Since Netlify processes redirects top-down, once the rule for CSS is matched, the last rule won’t apply to it. Same for JS and Images.

That’s true, and indeed a recommended way, so +1 to that.

Hope that clears stuff.

I’m with you @gregraven - there’s a smell here :stuck_out_tongue:

@yoyoman0909 it’s typical to want to split out markup from scripts and styling. I’d say more often than not, for sites that aren’t running a build step, we see that structured as follows:

.
└── project-name/
    ├── src/
    │   ├── index.html
    │   ├── another-page/
    │   │   └── index.html
    │   ├── a-third-page/
    │   │   └── index.html
    │   ├── css/
    │   │   └── main.css
    │   └── scripts/
    │       └── main.js
    ├── netlify.toml
    ├── package.json
    └── some-config.yaml

and then you’d just set your publish directory to src/ so that your public-facing URL paths would begin at file-path src/ (e.g. the website root, https://example.com/ would serve the index.html right under src/). Using a discrete publish directory is very much the norm and Netlify’s configuration natively supports this. No _redirects would be required in this setup.

I hope that helps :confused: the goal here is to avoid more work for you and confusing _redirects setups.


Jon

Thanks everyone! Nice to see the Netlify community is so active! :grin:

Here is how I have my root folder structured:


Inside of the pages folder is the home.html, 404.html and all other HTML files.

My index.html directs the user straight to the home.html page.

The URL shortens as expected, the images can be found, but the 404 page doesn’t appear.
Currently looks like this:

/css/* /css/:splat 200!
/images/* /images/:splat 200!
/js/* /js/:splat 200!
/* /pages/:splat 200!
/* /pages/404.html 404!

You’re right but I’d like all the pages to be held inside its own folder just to keep it organised. :smile:

I did not know that so thank you! I will set my pages/ folder to be the publishing directory, then I can rename home.html to index.html. I’m then worried the other assets can’t be found but I’ll try it out, thanks!

Yes, they won’t be found.

I’m out of ideas then. I’d still highly recommend not using the pages folder for the HTML files. Redirects is not the right way to go.

Just be careful because setting the publish directory means anything higher than that directory won’t be accessible. I’d strongly recommend following the directory structure I outlined above and setting the publish directory to src so that everything from src/ down is accessible on the public web.

I’m still very new to all this so I’ll take all the advice I can get. I’ve deleted my _redirects file and placed everything under the src which has worked! For some reason I now have some pages displaying a .HTML extension and some don’t. (aboutme & contactme don’t).

Again, thanks for helping me with the file structure, I really wanted to get a good foundation before I started building the site in more detail!

1 Like

Awesome! Glad to hear it. Looks like everything is loading up great :grinning: If your repository is public, feel free to share it here too; you’ve got 3 Community Pilots on a single thread :laughing: I’m sure we’d be happy to help you along!

As for the .html showing in the address bar, assuming your site is running default settings for Pretty URLs (which it appears to be), your page will work at both the including-.html and not-including-.html variants. So for your aboutme.html page, it will render on both https://rajeevj.netlify.app/aboutme.html and https://rajeevj.netlify.app/aboutme - the key is to make sure your anchor tags <a> are targeting the /aboutme (non-trailing-slash) version. If the anchors are targeting the .html version (which it appears they are), the content will resolve but the .html will show in the address bar.


Jon

Thank you @jonsully ! :grin:

Seems as though everything is up and running now perfectly!
Thanks to @hrishikesh & @gregraven too, I’m getting a better understanding every day.

Hello please help me ,my site not open, i added my site and added index.html site but not open what i do next, please help me anyone.

Screenshot_2021-01-06 Page Not Found

Kindly share your repo and build log if possible as it would be more helpful than the generic 404 error screenshot.

i don’t understard what are u talking about,please describe me,

What are you deploying? Share that folder or something so we can check what’s happening.