Unlock the Power of Dynamic Content with Eleventy Serverless
What is Eleventy?
Eleventy is a revolutionary static site generator that uses various templating languages to assemble finished HTML webpages. It cycles through all the files in your project, gathering data from different template languages like markdown, Nunjucks, Liquid, Haml, JavaScript, and more. During build time, Eleventy uses these templating languages to generate an output folder with *.html files, resulting in a static HTML website that boasts outstanding performance.
The Limitation of Static Content
However, this approach comes with a significant drawback: it’s not suitable for dynamic content and user input. That’s where Eleventy Serverless comes in – a game-changing plugin that enables you to manage dynamically generated data in Eleventy using serverless functions.
What is Eleventy Serverless?
Eleventy Serverless is a plugin that works hand in hand with your static site, running one or more template files at the point of HTTP requests to generate dynamic pages. It unlocks a wide range of new use cases, allowing you to move beyond static webpages and into dynamically generated content.
Getting Started with Eleventy Serverless
To get started, you’ll need to install the latest version of Eleventy and Netlify Functions. Then, create a .eleventy.js file in your root folder to configure Eleventy Serverless.
Configuring Eleventy Serverless
In your .eleventy.js file, import the EleventyServerlessBundlerPlugin and set the config for your serverless plugin using eleventyConfig.addPlugin. You can add the name of your serverless function and the Netlify Function directory that’ll handle your serverless function.
Creating Dynamic Content with Eleventy Serverless
Let’s demonstrate how to make requests or add business logic to display dynamic content on your site. We’ll use the Rick and Morty API to display all characters named Rick who are still alive on the show.
Filters and Netlify Functions
Create a filter in your .eleventy.js file that takes in a name parameter and sends a request to the Rick and Morty API. Then, create a Netlify Function that can either be dynamic or cached. By default, it’ll be a dynamic serverless function that runs on every load. With cache, you can use Netlify On-demand Build to improve performance and cache its results.
Eleventy Components
Create a new folder called _includes and add a base.njk file. Then, create an index.njk file that imports into the _includes/base.njk file. This index.njk file will contain your homepage, which is what the user sees once they open the site.
Putting it all Together
Create a rick.html file in the root folder and set the permalink of this page to be the same as the name of your serverless plugin. Then, trigger the rickList filter in your config file by providing the name argument. The response is assigned to results, which you can then loop through and display the names.
Start Building Dynamic Content Today!
With Eleventy Serverless, you can unlock the full potential of dynamic content and take your website to the next level. Get started today and discover the endless possibilities of serverless functions!