static-cms/website/content/docs/start-with-a-template.mdx

---
group: Intro
title: Start with a Template
weight: 2
---

You can add Static 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 Static CMS to Netlify, giving you a fully working CMS-enabled site with just a few clicks.

<div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0, 1fr))', gap: '24px' }}>
  <div
    style={{
      display: 'flex',
      flexDirection: 'column',
      justifyContent: 'center',
      alignItems: 'center',
      gap: '8px',
    }}
  >
    <div
      style={{
        width: '120px',
        height: '120px',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
      }}
    >
      <img style={{ display: 'flex', height: '100%' }} src="/img/hugo.svg" />
    </div>
    <h5 style={{ margin: 0 }}>Hugo Site Starter</h5>
    <p style={{ margin: 0 }}>
      <a href="https://app.netlify.com/start/deploy?repository=https://github.com/StaticJsCMS/static-cms-hugo-netlify-template&amp;stack=cms">
        <img src="https://www.netlify.com/img/deploy/button.svg" alt="Deploy to Netlify" />
      </a>
    </p>
  </div>
  <div
    style={{
      display: 'flex',
      flexDirection: 'column',
      justifyContent: 'center',
      alignItems: 'center',
      gap: '8px',
    }}
  >
    <div
      style={{
        width: '120px',
        height: '120px',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
      }}
    >
      <img style={{ display: 'flex', height: '100%' }} src="/img/gatsby.svg" />
    </div>
    <h5 style={{ margin: 0 }}>Gatsby Site Starter</h5>
    <p style={{ margin: 0 }}>
      <a href="https://app.netlify.com/start/deploy?repository=https://github.com/StaticJsCMS/static-cms-gatsby-netlify-template&amp;stack=cms">
        <img src="https://www.netlify.com/img/deploy/button.svg" alt="Deploy to Netlify" />
      </a>
    </p>
  </div>
  <div
    style={{
      display: 'flex',
      flexDirection: 'column',
      justifyContent: 'center',
      alignItems: 'center',
      gap: '8px',
    }}
  >
    <div
      style={{
        width: '120px',
        height: '120px',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
      }}
    >
      <img style={{ display: 'flex', height: '100%' }} src="/img/middleman.svg" />
    </div>
    <h5 style={{ margin: 0 }}>Middleman Site Starter</h5>
    <p style={{ margin: 0 }}>
      <a href="https://app.netlify.com/start/deploy?repository=https://github.com/StaticJsCMS/static-cms-middleman-netlify-template&amp;stack=cms">
        <img src="https://www.netlify.com/img/deploy/button.svg" alt="Deploy to Netlify" />
      </a>
    </p>
  </div>
  <div
    style={{
      display: 'flex',
      flexDirection: 'column',
      justifyContent: 'center',
      alignItems: 'center',
      gap: '8px',
    }}
  >
    <div
      style={{
        width: '120px',
        height: '120px',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
      }}
    >
      <img style={{ display: 'flex', height: '100%' }} src="/img/preact.svg" />
    </div>
    <h5 style={{ margin: 0 }}>Preact CLI</h5>
    <p style={{ margin: 0 }}>
      <a href="https://app.netlify.com/start/deploy?repository=https://github.com/StaticJsCMS/static-cms-preact-netlify-template&amp;stack=cms">
        <img src="https://www.netlify.com/img/deploy/button.svg" alt="Deploy to Netlify" />
      </a>
    </p>
  </div>
  <div
    style={{
      display: 'flex',
      flexDirection: 'column',
      justifyContent: 'center',
      alignItems: 'center',
      gap: '8px',
    }}
  >
    <div
      style={{
        width: '120px',
        height: '120px',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
      }}
    >
      <img style={{ display: 'flex', height: '100%' }} src="/img/nextjs.svg" />
    </div>
    <h5 style={{ margin: 0 }}>Next.js Blog Template</h5>
    <p style={{ margin: 0 }}>
      <a href="https://app.netlify.com/start/deploy?repository=https://github.com/StaticJsCMS/static-cms-nextjs-netlify-blog-template&amp;stack=cms">
        <img src="https://www.netlify.com/img/deploy/button.svg" alt="Deploy to Netlify" />
      </a>
    </p>
  </div>
  <div
    style={{
      display: 'flex',
      flexDirection: 'column',
      justifyContent: 'center',
      alignItems: 'center',
      gap: '8px',
    }}
  >
    <div
      style={{
        width: '120px',
        height: '120px',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
      }}
    >
      <img style={{ display: 'flex', height: '100%' }} src="/img/11ty-logo.svg" />
    </div>
    <h5 style={{ margin: 0 }}>Eleventy Starter</h5>
    <p style={{ margin: 0 }}>
      <a href="https://app.netlify.com/start/deploy?repository=https://github.com/StaticJsCMS/static-cms-eleventy-netlify-template&amp;stack=cms">
        <img src="https://www.netlify.com/img/deploy/button.svg" alt="Deploy to Netlify" />
      </a>
    </p>
  </div>
  <div
    style={{
      display: 'flex',
      flexDirection: 'column',
      justifyContent: 'center',
      alignItems: 'center',
      gap: '8px',
    }}
  >
    <div
      style={{
        width: '120px',
        height: '120px',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
      }}
    >
      <img style={{ display: 'flex', height: '100%' }} src="/img/nuxt.svg" />
    </div>
    <h5 style={{ margin: 0 }}>Nuxt.js Boilerplate</h5>
    <p style={{ margin: 0 }}>
      <a href="https://app.netlify.com/start/deploy?repository=https://github.com/StaticJsCMS/static-cms-nuxt-netlify-template&amp;stack=cms">
        <img src="https://www.netlify.com/img/deploy/button.svg" alt="Deploy to Netlify" />
      </a>
    </p>
  </div>
  <div
    style={{
      display: 'flex',
      flexDirection: 'column',
      justifyContent: 'center',
      alignItems: 'center',
      gap: '8px',
    }}
  >
    <div
      style={{
        width: '120px',
        height: '120px',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
      }}
    >
      <img style={{ display: 'flex', height: '100%' }} src="/img/metalsmith.svg" />
    </div>
    <h5 style={{ margin: 0 }}>Metalsmith Starter</h5>
    <p style={{ margin: 0 }}>
      <a href="https://app.netlify.com/start/deploy?repository=https://github.com/StaticJsCMS/static-cms-metalsmith-netlify-template&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, 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:** Static 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 Static CMS to an existing site.

## Access Static CMS

1. The template deploy process sends 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.webp)
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.
   !["Complete your signup" modal on the Kaldi coffee site](/img/create-password.webp)
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 Static CMS into an existing project, go to [Add to your site](/docs/add-to-your-site/).
- Check out other sites using Static 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).