gcg/static-cms
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[documentation] improve NextJS docs by adding Identity Widget to homepage (#2915)

Browse Source 
* update NextJS docs

* change /static dir to /public/static

* remove redundant React import

* change static directory to /public for Next in add-to-your-site.md
This commit is contained in:
JP Lew
2019-11-26 14:06:29 -08:00
committed by Tom Rutgers
parent 41bb9aac0d
commit a2df4f4c91
2 changed files with 32 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
website/content/docs/add-to-your-site.md
View File

@ -15,7 +15,8 @@ A static `admin` folder contains all Netlify CMS files, stored at the root of yo
| These generators ... | store static files in | | These generators ... | store static files in |
| ---------------------------------- | --------------------- | | ---------------------------------- | --------------------- |
| Jekyll, GitBook | `/` (project root) | | Jekyll, GitBook | `/` (project root) |
| Hugo, Gatsby, Nuxt, Next, Gridsome, Zola | `/static` | | Hugo, Gatsby, Nuxt, Gridsome, Zola | `/static` |
| Next | `/public` |
| Hexo, Middleman, Jigsaw | `/source` | | Hexo, Middleman, Jigsaw | `/source` |
| Spike | `/views` | | Spike | `/views` |
| Wyam | `/input` | | Wyam | `/input` |

53
website/content/docs/nextjs.md
View File

@ -31,8 +31,8 @@ touch pages/index.js
mkdir content mkdir content
touch content/home.md touch content/home.md
#Create a folder for static assets # Create a folder for static assets
mkdir static mkdir public
``` ```
@ -62,7 +62,7 @@ cats:
name: Maru (まる) name: Maru (まる)
- description: Lil Bub is an American celebrity cat known for her unique appearance. - description: Lil Bub is an American celebrity cat known for her unique appearance.
name: Lil Bub name: Lil Bub
- description: 'Grumpy cat is an American celebrity cat known for her grumpy appearance. ' - description: 'Grumpy cat is an American celebrity cat known for her grumpy appearance.'
name: Grumpy cat (Tardar Sauce) name: Grumpy cat (Tardar Sauce)
--- ---
Welcome to my awesome page about cats of the internet. Welcome to my awesome page about cats of the internet.
@ -90,25 +90,31 @@ module.exports = {
Almost there! The last thing we need to do is to add some content our ```pages/index.js``` file. With a little help of our webpack loader, we can now easilly import Markdown files: Almost there! The last thing we need to do is to add some content our ```pages/index.js``` file. With a little help of our webpack loader, we can now easilly import Markdown files:
```js ```js
import React, { Component } from 'react' import Head from "next/head"
import { Component } from 'react'
import content from '../content/home.md'; import content from '../content/home.md';
export default class Home extends Component { export default class Home extends Component {
render() { render() {
let { html , attributes:{ title, cats } } = content; let { html , attributes:{ title, cats } } = content;
return ( return (
<article> <>
<Head>
<script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
</Head>
<article>
<h1>{title}</h1> <h1>{title}</h1>
<div dangerouslySetInnerHTML={{ __html: html }}/> <div dangerouslySetInnerHTML={{ __html: html }} />
<ul> <ul>
{ cats.map((cat, k) => ( {cats.map((cat, k) => (
<li key={k}> <li key={k}>
<h2>{cat.name}</h2> <h2>{cat.name}</h2>
<p>{cat.description}</p> <p>{cat.description}</p>
</li> </li>
))} ))}
</ul> </ul>
</article> </article>
</>
) )
} }
} }
@ -122,19 +128,19 @@ npm run dev
## Adding Netlify CMS ## Adding Netlify CMS
There are many different ways to add Netlify CMS to your project. The easiest is probably just to embed it from a CDN, and that's exactly what we're gonna do. To avoid making this guide too complicated, we're just going to add Netlify into a subfolder inside the ```/static``` directory (which is just served as static files by Next): There are many different ways to add Netlify CMS to your project. The easiest is probably just to embed it from a CDN, and that's exactly what we're gonna do. To avoid making this guide too complicated, we're just going to add Netlify into a subfolder inside the ```/public``` directory (which is just served as static files by Next):
```bash ```bash
# Create and navigate into static/admin folder # Create and navigate into static/admin folder
mkdir static/admin mkdir public/admin
cd static/admin cd public/admin
# Create index.html and config.yml file # Create index.html and config.yml file
touch index.html touch index.html
touch config.yml touch config.yml
``` ```
Paste HTML for Netlify CMS into your ``static/admin/index.html`` file (check out the [Add Netlify To Your Site](https://www.netlifycms.org/docs/add-to-your-site/) section for more information) Paste HTML for Netlify CMS into your ``public/admin/index.html`` file (check out the [Add Netlify To Your Site](https://www.netlifycms.org/docs/add-to-your-site/) section for more information)
```html ```html
<!doctype html> <!doctype html>
@ -147,19 +153,20 @@ Paste HTML for Netlify CMS into your ``static/admin/index.html`` file (check out
</head> </head>
<body> <body>
<!-- Include the script that builds the page and powers Netlify CMS --> <!-- Include the script that builds the page and powers Netlify CMS -->
<script src="https://unpkg.com/netlify-cms@^2.0.0/dist/netlify-cms.js"></script> <script src="https://unpkg.com/netlify-cms@2.9.7/dist/netlify-cms.js"></script>
</body> </body>
</html> </html>
``` ```
Notice that we also added the identity widget. This allows sign up when the project is hosted at Netlify. Notice that we also added the identity widget. This allows sign up when the project is hosted at Netlify.
Paste the following configuration into your```static/admin/config.yml``` file: Paste the following configuration into your ```public/admin/config.yml``` file:
```yaml ```yaml
backend: backend:
name: git-gateway name: git-gateway
branch: master branch: master
media_folder: static/img media_folder: public/img
public_folder: img
collections: collections:
- name: "pages" - name: "pages"
label: "Pages" label: "Pages"
@ -179,10 +186,10 @@ collections:
- { label: "Description", name: "description", widget: "text"} - { label: "Description", name: "description", widget: "text"}
``` ```
Awesome! Netlify CMS should now be available at ```localhost:3000/static/admin/index.html```. Awesome! Netlify CMS should now be available at ```localhost:3000/admin/index.html```.
Unfortunately we can't edit our content just yet. First we need to move our code into a git repository, and create a new Netlify site. Unfortunately we can't edit our content just yet. First we need to move our code into a git repository, and create a new Netlify site.
**Tip:** If you want to test changes made to your config.yml file locally, swap out "git-gateway" with "test-repo" and navigate to ```localhost:3000/static/admin/index.html``` to view Netlify CMS locally (you can't make changes or read actual content from Git this way, but it's great to verify how things will look). **Tip:** If you want to test changes made to your config.yml file locally, swap out "git-gateway" with "test-repo" and navigate to ```localhost:3000/admin/index.html``` to view Netlify CMS locally (you can't make changes or read actual content from Git this way, but it's great to verify how things will look).
## Publishing to GitHub and Netlify ## Publishing to GitHub and Netlify
@ -221,7 +228,7 @@ Netlify's Identity and Git Gateway services allow you to manage CMS admin users
### Celebrate! ### Celebrate!
Great job - you did it! Great job - you did it!
Open your new page via the new Netlify URL, and navigate to ```/static/admin```. If you did everything correct in the previous step, you should now be able to sign up for an account, and log in. Open your new page via the new Netlify URL, and navigate to ```/admin```. If you did everything correct in the previous step, you should now be able to sign up for an account, and log in.
**Tip:** Signing up with an external provider is the easiest. If you want to sign up by email, you'll have to set up a redirect in your index.js page (which we won't be covering in this guide). For more information, have a look at the [Add To Your Site](https://www.netlifycms.org/docs/add-to-your-site) section. **Tip:** Signing up with an external provider is the easiest. If you want to sign up by email, you'll have to set up a redirect in your index.js page (which we won't be covering in this guide). For more information, have a look at the [Add To Your Site](https://www.netlifycms.org/docs/add-to-your-site) section.