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 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:
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
---
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
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.
eleventy --input posts.html --output build
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)
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>
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)