Simple 301 Redirect From old .html Files to Re-Done SvelteKit site

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… :slight_smile:

Thank you 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.

Here is some documentation:

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 :slight_smile:

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!! :slight_smile:

** 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.

Thank you so much! :grinning:

** 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)

:roll_eyes:

You’re welcome! :slight_smile: 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.

1 Like

Ok, awesome! I thought so, but wanted to double check !

Thank you SO much for your help! These forums are a lifesaver!!

I will mark this as solved! You get 5 stars lol! :grinning:

glad I could be of help! good luck.

1 Like

Back at it here :slight_smile: 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 :confused: 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

Thank you!!

@SamO Ok first off sorry for the bump :confused:

I wasn’t sure how this thread would show up after I marked it as ‘doesn’t solve problem anymore’ :wink:
I’ve been trying lots of things to get this to work …

Thank you for looking !

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 :slight_smile:

Maybe this will help someone!

Thank you !

Hi, @Fourwhitesocks sorry for the delay we have been super busy. Yes you needed both files netlify.toml and _redirects. I’m glad you figured it out.