How to add Netlify CMS to an existing Eleventy project
NetlifyCMSEleventy11tytutorialJamstackI 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🎵
- In the
root
directory of your Eleventy project, create anetlify.toml
file with the following content:
[build]
publish = "_site"
command = "npm run build"
- In
src/admin
create anindex.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 aconfig.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}
- 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 insrc/_includes/base.njk
)
<body>
<!-- Netlify Identity Widget -->
</body>
- In your
.eleventy.js
file add the following to the config module:
module.exports = function (eleventyConfig) {
eleventyConfig.addPassthroughCopy("./src/admin");
}
-
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, runnpx netlify-cms-proxy-server
. It might say something is deprecated, so you'll have to stop it and then runnpm update
before running it again. -
Navigate to
localhost:PORT/admin
in your browser (mine islocalhost: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 insrc/admin/config.yml.
If you addedcreate: 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! 👋
- Previous: This is my fifth post