|
| 1 | +--- |
| 2 | +title: redirects file support |
| 3 | +description: What the _redirect file is and how to use them with a website on IPFS. |
| 4 | +--- |
| 5 | +# `_redirects` file support |
| 6 | + |
| 7 | +The `_redirects` file provides support for URL redirects and rewrites for websites hosted on Subdomain or DNSLink gateways. This feature enables support for single-page applications, progressive web applications, custom 404 pages, and avoids link rot when moving to IPFS-backed hosting. As well as the ability to change the appearance of a URL, change where content is located without breaking existing links, and enable URL rewriting. |
| 8 | + |
| 9 | +This `_redirects` implementaion is a subset of pre-existing standards supported by [Cloudflare](https://developers.cloudflare.com/pages/platform/redirects) and [Netlify](https://docs.netlify.com/routing/redirects/). |
| 10 | + |
| 11 | +For more detailed information, check out the [`_redirects` file support specs](https://github.com/ipfs/specs/pull/290). |
| 12 | + |
| 13 | +# Supported HTTP status codes |
| 14 | + |
| 15 | +* `200` - OK (redirect will be treated as a rewrite, returning OK without changing the URL shown in the browser). |
| 16 | +* `301` - Permanent redirect (the default status). |
| 17 | +* `302` - Found (commonly used for temporary redirects). |
| 18 | +* `404` - Not found (can be used redirect to custom 404 pages). |
| 19 | +* `410` - Gone (the requested content has been permanently removed). |
| 20 | +* `451` - Unavailable for legal reasons. |
| 21 | + |
| 22 | +# How to set up the `_redirects` file |
| 23 | + |
| 24 | +To use the `_redirects` file, there must be a file named `_redirects` stored underneath the root CID of the website. This `_redirects` file must be a text file containing one or more lines that follow the format explained below. |
| 25 | + |
| 26 | +## Format of the `_redirects` file |
| 27 | + |
| 28 | +Each line contained within the `_redirects` file has 3 basic components: |
| 29 | + |
| 30 | +1. The `from` path, this specifies the path to be redirected from. |
| 31 | +1. The `to` path, this specifies the path to be redirected to. |
| 32 | +1. The `status` component, this part is optional and specifies the HTTP status code that will be returned. (301, 404, etc.) |
| 33 | + |
| 34 | +For example, if for whatever reason I wanted to temporarily redirect traffic from my home page to my index page, the `_redirects` file will contain a line that looks something like this: |
| 35 | + |
| 36 | +``` |
| 37 | +/home /index.html 302 \n |
| 38 | +``` |
| 39 | + |
| 40 | +The same format is used for all redirects. |
| 41 | + |
| 42 | +# Examples |
| 43 | + |
| 44 | +## Catch all and PWA/SPA support |
| 45 | + |
| 46 | +The `200` status will be treated as a rewrite, returning OK without changing the URL shown in the browser. This staus code can be used to build [Progressive Web Apps](https://en.wikipedia.org/wiki/Progressive_web_app) and [Single Page Applications](https://en.wikipedia.org/wiki/Single-page_application). |
| 47 | + |
| 48 | +``` |
| 49 | +/home /index.html 200 \n |
| 50 | +``` |
| 51 | + |
| 52 | +## Redirect an old URL to a new place |
| 53 | + |
| 54 | +The `301` status is a permanent redirect, this is the default status code used when no others are spcified. |
| 55 | + |
| 56 | +``` |
| 57 | +/index /docs.html 301 \n |
| 58 | +``` |
| 59 | + |
| 60 | +The `302` status is commonly used for temporary redirects. |
| 61 | + |
| 62 | +``` |
| 63 | +/home /under-construction.html 302 \n |
| 64 | +``` |
| 65 | + |
| 66 | +## Add a custom 404 page to your website |
| 67 | + |
| 68 | +Use the `_redirects` file support to add a custom 404 page to your website. |
| 69 | + |
| 70 | +``` |
| 71 | +/home /custom-404.html 404 \n |
| 72 | +``` |
| 73 | + |
| 74 | +## Placeholders |
| 75 | + |
| 76 | +Placeholders are named variables that can be used to match path segments in the `from` path and inject them into the `to` path. |
| 77 | + |
| 78 | +This is useful for redirecting users to their desired content, even if their search was not completely accurate. |
| 79 | + |
| 80 | +For example, if I wanted to search for an article titled "hello world" that was written on June 15, 2022, I could search for it like this: `/posts/06/15/2022/hello-world` and be redirected to `/articles/2022/06/15/hello-world` |
| 81 | + |
| 82 | +``` |
| 83 | +/posts/<month>/<day>/<year>/<slug> /articles/<year>/<month>/<day>/<slug> \n |
| 84 | +``` |
| 85 | + |
| 86 | +# Evaluation |
| 87 | + |
| 88 | +The `_redirects` file is only supported on subdomain and DNSLink gateways, which provides [unique origin per root CID](https://en.wikipedia.org/wiki/Same-origin_policy). |
| 89 | + |
| 90 | +## No forced redirects |
| 91 | + |
| 92 | +Redirect logic will only be evaluated if the requested path is not in the DAG. Any performance impact associated with checking for the existence of a `_redirects` file or evaluating redirect rules will only be incurred for non-existent paths. |
| 93 | + |
| 94 | +# Error handling |
| 95 | + |
| 96 | +If there are any errors reading or parsing the `_redirects` file, the error codes will be returned with an HTTP 500 status code. |
0 commit comments