Using Agility CMS and Eleventy for simple JAMStack tasks
Tags: headlesscms, jamstack, webdev
Published: 2020-02-26 21:24:56

Sometimes you just want to get some dynamic content into some static HTML files.

If you have a static, hardcoded website that's already built, you don't need to completely rebuild it in order to get dynamic content into it from a Headless CMS.

<img src="https://www.11ty.dev/img/logo.png" alt="Eleventy" width="100" />

[Eleventy](https://www.11ty.dev) is a great tool to do this work - even if you only need to work on one file at a time.

Here's a single page example of using Agility CMS to inject some dynamic content into an HTML page.

The first thing you should do is sign up for a free [Agility CMS account](https://account.agilitycms.com/sign-up?product=agility-free).  Choose the blog template.
The signup screen looks like this:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/yhgixf9lofog0o8uxgh9.png)

Once you get signed up, you'll see a getting started screen that gives you access to your API Keys.  Keep that handy.

Now we'll get started with some code.

##Setup

From the command line, create a folder to work in, something like this:
```
mkdir agility-eleventy
cd agility-eleventy
```

Now, init the project
```
npm init -y
```

Add the Eleventy package
```
npm install --save-dev @11ty/eleventy
```

Install the Agility Content API package
```
npm install --save-dev @agility/content-fetch
```

### HTML Template File
Let's assume we were starting with a basic template file that listed some posts.

This template loops through our posts and outputs some links with a title.

You can see at the top that there's a "permalink" - this is a trick we use so that Eleventy will output this file as posts.html instead of posts/index.html.  If you want to remove the extension, you can remove the permalink.

**posts.html**

```html
---
permalink: "posts.html"
---
<!doctype html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<title>Test Page</title>
</head>

<body>

	<ul>
		{% for post in posts %}
		<li><a href="/posts/{{ post.contentID }}">{{ post.fields.title }}</a></li>
		{% endfor %}
	</ul>
</body>

</html>
```

Now let's look at how we can get the data from Agility CMS into this template.

### Getting Data

Eleventy has specific rules about data cascades, but the simplest way to say "this data goes into this page" is to create a file called posts.11tydata.js (we just add 11tydata.js to the html filename).

Now we've got a JavaScript file that we can work with.  Eleventy allows us to return json data from here, or a Promise object.  

Let's use the Agility API to grab the posts list from your new Blog instance. You can replace the guid and the api key from your Agility instance.

**posts.11tydata.js**

```javascript
const agility = require('@agility/content-fetch')

async function getAgilityContent() {

	const languageCode = "en-us";

	const agilityAPI = agility.getApi({
		//your 'guid' from Agility CMS
		guid: "",
		//your 'apiKey' from Agility CMS
		apiKey: "",
		//whether we are in preview mode or not
		isPreview: true,
	});

	const postsRet = await agilityAPI.getContentList({
		referenceName: "posts",
		languageCode: languageCode
	})

	console.log("posts")
	return {
		posts: postsRet.items
	}
}

// export for 11ty
module.exports = getAgilityContent;
```

## Generate the Output

Now we're ready to rock! 

Let's let Eleventy do its thing.

This command tells Eleventy to render the posts.html file and to place the output in the build folder.

```shell
eleventy --input posts.html --output build
```

My terminal output looked like this:
```terminal
Writing build/posts.html from ./posts.html.
Benchmark (Data): `./posts.11tydata.js` took 234ms (46.0%)
Wrote 1 file in 0.30 seconds (v0.10.0)
```


The actual HTML file should look be in the build folder, and should something like this:
```html
<!doctype html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<title>Test Page</title>
</head>

<body>

	<ul>
		
		<li><a href="/posts/24">Why You as a Developer Should be Using a CMS</a></li>
		
		<li><a href="/posts/25">Why You Should Choose a Headless CMS</a></li>
		
		<li><a href="/posts/26">5 Signs That It’s Time to Change Your CMS</a></li>
		
		<li><a href="/posts/15">How this site works</a></li>
		
		<li><a href="/posts/16">How to handle SEO with a JS app </a></li>
		
	</ul>
</body>

</html>
```

## Next steps

This is just a simple example - you can Eleventy and Agility CMS for so much more!

[Reach out to the Agility CMS team](https://agilitycms.com/contact-us) to hook you up with more info on how to get moving on JAMStack today.