How to add Netlify CMS to an existing Eleventy project

Hanna Taylor — Sat, 03 Apr 2021 19:01:02 +0000

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 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 🎵.

In the root directory of your Eleventy project, create a netlify.toml file with the following content:

[build]
  publish = "_site"
  command = "npm run build"

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>

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"

# 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}

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)

<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>

In your .eleventy.js file add a .addPassthroughCopy to the config module like this:

module.exports = function (eleventyConfig) {
  eleventyConfig.addPassthroughCopy("./src/admin");
}

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.
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.
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! 👋

DEV Community: Hanna Taylor

How to add Netlify CMS to an existing Eleventy project