Redirects

What are redirects?

Redirects send users from one URL (a URL that a user typed into the browser, clicked on, or otherwise requested) to another, new destination URL. Website maintainers often create redirects when content is moved to a new URL.

Why did we need to set up redirects for the Openscapes website if the domain name (openscapes.org) remained the same?

Because blogdown has a different directory structure than Quarto sites, some old URLs broke. This primarily affected blog posts. For example, when openscapes.org was built on blogdown, blog post URLs took the form:
https://openscapes.org/blog/2021/03/10/nasa-announcement/. Now that openscapes.org is built using Quarto's framework, blog post URLs take the form: https://openscapes.org/blog/2021-03-10-nasa-announcement/ (note the - not /). Since blog post links have been shared, linked in existing materials, referenced by other websites, etc. it was important that we created redirects so that if someone clicks on this link: https://openscapes.org/blog/2021/03/10/nasa-announcement/, it actually takes them to this link, https://openscapes.org/blog/2021-03-10-nasa-announcement/ (note: it does! because of our redirects 😄).

How to create a redirect

This took a minute for us to figure out! Read on for more information about our unsuccessful attempts, and ultimately, our working solution. You can check also out our notes/discussion on deploying to Netlify and troubleshooting redirects in issue #36.

IMPORTANT: You'll note that there are redirects in our netlify.toml file for main web pages, blog posts, and events. At the time of initially writing this Wiki (6/29/2023), only blog post redirects worked. Check out the Non-blog post redirects section, below for more information on main website pages and events.

What didn't work

Initially, we tried adding aliases to each blog post file according to Quarto's Redirects documentation. They looked like this:

---
title: "Announcing the NASA Openscapes Framework"
# additional YAML omitted for brevity
aliases: 
  - https://www.openscapes.org/blog/2021/03/10/nasa-announcement/
---

These did not work (i.e. typing in an old URL would return a 404 error, not send us to the new blog post URL). We then noted the Tip in this section of Quarto documentation which read:

Depending on where you are deploying your site there may be more powerful tools available for defining redirects based on patterns. For example, Netlify _redirects files or .htaccess files. Search your web host’s documentation for “redirects” to see if any of these tools are available.

This led us to create a _redirects file, which is a plain text file named _redirects without a file extension and that's saved to the publish directory (in our case, our root directory) of our site. Syntax for the _redirects file took the form:

# Redirects from what the browser requests to what we serve
/blog/2021/03/10/nasa-announcement /blog/2021-03-10-nasa-announcement
blog/2021/05/03-noaa-nwfsc-champions /blog/2021-05-03-noaa-nwfsc-champions
blog/2022/02/17-esip-winter-2022 /blog/2022-02-17-esip-winter-2022
# etc....

This also did not work (again, typing in an old URL would return a 404 error, not send us to the new blog post URL). We're still not really sure why this wasn't working.

What did work

