How to add Netlify CMS to an existing Eleventy project

NetlifyCMSEleventy11tytutorialJamstack

I started coding again recently and I've been working on this site.

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

Netlify CMS is an open-source, git-based content management system.

It's super easy to install, let me show you how 👩🏻‍💻

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:
[build]
  publish = "_site"
  command = "npm run build"
  1. In src/admin create an index.html file with the following content:
<!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>
  1. 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:
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"

# 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: 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}
  1. Then in the layout file where you have your base layout with the<head> and <body></body> , add the Netlify Identity Widget script down below the ``, before the </body> where your other script files might already be:
    (Mine is in src/_includes/base.njk)
<body>
    
  
  
  <!-- Netlify Identity Widget -->
  
  
</body>
  1. In your .eleventy.js file add the following to the config module:
module.exports = function (eleventyConfig) {
  eleventyConfig.addPassthroughCopy("./src/admin");
}

  1. Congrats! Now you're done adding stuff to your project to configure it. Now 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.

  2. 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 respository. 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.

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

Happy Coding! 👋