.github
.storybook
__mocks__
cypress
dev-test
functions
img
packages
scripts
website
content
blog
docs
widgets
add-to-your-site.md
architecture.md
azure-backend.md
backends-overview.md
beta-features.md
bitbucket-backend.md
cloudinary.md
collection-types.md
configuration-options.md
contributor-guide.md
custom-widgets.md
customization.md
deploy-preview-links.md
examples.md
external-oauth-clients.md
gatsby.md
git-gateway-backend.md
github-backend.md
gitlab-backend.md
gridsome.md
hugo.md
intro.md
jekyll.md
middleman.md
netlify-large-media.md
nextjs.md
nuxt.md
open-authoring.md
releases.md
site-generator-overview.md
start-with-a-template.md
test-backend.md
uploadcare.md
widgets.md
writing-style-guide.md
pages
.keep
data
src
static
.babelrc
.gitignore
.markdownlint.json
.nvmrc
README.md
gatsby-browser.js
gatsby-config.js
gatsby-node.js
netlify.toml
package.json
site.yml
yarn.lock
.all-contributorsrc
.editorconfig
.eslintrc.js
.gitattributes
.gitignore
.nvmrc
.prettierignore
.prettierrc
.stylelintrc
.vale.ini
CHANGELOG.md
CODE_OF_CONDUCT.md
CONTRIBUTING.md
LICENSE
README.md
babel.config.js
cms.png
commitlint.config.js
cypress.json
jest.config.js
lerna.json
netlify.toml
package.json
renovate.json
setupTestFramework.js
tsconfig.json
yarn.lock
79 lines
5.8 KiB
Markdown
79 lines
5.8 KiB
Markdown
---
|
||
group: Intro
|
||
weight: 2
|
||
title: Start with a Template
|
||
---
|
||
You can add Netlify CMS [to an existing site](/docs/add-to-your-site/), but the quickest way to get started is with a template. Found below, our featured templates deploy a bare-bones site and Netlify CMS to Netlify ([what's the difference, you ask?](../intro/#netlify-cms-vs-netlify)), giving you a fully working CMS-enabled site with just a few clicks.
|
||
|
||
<div style="display: flex; justify-content: left; text-align: center; margin-bottom: 1.5em; flex-wrap: wrap;"stack=cms>
|
||
<div style="flex-basis: 33%">
|
||
<div style="padding: 0 15%; height: 100px; display: flex; justify-content: center;">
|
||
<img style="display: flex" src="/img/hugo.svg"/>
|
||
</div>
|
||
<h4>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 style="flex-basis: 33%">
|
||
<div style="padding: 0 30%; height: 100px; display: flex; justify-content: center;">
|
||
<img style="display: flex" src="/img/gatsby.svg"/>
|
||
</div>
|
||
<h4>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 style="flex-basis: 33%">
|
||
<div style="padding: 0 30%; height: 100px; display: flex; justify-content: center;">
|
||
<img style="display: flex" src="/img/middleman.svg"/>
|
||
</div>
|
||
<h4>Middleman Site Starter</h4>
|
||
<p><a href="https://app.netlify.com/start/deploy?repository=https://github.com/tomrutgers/middleman-starter-netlify-cms&stack=cms"><img src="https://www.netlify.com/img/deploy/button.svg" alt="Deploy to Netlify" /></a></p>
|
||
</div>
|
||
<div style="flex-basis: 33%">
|
||
<div style="padding: 0 30%; height: 100px; display: flex; justify-content: center;">
|
||
<img style="display: flex" src="/img/preact.svg"/>
|
||
</div>
|
||
<h4>Preact CLI</h4>
|
||
<p><a href="https://app.netlify.com/start/deploy?repository=https://github.com/preactjs/preact-netlify&stack=cms"><img src="https://www.netlify.com/img/deploy/button.svg" alt="Deploy to Netlify" /></a></p>
|
||
</div>
|
||
<div style="flex-basis: 33%">
|
||
<div style="padding: 0 30%; height: 100px; display: flex; justify-content: center;">
|
||
<img style="display: flex" src="/img/nextjs.svg"/>
|
||
</div>
|
||
<h4>Next.js Blog Template</h4>
|
||
<p><a href="https://app.netlify.com/start/deploy?repository=https://github.com/wutali/nextjs-netlify-blog-template&stack=cms"><img src="https://www.netlify.com/img/deploy/button.svg" alt="Deploy to Netlify" /></a></p>
|
||
</div>
|
||
<div style="flex-basis: 33%">
|
||
<div style="padding: 0 30%; height: 100px; display: flex; justify-content: center;">
|
||
<a href="https://github.com/surjithctly/neat-starter"> <img style="display: flex" src="/img/11ty-logo.svg"/> </a>
|
||
</div>
|
||
<h4>Eleventy Starter</h4>
|
||
<p><a href="https://app.netlify.com/start/deploy?repository=https://github.com/surjithctly/neat-starter&stack=cms"><img src="https://www.netlify.com/img/deploy/button.svg" alt="Deploy to Netlify" /></a></p>
|
||
</div>
|
||
<div style="flex-basis: 33%">
|
||
<div style="padding: 0 30%; height: 100px; display: flex; justify-content: center;">
|
||
<img style="display: flex" src="/img/nuxt.svg"/>
|
||
</div>
|
||
<h4>Nuxt.js Boilerplate</h4>
|
||
<p><a href="https://app.netlify.com/start/deploy?repository=https://github.com/knogobert/ntn-boilerplate&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, authenticate with GitHub or GitLab and choose a repository name. Netlify then automatically creates a clone of the repository in your GitHub or GitLab account. Next, it builds and deploys the new site on Netlify, bringing you to the site dashboard after completing the build.
|
||
|
||
**Note for Bitbucket users:** Netlify CMS supports Bitbucket repositories, but Bitbucket's permissions won't work with the Deploy to Netlify buttons above. You can still set up a repository manually, or follow the [tutorial](/docs/add-to-your-site) for adding Netlify CMS to an existing site.
|
||
|
||
## Access Netlify CMS on your new site
|
||
|
||
1. The template deploy process sends you an invitation to your new site, sent from `no-reply@netlify.com`.
|
||

|
||
2. Wait for the deployment to complete, then click the link to accept the invite. Your site will open with a prompt to create a password.
|
||

|
||
3. Enter a password, sign in, and you’ll go 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 are pushed immediately to your Git repository, 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](/docs/add-to-your-site/).
|
||
* Check out other sites using Netlify CMS (or share your own!) on the [Examples](/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).
|