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 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 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 insrc/_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, 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 repository. 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 aCreate
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 yourlocalhost
. 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! 👋
Top comments (1)
Thanks for sharing. Eleventy is pretty cool!