Skip to content

Commit 4de8848

Browse files
LekoArtsLekoArts
authored
chore: Update README (#218)
1 parent a3b95f7 commit 4de8848

File tree

1 file changed

+48
-36
lines changed

1 file changed

+48
-36
lines changed

‎README.md

Lines changed: 48 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -16,34 +16,41 @@ if you want to use SSR or DSG rendering.
1616

1717
## Install
1818

19-
`npm install gatsby-plugin-netlify`
19+
```shell
20+
npm install gatsby-plugin-netlify
21+
```
2022

2123
## How to use
2224

23-
```javascript
24-
// In your gatsby-config.js
25-
plugins: [`gatsby-plugin-netlify`]
25+
Add `gatsby-plugin-netlify` to your `gatsby-config`:
26+
27+
```js:title=gatsby-config.js
28+
module.exports = {
29+
plugins: [`gatsby-plugin-netlify`]
30+
}
2631
```
2732

2833
## Configuration
2934

3035
If you just need the critical assets, you don't need to add any additional config. However, if you want to add headers,
31-
remove default headers, or transform the given headers, you can use the following configuration options.
32-
33-
```javascript
34-
plugins: [
35-
{
36-
resolve: `gatsby-plugin-netlify`,
37-
options: {
38-
headers: {}, // option to add more headers. `Link` headers are transformed by the below criteria
39-
allPageHeaders: [], // option to add headers for all pages. `Link` headers are transformed by the below criteria
40-
mergeSecurityHeaders: true, // boolean to turn off the default security headers
41-
mergeCachingHeaders: true, // boolean to turn off the default caching headers
42-
transformHeaders: (headers, path) => headers, // optional transform for manipulating headers under each path (e.g.sorting), etc.
43-
generateMatchPathRewrites: true, // boolean to turn off automatic creation of redirect rules for client only paths
36+
remove default headers, or transform the given headers, you can use the following configuration options:
37+
38+
```js:title=gatsby-config.js
39+
module.exports = {
40+
plugins: [
41+
{
42+
resolve: `gatsby-plugin-netlify`,
43+
options: {
44+
headers: {}, // option to add more headers. `Link` headers are transformed by the below criteria
45+
allPageHeaders: [], // option to add headers for all pages. `Link` headers are transformed by the below criteria
46+
mergeSecurityHeaders: true, // boolean to turn off the default security headers
47+
mergeCachingHeaders: true, // boolean to turn off the default caching headers
48+
transformHeaders: (headers, path) => headers, // optional transform for manipulating headers under each path (e.g.sorting), etc.
49+
generateMatchPathRewrites: true, // boolean to turn off automatic creation of redirect rules for client only paths
50+
},
4451
},
45-
},
46-
]
52+
]
53+
}
4754
```
4855

4956
### Headers
@@ -101,25 +108,30 @@ You can validate the `_headers` config through the [Netlify playground app](http
101108

102109
### Redirects
103110

104-
You can create redirects using the [`createRedirect`](https://www.gatsbyjs.org/docs/actions/#createRedirect) action.
111+
You can create redirects using the
112+
[`createRedirect`](https://www.gatsbyjs.com/docs/reference/config-files/actions/#createRedirect) action.
105113

106114
In addition to the options provided by the Gatsby API, you can pass these options specific to this plugin:
107115

108-
| Attribute | Description |
109-
| ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
110-
| `force` | Overrides existing content in the path. This is particularly useful for domain alias redirects. See [the Netlify documentation for this option](https://www.netlify.com/docs/redirects/#structured-configuration). |
111-
| `statusCode` | Overrides the HTTP status code which is set to `302` by default or `301` when [`isPermanent`](https://www.gatsbyjs.org/docs/actions/#createRedirect) is `true`. Since Netlify supports custom status codes, you can set one here. For example, `200` for rewrites, or `404` for a custom error page. See [the Netlify documentation for this option](https://www.netlify.com/docs/redirects/#http-status-codes). |
116+
| Attribute | Description |
117+
| ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
118+
| `force` | Overrides existing content in the path. This is particularly useful for domain alias redirects. See [the Netlify documentation for this option](https://www.netlify.com/docs/redirects/#structured-configuration). |
119+
| `statusCode` | Overrides the HTTP status code which is set to `302` by default or `301` when [`isPermanent`](https://www.gatsbyjs.com/docs/reference/config-files/actions/#createRedirect) is `true`. Since Netlify supports custom status codes, you can set one here. For example, `200` for rewrites, or `404` for a custom error page. See [the Netlify documentation for this option](https://www.netlify.com/docs/redirects/#http-status-codes). |
112120

113121
An example:
114122

115-
```javascript
116-
createRedirect({ fromPath: '/old-url', toPath: '/new-url', isPermanent: true })
117-
createRedirect({ fromPath: '/url', toPath: '/zn-CH/url', Language: 'zn' })
118-
createRedirect({
119-
fromPath: '/url_that_is/not_pretty',
120-
toPath: '/pretty/url',
121-
statusCode: 200,
122-
})
123+
```js:title=gatsby-node.js
124+
exports.createPages = ({ actions }) => {
125+
const { createRedirect } = actions
126+
127+
createRedirect({ fromPath: '/old-url', toPath: '/new-url', isPermanent: true })
128+
createRedirect({ fromPath: '/url', toPath: '/zn-CH/url', Language: 'zn' })
129+
createRedirect({
130+
fromPath: '/url_that_is/not_pretty',
131+
toPath: '/pretty/url',
132+
statusCode: 200,
133+
})
134+
}
123135
```
124136

125137
You can also create a `_redirects` file in the `static` folder for the same effect. Any programmatically created
@@ -134,10 +146,10 @@ redirects will be appended to the file.
134146
You can validate the `_redirects` config through the [Netlify playground app](https://play.netlify.com/redirects).
135147

136148
Redirect rules are automatically added for
137-
[client only paths](https://www.gatsbyjs.org/docs/client-only-routes-and-user-authentication). The plugin uses the
138-
[matchPath](https://www.gatsbyjs.org/docs/gatsby-internals-terminology/#matchpath) syntax to match all possible requests
139-
in the range of your client-side routes and serves the HTML file for the client-side route. Without it, only the exact
140-
route of the client-side route works.
149+
[client only paths](https://www.gatsbyjs.com/docs/how-to/routing/client-only-routes-and-user-authentication/). The
150+
plugin uses the [matchPath](https://www.gatsbyjs.com/docs/gatsby-internals-terminology/#matchpath) syntax to match all
151+
possible requests in the range of your client-side routes and serves the HTML file for the client-side route. Without
152+
it, only the exact route of the client-side route works.
141153

142154
If those rules are conflicting with custom rules or if you want to have more control over them you can disable them in
143155
[configuration](#configuration) by setting `generateMatchPathRewrites` to `false`.

0 commit comments

Comments
 (0)