Headless CMS for Eleventy (11ty)

Hygraph is the ideal Headless CMS for 11ty websites and applications. Read further to learn how our API-first CMS allows you to add components to your Eleventy apps in minutes and enable your website's content to be managed from a powerful CMS.

Step #1 - Set up the GraphQL endpoint and the query in your 11ty project

Your whole setup to query the content from the headless CMS will be stored as a .js file under the _data folder.

Within the function you'll set up the endpoint and the GraphQL Client for which you'll use graphql-request.

src/_data /graphql.js

module.exports = async () => {
  const { GraphQLClient, gql } = require('graphql-request');
  const client = new GraphQLClient(
    'https://api-eu-central-1.hygraph.com/v2/ck8sn5tnf01gc01z89dbc7s0o/master'
  );

  const query = gql`
    query Products {
      products {
        slug
        name
        description
        price
        image {
          url
        }
      }
    }
  `;

  const { products } = await client.request(query);

  return products;
};

Step #2 - Set up your base file

Given that 11ty uses Nunjucks as a templating language, you will have to set up the scafolding in your base file base.njk.

Setting up the base Nunjucks file in Eleventy is a fundamental step in creating a consistent layout for your static site. The base Nunjucks file serves as a template for your entire site's structure. In this file, you define the common HTML structure, including the head section, navigation menus, and footer, which will be shared across multiple pages.

src/_includes /base.njk

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>{{ title }}</title>
  </head>
  <body>
    <h1>{{ title }}</h1>

    {{ content | safe }}
  </body>
</html>

Step #3 - Use content from Hygraph in the markdown files

Now, you can use the data you retrieve from the headless CMS within the markdown files in your 11ty project.

Use the data fetched from the GraphQL endpoint to generate Markdown files dynamically. You can create a custom Eleventy plugin or use a JavaScript function within your build process to write Markdown files with the GraphQL data. For example, loop through the data and create Markdown files for each item.

src/index.md

---
title: Hygraph with Eleventy
layout: base.njk
---

## Products

<ul>
  {%- for product in collections.products -%}
    <li>
      <a href="{{ product.url }}">
        <h2>{{ product.data.name }}</h2>
        <p>{{ product.data.description }}</p>
      </a>
    </li>
  {%- endfor -%}
</ul>

Start building with 11ty

We made it really easy to set up your project in Hygraph and use our GraphQL API within your 11ty project.

Quickstart

We made it really easy to set up your project in Hygraph and use our GraphQL API within your 11ty project.

Get Started

Learn GraphQL

Hygraph is GraphQL-native Headless CMS offers precise data retrieval, minimizing over-fetching and optimizing efficiency.

Read the Guide

Examples

Look at some of the example projects to see Hygraph in action.

See Examples

Why Hygraph

Choosing Hygraph for your 11ty project

When selecting a headless CMS for an Eleventy project, opting for one with native GraphQL capabilities is the smart choice. Native GraphQL support streamlines the content retrieval, reducing unnecessary complexity and ensuring you only fetch the data you need.

This efficiency ensures you don't increase the build time of your 11ty website while simplifying content management. With a headless CMS offering native GraphQL, you empower your 11ty project with a flexible and agile content layer, making it an ideal match for modern web development needs.

Developer Experience

We try to be the most un-opinionated CMS on the market with a wide collection of open source example projects to get you started.

Headless CMS

As a headless CMS (i.e. API based content management), you can be as modular and flexible as you need. We even support multiplatform content management.

Management API

Hygraph boasts a flexible and powerful management API to manage your content and schema, as well as a blazing fast content API.

Get started for free, or request a demo to discuss larger projects

Contact sales Get started