Headless CMS for Jekyll

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

Step #1 - Set up your Hygraph GraphQL endpoint in Jekyll config file

To query a GraphQL endpoint in Jekyll you will need to install jeql a GraphQL plugin for Jekyll. After that add the gem 'jeql' to your Gemfile and the plugin in the sites config file. After that set up Hygraph endpoint in your Jekyll config.

# _config.yml

plugins:
  - jeql

# set up your endpoint

jeql:
  hygraph:
    url: "YOUR_HYGRAPH_ENDPOINT"
    header:
      Authorization: "HYGRAPH_AUTH_TOKEN"

Step #2 - Set up your GraphQL query

GraphQL queries are json files in Jekyll and they would be in the _graphql directory.

/_graphql/products.json

{
    "query" : "
           query Products {
              products {
                  slug
                  name
                  description
                  price
                  image {
                      url
                  }
             }
        }"
}

Step #3 - Use content from Hygraph in Liquid

Now, you can use the data you retrieve from the headless CMS within the template files in your Jekyll project by opening the `graphql` block tag with the following parameters:

endpoint - in this case hygraph
query - in this case products which is the name of the json file in which your GraphQL query was saved

<div>
{% graphql endpoint: "hygraph", query: "products" %}
  {% for product in data["viewer"]["products"] %}
    <a href={{product["slug"]}}>
      <img src={{product["image"]["url"]}}>
      <h3>{{product["name"]}}>
      <p>{{product["price"]}}>
      <p>{{product["description"]}}>
    </a>
  {% endfor %}
{% endgraphql %}
</div>

Start building with Jekyll

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

Quickstart

We made it really easy to set up your project in Hygraph and use our GraphQL API within your Jekyll 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 Jekyll project

When selecting a headless CMS for an Jekyll 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 Jekyll website while simplifying content management. With a headless CMS offering native GraphQL, you empower your Jekyll 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