How to add Netlify CMS to an existing Eleventy project
Tags: netlifycms, eleventy, jamstack, beginners
Published: 2021-04-03 19:01:02

I started coding again recently and I've been working on some personal projects in Eleventy.

I already had a very MVP version of a site running and deployed on Netlify, and decided I wanted to add Netlify CMS so I could easily add new data to my site so I can manage my content in a more automated, WYSIWYG way.

[Netlify CMS](https://www.netlifycms.org/) is an open-source, git-based content management system.

It's super easy to install. Assuming you already have an eleventy project created, 🎵 this is how you do it 🎵.

1. In the `root` directory of your Eleventy project, create a `netlify.toml` file with the following content:
```toml
[build]
  publish = "_site"
  command = "npm run build"
```

2. In `src/admin` create an `index.html` file with the following content:
```html
<!doctype html>
<html>
    <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <title>Content Manager</title>
    </head>
    <body>
        <!-- Include the script that builds the page and powers Netlify CMS -->
        <script src="https://unpkg.com/netlify-cms@^2.0.0/dist/netlify-cms.js"></script>

        <!-- Netlify Identity Widget -->
        <script type="text/javascript" src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
    </body>
</html>
```

3. While you're still in src/admin, add a config.yml file if you don't have one already. Add the following to that file:
```yaml
backend:
  # Settings to use Netlify Identity as backend
  name: git-gateway
  branch: master

# Add the route to your images, so Netlify CMS knows where to save uploads to.
media_folder: "src/static/img"
public_folder: "/static/img"

# You can delete my other comments, but it's helpful to leave the following one here so you don't forget how to run your Netlify CMS.
# If you don't run this command, the CMS will keep giving you errors when you try to login
##
# When you want to use Netlify CMS:
# Run your Eleventy serve commands, (mine is "npm run start")
# In another terminal window, simultaneously run: "npx netlify-cms-proxy-server" for local backend
local_backend: true

# Add your collections. Here's an example of multiple collections: 
collections:
# First Collection
  - label: "Blog" 
    name: "blog"
    folder: "src/blog/posts" # Where the new posts should be saved to
    create: true # This allows you to create new instances in the CMS
    editor:
      preview: false
    fields:
      - { label: "Title", name: "title", widget: "string" }
      - { label: "Description", name: "description", widget: "string" }
      - { label: "Author", name: "author", widget: "string", default: "Hanna" }
      - { label: "Publish Date", name: "date", widget: "datetime" }
      - { label: "Tags", name: "tags", widget: list, default: ["post"] }
      - { label: "Layout", name: "layout", widget: string, default: "post.njk" }
      - { label: "Body", name: "body", widget: "markdown" }
  ## 
  # Visit https://www.netlifycms.org/docs/widgets/ to learn more about what widgets you can use.
  # Widgets are the data type that field will allow and how the CMS UI will be like for that field , like datetime, number, list of options, boolean, image, code, and more. 
  ##
  # Second Collection
  # It seems to work with or without "" 
  - label: Tarot
    name: tarot
    folder: /src/tarot
    create: true
    editor:
      preview: false
    fields:
      - { label: Name, name: name, widget: string }
      - { label: Fortunes, name: fortunes, widget: list }
      - { label: Keywords, name: keywords, widget: list }
      - { label: Meanings, name: meanings, widget: list }
      - { label: Category, name: category, widget: select, options: ["all", "major", "cups", "wands", "swords", "pentacles"]}
      - { label: Image, name: img, widget: string}
```

4. Then in the layout file where you have your base layout with the `<head>` and `<body>{{ content }}</body>`, add the Netlify Identity Widget script down below the `{{ content }}`, before the `</body>` where your other script files might already be:
(Mine is in `src/_includes/base.njk`)
```html
<body>
    
  {{ content | safe }}
  
  <!-- Netlify Identity Widget -->
  {% if path == "home" %}
  <script type="text/javascript" src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
  {% endif %}
  
</body>

```

5. In your `.eleventy.js` file add a `.addPassthroughCopy` to the config module like this:
```javascript
module.exports = function (eleventyConfig) {
  eleventyConfig.addPassthroughCopy("./src/admin");
}
```

6. Almost there! You're finished adding stuff to your project to configure it. Now you can start running your project, my command is `npm run start`. In another terminal window, run `npx netlify-cms-proxy-server`. It might say something is deprecated, so you'll have to stop it and then run `npm update` before running it again.

7. Navigate to `localhost:PORT/admin` in your browser (mine is `localhost:8080/admin`) and you should see a Netlify login screen. Do what you gotta do to login, it should connect to your git repository. Once you're in, if it's configured correctly, you should see the collections you added in `src/admin/config.yml`. If you added `create: true` to your collection, you should see a `Create` button, and all the fields you configured should be there.

8. Once you create a new item in the collection you created, click `Publish`, and you should see it on your `localhost`. When you want to publish it to production, all you have to do is commit your changes to git like normal, and if you're hosting on Netlify, it will automatically start the build and deployment and you will be live in no time.

That's it! I hope this was easy to understand how to install Netlify CMS into your existing Eleventy project.

Happy Coding! 👋