{"id":23380651,"url":"https://github.com/agility/agilitycms-eleventy-starter-2020","last_synced_at":"2026-03-11T00:33:04.062Z","repository":{"id":53756402,"uuid":"311524356","full_name":"agility/agilitycms-eleventy-starter-2020","owner":"agility","description":"A sample Eleventy starter that uses Agility CMS and aims to be a foundation for building fully static sites using 11ty and Agility CMS.","archived":false,"fork":false,"pushed_at":"2021-04-12T18:35:20.000Z","size":1172,"stargazers_count":18,"open_issues_count":0,"forks_count":1,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-03-24T19:39:49.614Z","etag":null,"topics":["11ty","11ty-template","headless-cms","jamstack"],"latest_commit_sha":null,"homepage":"https://agility-eleventy-starter-2020.netlify.app/","language":"Nunjucks","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/agility.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-11-10T02:36:41.000Z","updated_at":"2024-03-31T13:05:50.000Z","dependencies_parsed_at":"2022-09-15T12:40:54.152Z","dependency_job_id":null,"html_url":"https://github.com/agility/agilitycms-eleventy-starter-2020","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agility%2Fagilitycms-eleventy-starter-2020","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agility%2Fagilitycms-eleventy-starter-2020/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agility%2Fagilitycms-eleventy-starter-2020/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agility%2Fagilitycms-eleventy-starter-2020/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/agility","download_url":"https://codeload.github.com/agility/agilitycms-eleventy-starter-2020/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248312190,"owners_count":21082637,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["11ty","11ty-template","headless-cms","jamstack"],"created_at":"2024-12-21T20:17:30.450Z","updated_at":"2026-03-11T00:32:59.034Z","avatar_url":"https://github.com/agility.png","language":"Nunjucks","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Eleventy + Agility CMS\nThis is a sample Eleventy starter site that uses Agility CMS and aims to be a foundation for building fully static sites using 11ty and Agility CMS.\n\n## Getting Started\nThis is going to be fun!  Let's go!\n\n### Agility CMS Account\nThe first thing you need is a free Agility CMS account. [You can get that here 👋](https://manager.agilitycms.com/org/subscriptions/instance-setup?template=jamstack-blog\u0026plan=agility-free).\nOnce you create your Agility CMS account and ✨new✨ project name, come back here 🧐.\n\n### Clone the Repo\n\nNow that you've got the **content**, *you need the `code`!*\n\nGo ahead and clone the repo from github: 👇\n```shell\nhttps://github.com/agility/agilitycms-eleventy-starter-2020.git\n```\n\n### Install Dependencies\n\n`npm install` or `yarn install`\n\nNormally, this will create 9,999,999,999 files in your `node_modules` folder.  Luckily, we're only gonna create 9,999,999 for this small demo.\n\n YAY! 👏👏👏\n\n\n### Environment Variables\nYou care about the environment don't you? 🌲🌳🌴🎋\n\nEither way, you're gonna need to grab a few variables from your Agility CMS account.  Head over to the [API Keys page](https://manager.agilitycms.com/settings/apikeys) in Agility CMS (https://manager.agilitycms.com/settings/apikeys) and grab your GUID, and API Keys for Preview and Fetch.\n\n🗄🗄🗄 Copy those into your `.env` file (rename it from `.env.example`)\n\n### Take Command of the `cmd` line\n\nWe've hooked up some neat commands to make your life easy.\n\n#### 🔥 Local 🔥 Development 🔥\nIf you want to run the project **locally in preview mode**, with a  hot-reloading server, do this:\n\n`npm start` or `yarn start`\n\n### Build It and They Will Browse\nThis is the entire reason for being for 11ty.\n\n#### Preview Mode\n`npm run dev` or `yarn dev`\n\n#### Live or Production Mode\n`npm run build` or `yarn build`\n\n### Wipe The Content 🧽\nThis example is using the Agility CMS Sync SDK.  That content is cached in the node_modules folder. If you want to clear all that out, use this.\n\n`npm run cms-clear` or `yarn run cms-clear`\n\n The next time you run the project, the content will be pulled down again.\n\n## How this thing works 🤓\n\nThis projects uses nunjucks templates, and all the magic happens in the `pages` folder.\nOpen that thing up and take a peek.\n\n### Pages Pages Pages\nAgility CMS has the concept of **pages** and a **sitemap**.  Those obejects are made available in the `_data/pages.js` data array.\n\nEach page is rendered via the `index.njk` file, which just splits each page object into its own, er... page :).  It also sets the `permalink` property to the path of the page object.  Voila! Our Agility CMS pages are magically routed and rendered.\n\n### Layout -\u003e Template -\u003e Modules\nNow let's take a look at how the templating works.\n\nEach page uses the `layout.njk` template for the main html output.\n\nThen, based on the `agilitypage.templateFileName` property, we load a `.njk` template file dynamically.  In this case we only have the `main-template.njk` file.\n\nIn that template, we set the zoneName parameter and render the modules in the `MainContentZone` zone.\n\nEach module zone has one or more modules in there, which are in turn rendered by a `.njk` file.  I've put them in the `/modules` folder, and we've only got a few that are configured in this Agility CMS instance.\n\nHopefully, you can use the examples in this project to create your own modules.\n\nA well-thought-out project with useful modules can empower your content editors with a set of building blocks for creating and updates the pages of your website.\n\n### Collections\nThis project is a blog template, so we have set of pages that are rendered based on the `Posts` list.  Most of that is configured as a Dynamic Page in Agility CMS, so you don't have to do much to implement it, but you'll notice on the `modules/postdetails.njk` file that we use a property called `agilitypage.dynamicPageItem`.  That object represents the Blog Post that we are currently rendering.\n\n## CSS + JavaScript\n\n### Tailwind CSS\nTo keep things super simple, this project makes use of free and amazing [TailwindUI](https://tailwindui.com/components) components, and it's all used via a dead simple https://cdn.jsdelivr.net/npm/@tailwindcss/ui@latest/dist/tailwind-ui.min.css file referenced in the header.  No post-css or anything, at least not yet.\n\n### Alpine.js\nWe've pulled in a global reference to Alpine.js in the layout template, too.\nIt's being used in a couple places to hide/show the mobile menu and the preview bar.\n\n## Want to learn more?\nAmazing that you've gotten this far!  Keep learning with me ([Joel Varty](https://twitter.com/joelvarty)) or the rest of the Agility CMS team.\n\n[Join us on Slack](https://join.slack.com/t/agilitycommunity/shared_invite/enQtNzI2NDc3MzU4Njc2LWI2OTNjZTI3ZGY1NWRiNTYzNmEyNmI0MGZlZTRkYzI3NmRjNzkxYmI5YTZjNTg2ZTk4NGUzNjg5NzY3OWViZGI) to answer questions and provide feedback directly to the team.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fagility%2Fagilitycms-eleventy-starter-2020","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fagility%2Fagilitycms-eleventy-starter-2020","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fagility%2Fagilitycms-eleventy-starter-2020/lists"}