I have read and becoming familiar with redirects in SvelteKit and Netlify, and read the Docs on both sites regarding doing them. Read this from Docs: Netlify Redirect Options I am redoing an older html site with Sveltekit. (the pages end in .html like; about.html) I know that SvelteKit does have a redirect helper function that I can put in the src/hooks/server.ts file.
I was advised that I can try that, but I also know that since the site will hosted on Netlify then I can just put redirects in the netlify.toml file.
So, do I have this syntax correct? This my attempt from the Netlify Docs:
# Redirect with a 301 *inner page*
[[redirects]]
from = "mycustomdomain.com/services.html"
to = "mydomain/services"
status = 301
# Redirect with a 301 *home page*
[[redirects]]
from = "mycustomdomain.com/index.html"
to = "mydomain.com/"
status = 301
** particular site it still in production, but want to figure this out ahead of timeā¦
Hi, Yes, your syntax for the Netlify redirects in the netlify.toml file is almost correct. However, thereās a small adjustment needed. Instead of specifying the from field with the entire domain, you should only use the path relative to the domain root (without the domain name). Hereās the corrected version:
# Redirect with a 301 inner page
[[redirects]]
from = "/services.html"
to = "/services"
status = 301
# Redirect with a 301 home page
[[redirects]]
from = "/index.html"
to = "/"
status = 301
With these redirects in place, when someone accesses mycustomdomain.com/services.html, they will be redirected to mydomain.com/services with a 301 status code (permanent redirect). Similarly, accessing mycustomdomain.com/index.html will redirect to mydomain.com/ (home page) with a 301 status code.
Make sure you have deployed your SvelteKit app to Netlify for the redirects to take effect. And as always, itās a good practice to test the redirects after deploying to ensure they are working as expected.
Thank you for those links; those are some of what I already looked at . I just wanted to ask in a more visual way for myself to understand
So according to your reply if I add those corrected ones for all pages in the toml file for the pages I should be good to goā¦ because in the SvelteKit site the pages will no longer have the .html at the end. Am I correct?
Thanks again!!
** How would this work if it was a large site?? Seems tediousā¦?
Yes, you are correct! Once you have added the correct redirects in the netlify.toml file, your SvelteKit site should work as expected, and the pages will no longer have the .html at the end.
For example, if you have a page that was previously accessible at mycustomdomain.com/about.html, after adding the redirect, it will be accessible at mycustomdomain.com/about instead. The same goes for the home page; it will be accessible at mycustomdomain.com/ without the need for index.html.
Depending on the amount of redirects Iād recommend using wildcards. Heres some documentation on this.
Regarding large sites, using the netlify.toml file is still a more manageable approach than manually handling redirects in your SvelteKit application code. Handling redirects at the server level (using netlify.toml in this case) is more efficient than letting every request reach your application code before performing a redirect.
** And (sorry one more Q) so that will help when a visitor clicks on a links that is already out there in the wild for years to resolve correctly to the new SvelteKit site then, right? ( I mean Iām sure hopefully)
Youāre welcome! Yes, you are absolutely correct! Implementing the redirects using the netlify.toml file will help ensure that visitors who click on old links (that are already indexed and available on the web) will be redirected correctly to the corresponding pages on your new SvelteKit site.
When you launch a new version of your website with a different URL structure (e.g., removing the .html extension in your case), the old URLs may still be present on external websites, search engine indexes, etc. If these old URLs are accessed, they would usually result in a ā404 Not Foundā error since the old paths no longer exist.
However, with the redirects in place, when a visitor clicks on an old link like mycustomdomain.com/about.html, the request will be intercepted by Netlify first. Netlify will then look at the netlify.toml file and see that thereās a redirect rule for /about.html to /about with a 301 status code (permanent redirect). It will then automatically redirect the visitor to the new page URL, mycustomdomain.com/about, without the .html extension.
Back at it here So got the site up with a custom domain; and thatās working! YAY happy!
I followed your advice above with my netlify.toml file and the redirects donāt seem to be cooperating Itās a small site, here is my complete netlify.toml file:
(I tried something different on the services page in a vane attempt lol)
** the pages are returning a 404 error just fyiā¦
ALSO: maybe this has something to do with it; the older html pages were served/hosted from a different host and to make it more complicated itās all running through Cloudflare ; but at lest the main home page is redirecting just fine and the site works itās just the inner pages that are not redirecting.
[[redirects]]
from = "/index.html"
to = "/"
status = 301
[[redirects]]
from = "/services.html"
to = "https://germanmagicfarm.com/services"
status = 301
[[redirects]]
from = "/clinics.html"
to = "/clinics"
status = 301
[[redirects]]
from = "/contact.html"
to = "/contact"
status = 301
[[redirects]]
from = "/sales.html"
to = "/"
status = 301
[[redirects]]
from = "/for-lease.html"
to = "/"
status = 301
[[redirects]]
from = "/meet-pam-bauer.html"
to = "/meet-pam-bauer"
status = 301
[[redirects]]
from = "/photo-gallery.html"
to = "/"
status = 301
I wasnāt sure how this thread would show up after I marked it as ādoesnāt solve problem anymoreā
Iāve been trying lots of things to get this to work ā¦
Ok I got the redirects to work by using the _redirects file in the root instead. I left the toml file in there tooā¦ not sure if this is right but at least the older links in the wild are not going to a 404 page anymore!
Would be curious where I went wrong or if needing both files is whatās needed
Itās a small site, here is my complete netlify.toml file: