This is my website.
``` No magic. No extras. Just your content. [Check out this example on GitHub.](https://github.com/jlengstorf/11ty-examples/tree/master/02-no-runtime) ## Frontmatter is available to layouts Want to control the title tag from your Markdown files? Add frontmatter! ``` ---layout: layout.liquidtitle: Hello frontmatter!---This is my website. ``` In `layout.liquid`, we can reference the title anywhere using `{% raw %}{{ title }}{% endraw %}`: ```This is my website.
``` [Check out this example on GitHub.](https://github.com/jlengstorf/11ty-examples/tree/master/03-frontmatter) ## Add global data with the `_data` directory If you have data that should be available on every page, create a `_data` directory and add a JSON file — for example, `_data/site.json`: ``` { "title": "My Great 11ty Site"} ``` We can now access our global data using the file name and the property. For example, in our `layout.liquid`: ```My first post!
``` [Check out this example on GitHub.](https://github.com/jlengstorf/11ty-examples/tree/master/05-override-data) ## Want to group posts in 11ty like a blog? Just add tags! To group content in 11ty, add a tag — 11ty will make it available in other pages! Create a folder called `blog` and include a `blog` tag in the frontmatter of each post: ``` ---layout: layout.liquidtitle: Blog Onetags: blog---My first post! ``` Then loop through the blog “collection” in your home page: ``` ---layout: layout.liquidtitle: Hello frontmatter!---Welcome to my site! ## Latest blog posts {% for blog in collections.blog %} - [{% raw %}{{blog.data.title}}{% endraw %}]({% raw %}{{blog.url}}{% endraw %}) {% endfor %} ``` [Check out this example on GitHub.](https://github.com/jlengstorf/11ty-examples/tree/master/06-group-by-tags) ## Add shared data for all files in a given directory To avoid retyping a bunch of frontmatter for each post, we can create a JSON file with the same name as a directory to add data to _all_ posts in that directory. In our `blog` directory, create `blog.json`: ``` { "layout": "layout.liquid", "tags": "blog"} ``` Now our post frontmatter can be simplified: ``` ---title: Blog One---My first post! ``` The layout and tags still apply! [Check out this example on GitHub.](https://github.com/jlengstorf/11ty-examples/tree/master/07-directory-data) ## Pagination is baked in If you want to paginate posts, 11ty has it built into collections. Update `index.md`: ``` ---layout: layout.liquidtitle: Hello frontmatter!pagination: data: collections.blog size: 2 alias: blogs---Welcome to my site! ## Latest blog posts {% for blog in blogs %} - [{% raw %}{{blog.data.title}}{% endraw %}]({% raw %}{{blog.url}}{% endraw %}) {% endfor %} {% if pagination.href.previous %} Previous Page{% endif %}{% if pagination.href.next %} Next Page{% endif %} ``` Now the home page has two posts and a “Next Page” link that leads to a new page with the more posts. [Check out this example on GitHub.](https://github.com/jlengstorf/11ty-examples/tree/master/08-pagination) ## Creating pages from third party data is a snap We can make third-party API calls as part of setting global data! Create `_data/characters.js` and add: ``` // don’t forget to `npm install axios`!const axios = require('axios'); module.exports = async () => { const result = await axios.get('https://rickandmortyapi.com/api/character/'); return result.data.results;}; ``` Next, create a new file called `character.md` and add the following: ``` ---pagination: data: characters alias: character size: 1layout: layout.liquidpermalink: '/characters/{% raw %}{{character.name|slug}}{% endraw %}/'title: Rick & Morty Characters--- ## {% raw %}{{character.name}}{% endraw %}  ``` Setting the `pagination.size` to 1 means we create a page for each result! [Check out this example on GitHub.](https://github.com/jlengstorf/11ty-examples/tree/master/09-third-party-data) ## 11ty can do more This isn’t everything 11ty is capable of. In addition to the features we covered here, 11ty also has data filters, plugins, shortcodes, and advanced configuration options to customize it to your needs. You can see everything 11ty is capable of [in the 11ty docs](https://www.11ty.dev/docs/)! ### Share - [X (fka Twitter)](https://twitter.com/intent/tweet?text=Let’s Learn Eleventy! Boost your Jamstack skills with 11ty&url=https://www.netlify.com/blog/2020/04/09/lets-learn-eleventy-boost-your-jamstack-skills-with-11ty//) - [LinkedIn](https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fwww.netlify.com%2Fblog%2F2020%2F04%2F09%2Flets-learn-eleventy-boost-your-jamstack-skills-with-11ty%2F%2F) - [Facebook](https://www.facebook.com/sharer.php?u=https://www.netlify.com/blog/2020/04/09/lets-learn-eleventy-boost-your-jamstack-skills-with-11ty//) - [Bluesky](https://bsky.app/intent/compose?text=Let’s Learn Eleventy! Boost your Jamstack skills with 11ty+https://www.netlify.com/blog/2020/04/09/lets-learn-eleventy-boost-your-jamstack-skills-with-11ty//) * * * ### Tags - [Eleventy](/blog/tags/Eleventy/) - [SSG](/blog/tags/ssg/) ## Keep reading  Tools & Services July 3, 2018 [ ### Deploy a free Gatsby, Hugo, or Eleventy website template in 30 seconds ](/blog/2018/07/03/deploy-a-free-gatsby-hugo-or-eleventy-website-template-in-30-seconds/) -  Phil Hawksworth  Guides & Tutorials June 25, 2020 [ ### Gatsby 101: Features, Benefits, and Trade-Offs ](/blog/2020/06/25/gatsby-101-features-benefits-and-trade-offs/) -  Jason Lengstorf ## Recent posts News & Announcements June 25, 2026 [ ### Netlify Functions, designed for Agent Experience ](/blog/netlify-functions-designed-for-agent-experience) -  Eduardo Bouças News & Announcements June 24, 2026 [ ### How we measure Netlify’s Agent Experience ](/blog/how-we-measure-netlify-agent-experience) -  Sean Roberts Guides & Tutorials May 15, 2026 [ ### How to build a real-time AI chatbot in minutes with Netlify Agent Runners (no backend) ](/blog/how-to-build-a-real-time-ai-chatbot-in-minutes-with-netlify-agent-runners-no-backend) -  Nahrin Jalal  ### How do the best dev and marketing teams work together? [Access the report](https://www.netlify.com/reports/2024-leadership-trend-report/access/)