Gridsome Site on Netlify - How to redirect visitors to the Homepage when landing on pages that no longer exist

Support
,
1

I have a site at https://www.fossoway.org/

It is built using Gridsome and hosted on Netlify. The domain was previously hosted elsewhere on a free CMS and the url structure was a mess, so I didn’t want to recreate it for the new Gridsome site. I know that’s not ideal for SEO but there aren’t many backlinks from other sites pointing to individual pages and the new structure is much cleaner and more logical.

There are many pages still indexed in the search engines, which point to urls on the old site that no longer exist and I would like to set up a redirect so that visitors who click on these search engine results don’t land on a 404 page - that’s not a good look for a newly-built site. Instead, I would like them to be redirected to the homepage.

I know this is possible on an Apache server and it seems to be possible on Netlify according to the docs but I can’t get it to work.

So far, I have been using a _redirects file, which I created in the /static folder in Gridsome. This results in the file being copied “as is” into the /dist folder that I push to Git and which is set as the “Publish directory” on Netlify.

The site seems to function perfectly without a _redirects file - pages that don’t exist display the 404.vue sile I have created. However, I think it would be a much better experience for visitors arriving via search engines on urls that don’t exist to simply be redirected to the homepage.

So far, I have tried a lot of different things in the _redirects file, including the following.

# Syntax specified in the docs
/* /index.html 301 

# Other one-liners I've tried (yea, some of these I was grasping at straws a little!)
/* / 301
* / 301
/* / 301!
* / 404
/* /index.html 301!
* /index.html 301!

# Even tried combining more than one line (Really grasping at straws now!)
## Attempt 1
/* /index.html
/index.html / 301!

## Attempt 2
/* /index.html
* /index.html 404
/index.html / 301!

## Attempt 3
/* /index.html
/* /index.html 404!
/index.html / 301!

I have probably tried more than the ones listed above and am at a loss.

Here’s the build log from Attempt 3:

5:42:05 PM: Build ready to start
5:42:07 PM: build-image version: 122b31996ccaffd45d820a452d6227f8312110cc (focal)
5:42:07 PM: build-image tag: v4.5.3
5:42:07 PM: buildbot version: 0854df8549ceb2ae5c3f0bb7326040a5c2ced0c5
5:42:07 PM: Fetching cached dependencies
5:42:07 PM: Starting to download cache of 98.0MB
5:42:08 PM: Finished downloading cache in 797.708768ms
5:42:08 PM: Starting to extract cache
5:42:09 PM: Finished extracting cache in 1.207171117s
5:42:09 PM: Finished fetching cache in 2.023454704s
5:42:09 PM: Starting to prepare the repo for build
5:42:10 PM: Preparing Git Reference refs/heads/master
5:42:18 PM: Parsing package.json dependencies
5:42:19 PM: No build steps found, continuing to publishing
5:42:19 PM: Starting to deploy site from 'dist'
5:42:19 PM: Creating deploy tree asynchronously
5:42:20 PM: Creating deploy upload records
5:42:22 PM: 501 new files to upload
5:42:22 PM: 0 new functions to upload
5:42:40 PM: Starting post processing
5:42:40 PM: Post processing - HTML
5:42:40 PM: Processing form - contact
5:42:40 PM: Detected form fields:
5:42:40 PM:  - bot-field
5:42:40 PM:  - name
5:42:40 PM:  - email
5:42:40 PM:  - message
5:42:44 PM: Finished processing build request in 37.43624888s
5:43:03 PM: Post processing - header rules
5:43:03 PM: Post processing - redirect rules
5:43:03 PM: Post processing done
5:43:04 PM: Site is live ✨

I think I must be misinterpreting the docs or have a setting incorrectly applied in the Netlify admin area for the site.

Any help would be gratefully received.

2

Hi @Jimbobbly

A rule such as

/*   /404.html    404

is generally accepted as a fallback for any page that is missing/non-existent.

Having multiple /* rules will not work as whichever is listed first will always run and those below ignored as it matches anything/everything.

The solution in your case is to create rules for specific paths. For example if you had blog (/blog) on the old site but don’t now you could have

# Redirect old blog paths to homepage
/blog/*    /index.html    301

# Do not place any rewrites/redirects below here
# Fallback for missing/non-existent pages
/*    /404.html    404
1 Like
3

@coelmay - Absolutely fantastic! Your recommendation worked a treat. Thank you so much.

I created redirects for the specific paths that were still showing up in the search results and, Bingo!

In case it helps anyone in the future, here is what I am using.

_redirects file placed in root folder:

# Specific redirects for sections of the site still appearing in SERPS that no longer exist
/dcc* / 301
/links /links/ 301
/start / 301
/walc / 301
/gallery-index /gallery/ 301
/about /about/ 301
/strategy* /community-council/ 301
/forum* / 301

# Do not place any rewrites/redirects below here
# Fallback for other missing/non-existent pages
/* /404.html 404
1 Like