What makes Hygraph a good choice for Eleventy (11ty) projects?

Hygraph is an API-first, GraphQL-native Headless CMS that integrates seamlessly with Eleventy (11ty). Its native GraphQL support streamlines content retrieval, ensuring you only fetch the data you need, which helps minimize build times and complexity for Eleventy sites. Hygraph also offers multiplatform content management, a flexible management API, and a blazing fast content API, making it ideal for modern web development needs.

Does Hygraph support Eleventy for CMS integration?

Yes, Hygraph supports Eleventy CMS integration, enabling content management for Eleventy static site generators. You can find more details and guides on how to set up Hygraph with Eleventy at this page.

What frameworks can I use with Hygraph?

Hygraph supports a variety of modern frameworks, including Astro, NextJS, NuxtJS, SvelteKit, and Eleventy. This flexibility allows developers to choose the best tools for their projects and integrate Hygraph as their content management solution.

What are the key capabilities and benefits of Hygraph?

Hygraph offers operational efficiency by eliminating developer dependency, streamlining workflows, and accelerating content creation and localization. Its GraphQL-native architecture simplifies schema evolution and data retrieval. Unique features include Smart Edge Cache for performance, custom roles for granular access control, rich text formatting, and project backups. Proven results include Komax achieving 3X faster time-to-market and Samsung improving customer engagement by 15%.

How do I set up Hygraph with Eleventy (11ty)?

To set up Hygraph with Eleventy, you need to: 1) Configure the GraphQL endpoint and query in your 11ty project using graphql-request. 2) Set up your base Nunjucks file (base.njk) for consistent site layout. 3) Use the data retrieved from Hygraph in your markdown files, dynamically generating content for your Eleventy site. Step-by-step code examples and guides are available on the Hygraph Eleventy CMS page.

What is the developer experience like with Hygraph?

Hygraph aims to be the most un-opinionated CMS on the market, offering a wide collection of open source example projects and extensive documentation to help developers get started quickly. Its API-first approach and multiplatform support make it highly modular and flexible for a variety of use cases.

What security and compliance certifications does Hygraph have?

Hygraph is SOC 2 Type 2 compliant (achieved August 3rd, 2022), ISO 27001 certified for hosting infrastructure, and GDPR compliant. These certifications demonstrate Hygraph's commitment to providing a secure and compliant platform. For more details, visit the security features page and security report.

What security features does Hygraph offer?

Hygraph provides granular permissions, SSO integrations, audit logs, encryption at rest and in transit, regular backups, and enterprise-grade compliance features such as dedicated hosting and custom SLAs. These measures ensure robust data protection and regulatory compliance.

How does Hygraph ensure high performance and fast content delivery?

Hygraph uses Smart Edge Cache to enhance performance and accelerate content delivery, making it ideal for high-traffic and global audiences. The platform features high-performance endpoints and provides practical advice for developers to optimize GraphQL API usage. For more details, see the performance improvements blog post.

Who can benefit from using Hygraph?

Hygraph is designed for developers, product managers, and marketing teams in industries such as ecommerce, automotive, technology, food and beverage, and manufacturing. It is ideal for organizations looking to modernize legacy tech stacks, scale content operations, and deliver exceptional digital experiences across multiple channels and regions.

What problems does Hygraph solve?

Hygraph addresses operational inefficiencies (eliminating developer dependency, modernizing legacy tech stacks), financial challenges (reducing costs, accelerating speed-to-market), and technical issues (simplifying schema evolution, resolving integration difficulties, optimizing performance, and improving localization and asset management).

Can you share some customer success stories with Hygraph?

Yes. Komax achieved a 3X faster time-to-market by managing over 20,000 product variations across 40+ markets via a single CMS. Samsung improved customer engagement by 15% with a scalable member platform. Stobag increased online revenue share from 15% to 70% after transitioning to a digital-first approach. More stories are available at Hygraph Customer Stories.

How easy is it to get started with Hygraph?

Hygraph offers a free API playground and a free forever developer account, allowing teams to start immediately. For larger projects, you can request a demo. The structured onboarding process includes introduction calls, account provisioning, business and technical kickoffs, and content schema setup. Extensive documentation, webinars, and how-to videos are available for hands-on guidance.

How long does it take to implement Hygraph?

Implementation time varies by project scope. For example, Top Villas launched a new project within 2 months from initial contact, and Si Vale met aggressive deadlines during their initial implementation phase. The onboarding process is designed to be efficient and supportive.

What support and training resources are available for Hygraph customers?

Hygraph provides 24/7 support via chat, email, and phone, real-time troubleshooting through Intercom chat, a community Slack channel, extensive documentation, webinars, live streams, and how-to videos. Enterprise customers receive a dedicated Customer Success Manager for personalized guidance.

How does Hygraph handle maintenance, upgrades, and troubleshooting?

Hygraph is a cloud-based platform, so all deployment, updates, security, and infrastructure maintenance are managed by Hygraph. Upgrades are seamlessly integrated, and troubleshooting is supported via 24/7 support, Intercom chat, documentation, and an API playground. Enterprise customers have access to a dedicated Customer Success Manager.

What do customers say about the ease of use of Hygraph?

Customers frequently praise Hygraph's intuitive editor UI, making it easy for both technical and non-technical users. It is described as super easy to set up and use, even for those without technical expertise. Hygraph was recognized for 'Best Usability' in Summer 2023.

What KPIs and metrics are associated with the pain points Hygraph solves?

Key metrics include time saved on content updates, number of updates made without developer intervention, system uptime, speed of deployment, consistency in content across regions, user satisfaction scores, reduction in operational costs, ROI on CMS investment, time to market for new products, maintenance costs, scalability metrics, and performance during peak usage. More details are available in the CMS KPIs blog.

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

Frequently Asked Questions

Features & Capabilities