DEV Community

Joel Varty for Agility CMS

Posted on

Using Agility CMS and Eleventy for simple JAMStack tasks

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.

Eleventy

Eleventy 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. Choose the blog template.
The signup screen looks like this:
Alt Text

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
Enter fullscreen mode Exit fullscreen mode

Now, init the project

npm init -y
Enter fullscreen mode Exit fullscreen mode

Add the Eleventy package

npm install --save-dev @11ty/eleventy
Enter fullscreen mode Exit fullscreen mode

Install the Agility Content API package

npm install --save-dev @agility/content-fetch
Enter fullscreen mode Exit fullscreen mode

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

---
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>
Enter fullscreen mode Exit fullscreen mode

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

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;
Enter fullscreen mode Exit fullscreen mode

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.

eleventy --input posts.html --output build
Enter fullscreen mode Exit fullscreen mode

My terminal output looked like this:

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)
Enter fullscreen mode Exit fullscreen mode

The actual HTML file should look be in the build folder, and should something like this:

<!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>
Enter fullscreen mode Exit fullscreen mode

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 to hook you up with more info on how to get moving on JAMStack today.

Top comments (0)