Getting Started with Eleventy and Agility CMS

Follow

  Note

This guide is meant for developers. Want to learn why Agility CMS and Eleventy work so well together?

Eleventy paired with Agility CMS is a stack that delivers remarkable Developer Experience (DX), enables lightning-fast User Experiences (UX), and allows for best-in-class Editor Experience (EX). This tutorial is aimed to help you get started with Eleventy and Agility CMS using a starter site.

Here is what we'll cover:

  1. Develop Components, not Websites
  2. Create a Free Agility CMS Account
  3. Get The Code and Set Up your Environment

Develop Components, not Websites

When building a site with Eleventy and Agility, we always recommend developers start by taking a look at our agilitycms-eleventy-starter, rather than starting from a blank slate. It showcases features such as our native Page Management and shows how you should structure your Eleventy website. Our Eleventy and Agility starter serves as an example based on our recommended best-practices.

Editors have fine-grain control with the ability to manage all aspects of their page. They're able to control what pages are on their website, and what is on each page. This means you can focus on building UI Components (i.e. Page Modules and Page Templates) that editors will use/reuse to compose their pages.

What's in a Page?

Page in Agility CMS has the following structure:

  • SEO Fields - title, url slug, description, keywords
  • Page Template - the layout of the page, which defines Content Zones
    • Content Zones {} - the areas where editors can add/manage Modules
      • Page Modules []- self-contained functional UI components representing what is on a page

All of your pages will be dynamically composed at build time, and incrementally updated as content changes.

Your entire website's look and feel will be dictated by the Page Templates and Page Modules you have available to your editors.

Page Templates and Modules

These will correspond to NJK Templates (Nunjuck, which can be changed to a templating language of your choice) components in your source code and will automatically be rendered for you.

Sign up for the Blog Template Instance

In order to source content from Agility CMS, you'll need an account and access to an instance. When getting started with Agility CMS and Gatsby, we recommend using our Blog Template to get you comfortable and to view an example based on best practices.

How to sign up for the Blog Template

Get The Code and Set Up your Environment

Once your Next.js Starter Blog template instance is up and running, you'll want to get the Eleventy code for it and configure it to connect to your Agility CMS Instance.

Setting up your Development Environment

How it Works

Your Eleventy site is configured and structured in a specific way to help you take full advantage of both Agility CMS and Eleventy development. 

How Pages Work

How Page Modules Work

How Page Templates Work

Deploying your Eleventy Site

Eleventy is a simple Static Site Generator that's written in JavaScript so you can take advantage npm and all it has to offer. Eleventy compiles the files it finds in your working directory into static HTML files, which can then be deployed to a super-fast Edge CDN.

Deploying your Eleventy Site

 

1 out of 1 found this helpful

Comments

0 comments

Please sign in to leave a comment.