Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Rework Test Drive and Quick Start #888

Merged
merged 1 commit into from
Dec 7, 2017
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -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
Expand Down Expand Up @@ -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:

Expand Down Expand Up @@ -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.
Expand Down Expand Up @@ -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!
Expand Down
42 changes: 42 additions & 0 deletions website/site/content/docs/start-with-a-template.md
Original file line number Diff line number Diff line change
@@ -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&amp;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&amp;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 `[email protected]`.

![Sample email subject line: You've been invited to join radiologist-amanda-53841.netlify.com](/img/email-subject.png?raw=true)

2. Click the link to accept the invite, and you’ll be directed to your site, with a prompt to create a password.

!["Complete your signup" modal on the Kaldi coffee site](/img/create-password.png?raw=true)

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).
33 changes: 0 additions & 33 deletions website/site/content/docs/test-drive.md

This file was deleted.

2 changes: 2 additions & 0 deletions website/site/static/_redirects
Original file line number Diff line number Diff line change
Expand Up @@ -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