update slug for “notes” #75
Description
Runbook: Implementing Collections for "Posts" and "Notes" in Eleventy (11ty)
Goal:
- Organize content into
postsandnotescollections. - Set default permalinks for each collection.
- Ensure both collections reside in a
collections/directory.
1. Directory Structure
Ensure your project has the following directory structure:
.
├── collections/
│ ├── posts/
│ │ ├── example-post.md
│ ├── notes/
│ ├── example-note.md
└── .eleventy.js
2. Content Example
Example Post (collections/posts/example-post.md):
---
title: "Example Post"
date: 2026-02-03
layout: post.njk
---
This is an example post content.Example Note (collections/notes/example-note.md):
---
title: "Quick Note"
date: 2026-02-03
layout: note.njk
---
This is an example note content.3. Modify .eleventy.js
Update your Eleventy configuration to define collections and default permalinks.
module.exports = function(eleventyConfig) {
// Add collections for posts and notes
eleventyConfig.addCollection("posts", function(collectionApi) {
return collectionApi.getFilteredByGlob("./collections/posts/*.md");
});
eleventyConfig.addCollection("notes", function(collectionApi) {
return collectionApi.getFilteredByGlob("./collections/notes/*.md");
});
// Set default global permalinks
return {
dir: {
input: ".",
output: "_site"
},
// Set permalinks dynamically for posts and notes
eleventyComputed: {
permalink: function(data) {
if (data.page.inputPath.includes("collections/posts")) {
return `/posts/${data.page.fileSlug}/`;
}
if (data.page.inputPath.includes("collections/notes")) {
return `/notes/${data.page.fileSlug}/`;
}
return data.page.filePathStem + "/";
}
}
};
};4. Verify Layouts
Ensure the layouts for posts and notes are defined in the layouts/ folder (e.g., layouts/post.njk and layouts/note.njk).
Layout for Posts (example: layouts/post.njk):
<!DOCTYPE html>
<html lang="en">
<head>
<title>{{ title }}</title>
</head>
<body>
<article>
<h1>{{ title }}</h1>
<p>{{ content | safe }}</p>
</article>
</body>
</html>Layout for Notes (example: layouts/note.njk):
<!DOCTYPE html>
<html lang="en">
<head>
<title>{{ title }}</title>
</head>
<body>
<aside>
<h1>{{ title }}</h1>
<p>{{ content | safe }}</p>
</aside>
</body>
</html>5. Test Locally
-
Run locally to confirm changes work as expected:
npm start
-
Verify the URLs for posts (
/posts/example-post/) and notes (/notes/example-note/).
6. Deployment
-
Commit changes:
git add . git commit -m "Set up posts and notes collections with custom permalinks" git push origin main
-
Deploy your site to the desired environment (manual or CI-based deployment).
7. Optional Enhancements
-
Index Pages:
- Create
/posts/and/notes/index pages to list all content in each collection.
- Create
-
Styling:
- Customize the styles for posts and notes in
src/css/and ensure they are part of your build process.
- Customize the styles for posts and notes in
-
SEO:
- Add meta information for better search engine optimization.