Rework Test Drive and Quick Start (#888)
This commit is contained in:
Jessica Parsons
GitHub
parent
4ec45eb465
commit
a59f00cfaf
@ -1,14 +1,17 @@
|
||||
---
|
||||
title: Quick Start
|
||||
title: Add to Your Site
|
||||
position: 20
|
||||
---
|
||||
|
||||
# Quick Start
|
||||
# Add Netlify CMS to Your Site
|
||||
|
||||
Netlify CMS is adaptable to a wide variety of projects. The only inflexible requirement is that your site content must be written in markdown, JSON, YAML, or TOML files, stored in a repo on [GitHub](https://github.com/). (If you're partial to another Git hosting service, check out the PRs in progress for [GitLab](https://github.com/netlify/netlify-cms/pull/517) and [Bitbucket](https://github.com/netlify/netlify-cms/pull/525) support.)
|
||||
|
||||
In this guide, we're going to assume you're using a [static site generator](https://www.staticgen.com/), like Jekyll, Hugo, Hexo, or Gatsby.
|
||||
This tutorial will guide you through the steps for adding Netlify CMS to a site that's built with a common [static site generator](https://www.staticgen.com/), like Jekyll, Hugo, Hexo, or Gatsby. Alternatively, you can [start from a template](https://www.netlifycms.org/docs/start-with-a-template) or dive right into to [configuration options](https://www.netlifycms.org/docs/configuration-options).
|
||||
|
||||
|
||||
## App File Structure
|
||||
|
||||
All Netlify CMS files are contained in a static `admin` folder, stored at the root of your published site. Where you store this folder in the source files depends on your static site generator. Here's the the static file location for a few of the most popular static site generators:
|
||||
|
||||
These generators ... | store static files in
|
||||
@ -51,9 +54,12 @@ The first file, `admin/index.html`, is the entry point for the Netlify CMS admin
|
||||
|
||||
The second file, `admin/config.yml`, is the heart of your Netlify CMS installation, and a bit more complex. The next section covers the details.
|
||||
|
||||
|
||||
## Configuration
|
||||
|
||||
Configuration will be different for every site, so we'll break it down into parts. All code snippets in this section will be added to your `admin/config.yml` file.
|
||||
|
||||
|
||||
### Backend
|
||||
Because we're using GitHub and Netlify for our hosting and authentication, backend configuration is fairly strightforward. You can start your `config.yml` file with these lines:
|
||||
|
||||
@ -183,6 +189,7 @@ collections:
|
||||
- {label: "Language", name: "language"}
|
||||
```
|
||||
|
||||
|
||||
## Authentication
|
||||
|
||||
Now that you have your Netlify CMS files in place and configured, all that's left is to enable authentication. There are [many ways to do this](/docs/custom-authentication) (with or without deploying to Netlify), but this example uses Netlify because it's one of the quickest ways to get started.
|
||||
@ -224,6 +231,7 @@ When a user logs in with the Netlify Identity widget, they will be directed to t
|
||||
```
|
||||
Note: This example script requires modern JavaScript and will not work on IE11. For legacy browser support, use function expressions (`function () {}`) in place of the arrow functions (`() => {}`), or use a transpiler like [Babel](https://babeljs.io/).
|
||||
|
||||
|
||||
## Accessing the CMS
|
||||
|
||||
Your site CMS is now fully configured and ready for login!
|
||||
42
website/site/content/docs/start-with-a-template.md
Normal file
42
website/site/content/docs/start-with-a-template.md
Normal file
@ -0,0 +1,42 @@
|
||||
---
|
||||
title: Start with a Template
|
||||
position: 10
|
||||
---
|
||||
|
||||
# Start with a Template
|
||||
|
||||
Netlify CMS can be [added to an existing site](https://www.netlifycms.org/docs/add-to-your-site), but the quickest way to get started is with a template. Our featured templates below deploy to Netlify, giving you a fully working CMS-enabled site with just a few clicks.
|
||||
|
||||
<div style="display: flex; justify-content: space-around; text-align: center;">
|
||||
<div>
|
||||
<h4 id="hugo-site-starter">Hugo Site Starter</h4>
|
||||
<p><a href="https://app.netlify.com/start/deploy?repository=https://github.com/netlify-templates/one-click-hugo-cms&stack=cms"><img src="https://www.netlify.com/img/deploy/button.svg" alt="Deploy to Netlify" /></a></p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 id="gatsby-site-starter">Gatsby Site Starter</h4>
|
||||
<p><a href="https://app.netlify.com/start/deploy?repository=https://github.com/AustinGreen/gatsby-starter-netlify-cms&stack=cms"><img src="https://www.netlify.com/img/deploy/button.svg" alt="Deploy to Netlify" /></a></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
After clicking one of those buttons, you’ll authenticate with GitHub and choose a repository name. Netlify will then automatically create a repository in your GitHub account with a copy of the files from the template. Next, it will build and deploy the new site on Netlify, bringing you to the site dashboard when the build is complete.
|
||||
|
||||
|
||||
## Accessing Netlify CMS on your new site
|
||||
|
||||
1. The template deploy process will send you an invitation to your new site, sent from `no-reply@netlify.com`.
|
||||
|
||||
|
||||
|
||||
2. Click the link to accept the invite, and you’ll be directed to your site, with a prompt to create a password.
|
||||
|
||||
|
||||
|
||||
3. Enter a password, sign in, and you’ll be directed straight to the CMS. (For future visits, you can go straight to `<yoursiteaddress.com>/admin`.)
|
||||
|
||||
Try adding and editing posts, or changing the content of the Products page. When you save, the changes will be pushed immediately to GitHub, triggering a build on Netlify, and updating the content on your site. Check out the configuration code by visiting your site repo.
|
||||
|
||||
## More paths to explore
|
||||
|
||||
- To see how to integrate Netlify CMS into an existing project, go to [Add to your site](https://www.netlifycms.org/docs/add-to-your-site).
|
||||
- Check out other sites using Netlify CMS (or share your own!) on the [Examples](https://www.netlifycms.org/docs/examples/) page.
|
||||
- If you’d like to add more CMS editors or change how they log in to your site, read up on [Netlify Identity service](https://www.netlify.com/docs/identity).
|
||||
@ -1,33 +0,0 @@
|
||||
---
|
||||
title: Test Drive
|
||||
position: 10
|
||||
---
|
||||
|
||||
# Take a test drive
|
||||
|
||||
Netlify CMS can run in any frontend web environment, but the quickest way to try it out is by running it on a pre-configured starter site with Netlify. Our example here is the [Kaldi coffee company template](https://github.com/netlify-templates/one-click-hugo-cms). Use the button below to build and deploy your own copy of the repository:
|
||||
|
||||
[](https://app.netlify.com/start/deploy?repository=https://github.com/netlify-templates/one-click-hugo-cms&stack=cms)
|
||||
|
||||
After clicking that button, you’ll authenticate with GitHub and choose a repository name. Netlify will then automatically create a repository in your GitHub account with a copy of the files from the template. Next, it will build and deploy the new site on Netlify, bringing you to the site dashboard when the build is complete. Next, you’ll need to set up Netlify's [Identity](https://www.netlify.com/docs/identity) service to authorize users to log in to the CMS.
|
||||
|
||||
## Adding users
|
||||
|
||||
1. From the Netlify site dashboard, select the **Identity** tab, and you'll find that there are no users yet. By default, this site is set to accept users by invitation only, and even the site owner needs to be invited.
|
||||
2. Select **Invite users**, enter your email address, and select Send.
|
||||
3. Check your email for the invitation. It will be sent from `no-reply@netlify.com`.
|
||||
|
||||
|
||||
|
||||
4. Click the link to accept the invite, and you’ll be directed to your new site, with a prompt to create a password.
|
||||
|
||||
|
||||
|
||||
5. Enter a password, sign in, and you’ll be directed straight to the CMS!
|
||||
|
||||
Try adding and editing posts, or changing the content of the Products page. When you save, the changes will be pushed immediately to GitHub, triggering a build on Netlify, and updating the content on your site.
|
||||
|
||||
## More paths to explore
|
||||
- If you’d like to learn more about how it all works, check out the [Intro](/docs/intro).
|
||||
- To see how to integrate Netlify CMS into an existing project, go to the [Quick Start](/docs/quick-start).
|
||||
- If you’d like to change how users log in to your site, read up on [Netlify Identity service](https://www.netlify.com/docs/identity).
|
||||
@ -2,3 +2,5 @@
|
||||
/docs/extending /docs/custom-widgets 301
|
||||
/docs/validation /docs/custom-widgets/#advanced-field-validation 301
|
||||
/docs/editorial-workflow /docs/configuration/#publish-mode 301
|
||||
/docs/test-drive /docs/start-with-a-template 301
|
||||
/docs/quick-start /docs/add-to-your-site 301
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user