From b571215363e9826e89fdf9a275714ffda9454f04 Mon Sep 17 00:00:00 2001 From: Jessica Parsons Date: Thu, 7 Dec 2017 09:56:44 -0800 Subject: [PATCH] Rework Test Drive and Quick Start --- .../{quick-start.md => add-to-your-site.md} | 14 +++++-- .../content/docs/start-with-a-template.md | 42 +++++++++++++++++++ website/site/content/docs/test-drive.md | 33 --------------- website/site/static/_redirects | 2 + 4 files changed, 55 insertions(+), 36 deletions(-) rename website/site/content/docs/{quick-start.md => add-to-your-site.md} (96%) create mode 100644 website/site/content/docs/start-with-a-template.md delete mode 100644 website/site/content/docs/test-drive.md diff --git a/website/site/content/docs/quick-start.md b/website/site/content/docs/add-to-your-site.md similarity index 96% rename from website/site/content/docs/quick-start.md rename to website/site/content/docs/add-to-your-site.md index 613c84386400..a1818151c04b 100755 --- a/website/site/content/docs/quick-start.md +++ b/website/site/content/docs/add-to-your-site.md @@ -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! diff --git a/website/site/content/docs/start-with-a-template.md b/website/site/content/docs/start-with-a-template.md new file mode 100644 index 000000000000..c5fb8870d48a --- /dev/null +++ b/website/site/content/docs/start-with-a-template.md @@ -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. + +
+
+

Hugo Site Starter

+

Deploy to Netlify

+
+
+

Gatsby Site Starter

+

Deploy to Netlify

+
+
+ +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`. + + ![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 `/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). diff --git a/website/site/content/docs/test-drive.md b/website/site/content/docs/test-drive.md deleted file mode 100644 index 4e697e342c82..000000000000 --- a/website/site/content/docs/test-drive.md +++ /dev/null @@ -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: - -[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](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`. - - ![Sample email subject line: You've been invited to join radiologist-amanda-53841.netlify.com](/img/email-subject.png?raw=true) - -4. Click the link to accept the invite, and you’ll be directed to your new site, with a prompt to create a password. - - !["Complete your signup" modal on the Kaldi coffee site](/img/create-password.png?raw=true) - -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). \ No newline at end of file diff --git a/website/site/static/_redirects b/website/site/static/_redirects index a16c79230666..681381cfb0bd 100644 --- a/website/site/static/_redirects +++ b/website/site/static/_redirects @@ -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