Ultimately, we created a Netlify configuration file, netlify.toml, which did work 🎉 (read the bonus section below for a step-by-step guide on reformatting, if you're curious).

References to netlify.toml files kept appearing in Google searches, and ultimately watching this YouTube video led us to trying it out. Using netlify.toml files for writing redirect rules is more verbose, but also more explicit. You can read more about the syntax, but a simplified example is shown below:

[[redirects]]
	from = "/blog/2021/03/10/nasa-announcement/"
	to = "/blog/2021-03-10-nasa-announcement/"
	status = 301

[[redirects]]
	from = "/blog/2021/05/03/noaa-nwfsc-champions/"
	to = "/blog/2021-05-03-noaa-nwfsc-champions/"
	status = 301

[[redirects]]
	from = "/blog/2022/02/17/esip-winter-2022/"
	to = "/blog/2022-02-17-esip-winter-2022/"
	status = 301

# etc....

Note: HTTP 301 is the response status code for "Moved Permanently". 301 is set as the status, by default. We just chose to explicitly include it here for readability.

Non-blog post redirects

Main web pages

Julie noted in issue #36 that including a trailing / on any main page ULR would return this (for example):

whereas omitting the trailing / returns the correct page rendering:

We initially assumed adding redirects to the netlify.toml file (like below), would resolve this issue.

[[redirects]]
  from = "/code-of-conduct/"
  to = "/code-of-conduct"
  status = 301

When it did not work, a bit more digging led us to this Netlify support article on trailing slash behavior with two important insights:

"To start, redirects cannot be used to alter trailing slash behaviour"

and

"In summary, you’re probably not going to want to untick pretty URLs in our UI."

We had turned off Pretty URLs in our initial website deployment troubleshooting phase -- turning these back on resolved our issue of trailing /. Now, https://openscapes.org/code-of-conduct and https://openscapes.org/code-of-conduct/ resolve to the same page.

Events

Redirects are not (at the time of writing this, 6/29/2023) working for events. Read A note on the history of Openscapes events in the Adding events wiki for more details.

BONUS: Reformatting list of blog post redirects from _redirects to netlify.toml file format

Julie taught Sam about regular expressions (regex) and Sam had the perfect opportunity to practice using them for reformatting content in our original _redirects file to the new netlify.toml file format. Sam documented her steps for doing so in issue #36 for future reference, and copied them below for safe keeping. Maybe these notes prove to be helpful to someone somewhere someday 😃 .

---

Our _redirects file looked like this (only 3/94 blog post redirects shown here):

# Redirects from what the browser requests to what we serve
blog/2021/03/10-nasa-announcement /blog/2021-03-10-nasa-announcement
blog/2021/05/03-noaa-nwfsc-champions /blog/2021-05-03-noaa-nwfsc-champions
blog/2022/02/17-esip-winter-2022 /blog/2022-02-17-esip-winter-2022

We need to instead create a netlify.toml file, which looks like this:

[[redirects]]
  from = "/blog/2021/03/10-nasa-announcement/" 
  to = "/blog/2021-03-10-nasa-announcement/"
  status = 301

[[redirects]]
  from = "/blog/2021/05/03-noaa-nwfsc-champions/" 
  to = "/blog/2021-05-03-noaa-nwfsc-champions/"
  status = 301
  
[[redirects]]
  from = "/blog/2022/02/17-esip-winter-2022/" 
  to = "/blog/2022-02-17-esip-winter-2022/"
  status = 301

Below are my steps for using regex to help streamline reformatting:

1. In RStudio, open the redirects-list file (we had copied everything from _redirects to a separate file, called redirects-list for fiddling), then use command + f to open find/replace
2. To capture the first half (i.e. from), Find: blog/([0-9]{4})/([0-9]{2})/([0-9]{2})-([\w-]+) , Replace: from = "blog/\1/\2/\3/\4/"\r (e.g. converts blog/2021/03/10-nasa-announcement to from = "/blog/2021/03/10-nasa-announcement/" and inserts a carriage return)
3. To capture the second half (i.e. to), Find: /blog/([0-9]{4})-([0-9]{2})-([0-9]{2})-([\w-]+), Replace: to = "/blog/\1-\2-\3-\4/"\r (e.g. converts /blog/2021-03-10-nasa-announcement to to = "/blog/2021-03-10-nasa-announcement/" and insets a carriage return. NOTE: Replace All did not insert carriage return, but clicking Replace each time did...unsure why, but ended up just clicking Replace through all occurrences)

Resulting output:

from = "blog/2021/03/10/nasa-announcement/"
to = "/blog/2021-03-10-nasa-announcement/"

from = "blog/2021/05/03/noaa-nwfsc-champions/"
to = "/blog/2021-05-03-noaa-nwfsc-champions/"

from = "blog/2022/02/17/esip-winter-2022/"
to = "/blog/2022-02-17-esip-winter-2022/"

4. To add [[redirects]] above each from/to pair, Find: (from = "/blog/[0-9]{4}/[0-9]{2}/[0-9]{2}/[\w-]+/"), Replace: [[redirects]]\r\1

Resulting output:

[[redirects]]
from = "blog/2021/03/10/nasa-announcement/"
to = "/blog/2021-03-10-nasa-announcement/"

[[redirects]]
from = "blog/2021/05/03/noaa-nwfsc-champions/"
to = "/blog/2021-05-03-noaa-nwfsc-champions/"

[[redirects]]
from = "blog/2022/02/17/esip-winter-2022/"
to = "/blog/2022-02-17-esip-winter-2022/"

5. To add status = 301 after each from/to pair, Find: (to = "/blog/[0-9]{4}-[0-9]{2}-[0-9]{2}-[\w-]+/"), Replace: \1\rstatus = 301

Resulting output:

[[redirects]]
from = "blog/2021/03/10/nasa-announcement/"
to = "/blog/2021-03-10-nasa-announcement/"
status = 301

[[redirects]]
from = "blog/2021/05/03/noaa-nwfsc-champions/"
to = "/blog/2021-05-03-noaa-nwfsc-champions/"
status = 301

[[redirects]]
from = "blog/2022/02/17/esip-winter-2022/"
to = "/blog/2022-02-17-esip-winter-2022/"
status = 301

6. To add tabs ahead of each from/to/status lines, find and replace the following:

• Find: (from = "/blog/[0-9]{4}/[0-9]{2}/[0-9]{2}/[\w-]+/"), Replace: \t\1 (also realized that $ works too, e.g. \t$1)
• Find: (to = "/blog/[0-9]{4}-[0-9]{2}-[0-9]{2}-[\w-]+/"), Replace: \t\1
• Find: (status = 301), Replace: \t\1

Resulting output:

[[redirects]]
  from = "/blog/2021/03/10-nasa-announcement/" 
  to = "/blog/2021-03-10-nasa-announcement/"
  status = 301

[[redirects]]
  from = "/blog/2021/05/03-noaa-nwfsc-champions/" 
  to = "/blog/2021-05-03-noaa-nwfsc-champions/"
  status = 301
  
[[redirects]]
  from = "/blog/2022/02/17-esip-winter-2022/" 
  to = "/blog/2022-02-17-esip-winter-2022/"
  status = 301