Integrate Jekyll with Strapi

These integration guides are not official documentation and the Strapi Support Team will not provide assistance with them.

What Is Jekyll?

Jekyll works as your website's production line; it takes raw ingredients (your Markdown content), processes them through templates, and delivers a fully baked static website. This differs from traditional content management systems that generate pages dynamically with each visit.

The Jekyll documentation explains that Jekyll sites are just HTML, CSS, and JavaScript files—no database, comment moderation, or security updates are needed. This simple approach offers major advantages:

• Lightning-fast performance: Pre-rendered HTML files load instantly.
• Superior security: No database vulnerabilities or PHP exploits to worry about.
• Minimal hosting requirements: Simple files can be served from almost anywhere.
• Version control friendly: Your entire site can be managed with Git.

Developers appreciate Jekyll for its straightforward approach and flexibility. It powers GitHub Pages and countless developer blogs, documentation sites, and portfolios where speed, security, and simplicity matter most.

Why Integrate Jekyll with Strapi

While Jekyll excels at generating fast static sites, it lacks user-friendly content management for non-technical users. This is where Strapi, an open-source headless CMS, comes in. Strapi provides a friendly admin interface for content creation, perfectly complementing Jekyll's static site generation.

Integrating Jekyll with Strapi offers:

• Separation of content and presentation: Keep content management and site design independent.
• Better editorial workflows: Streamline content creation with an intuitive interface.
• Static site speed with dynamic content: Benefit from fast, SEO-friendly static sites while managing dynamic content.

Strapi brings key features to Jekyll:

• Customizable content types
• Flexible API endpoints (REST and GraphQL)
• Robust user role management.

Strapi’s continuous updates and new features make this pairing even more powerful. Together, they create a fast, secure, and scalable Jamstack solution with straightforward content management.

Performance and Scalability Benefits

Integrating Strapi with Jekyll delivers outstanding performance:

• Lightning-fast load times: Jekyll’s static HTML pages load much faster than dynamic sites.
• Global content delivery: Distribute static sites via CDNs for minimal latency.
• Reduced server workload: Static sites reduce server load and resource usage.
• Massive traffic handling: CDNs ensure scalability during traffic surges.
• Enhanced security: The decoupled architecture reduces attack surfaces, increasing site security.

How to Integrate Jekyll with Strapi

Combining Strapi with Jekyll gives you powerful content management paired with efficient static site generation. Let's walk through how to get them working together.

Setting Up Strapi

1. Initialize a new Strapi project:

npx create-strapi-app my-project --quickstart

2. Access the admin panel:
   Once Strapi is running (typically at http://localhost:1337), access the admin panel to create your content types. For example, you might create an "Article" content type with fields like title, body, and author.
3. Add sample content:
   Add some sample content to your newly created content types.
4. Configure public permissions:
   • In the Strapi admin dashboard, navigate to Settings > Roles > Public.
   • Enable "find" and "findOne" permissions for the collections you want Jekyll to access.

Installing and Configuring Jekyll

1. Set up a new Jekyll project (if you haven't already):

gem install jekyll bundler
jekyll new my-blog
cd my-blog

2. Add the jekyll-strapi plugin to your Gemfile:

group :jekyll_plugins do
  gem "jekyll-feed", "~> 0.12"
  gem "jekyll-strapi"
end

3. Run bundle install to install the new dependencies.
4. Configure Jekyll to use Strapi by adding the following to your _config.yml:

plugins:
  - jekyll-feed
  - jekyll-strapi

strapi:
  endpoint: http://localhost:1337/api
  collections:
    articles:
      type: articles

Fetching and Rendering Content

With the integration complete, Jekyll can now fetch content from Strapi at build time. Here's how to use this content in your templates:

1. Create or modify a layout to display your Strapi content. For example, in

_layouts/post.html:liquidlayout: defaulttitle: "{{ page.title }}"-{{ page.content }}

2. Create a page to list all articles. In articles.html in your root directory:

_layouts/post.html:
```liquid
layout: default
title: "{{ page.title }}"
-
{{ page.content }}

4. Create a page to list all articles. In articles.html in your root directory:

```liquid
layout: default
title: "Articles"
{% for article in strapi.articles %}
[{{ article.title }}]({{ article.url }})
{% endfor %}

3. Build your Jekyll site:

bundle exec jekyll build

Remember that content changes in Strapi won't automatically update your Jekyll site. To automate this process and publish content with Strapi efficiently, consider setting up a webhook in Strapi to trigger a rebuild of your Jekyll site (e.g., on Netlify or GitHub Pages) whenever content changes.

Project Example: Integrating Jekyll with Strapi (with GitHub Project Repo)

Let's look at a real example showing how integrating Jekyll with Strapi works in action: a simple blog that brings these tools together.

The Simple Jekyll blog powered by Strapi repository shows a complete blog implementation using both technologies. It's organized into two clear parts:

1. The backend uses Strapi's blog template.
2. The frontend is built with Jekyll and the Strapi plugin.

This setup keeps content management and presentation separate; writers focus on writing while developers handle the technical implementation.

Key Features of the Example Project

1. Automatic Setup: The repository includes scripts that start a Strapi server and import sample data automatically, so you can get started quickly.
2. Content Management: Strapi provides editors with an intuitive interface to create and manage blog posts.
3. Static Site Generation: Jekyll retrieves content from Strapi's API during build time, creating static HTML files that deliver excellent performance.
4. Plugin Integration: The project demonstrates how the jekyll-strapi plugin connects these two systems seamlessly.

Implementation Process

The repo guides you through the implementation step by step:

1. Add the jekyll-strapi plugin to your Gemfile and Jekyll configuration:

plugins:
  - jekyll-feed
  - jekyll-strapi

2. Configure the Strapi endpoint and collections in Jekyll's _config.yml:

strapi:
  endpoint: http://localhost:1337/api
  collections:
    articles:
      type: articles

3. Set up the backend by creating a Strapi project using the provided template:

npx create-strapi-app backend --template https://github.com/strapi/strapi-template-blog

4. Implement frontend using Jekyll:

cd frontend
bundle install
bundle exec jekyll serve

Practical Applications

This example shows how you can use this combination to build:

1. Content-Driven Websites: Editors manage content through Strapi while Jekyll generates a high-performance site.
2. Blogs and News Sites: Streamlined content management plus fast-loading pages.
3. Documentation Sites: Structured content from Strapi with Jekyll's excellent technical content display.

Exploring this project will help you learn how to build modern websites that provide both flexible content management and the performance benefits of static sites.

Strapi Open Office Hours

If you have any questions about Strapi 5 or just would like to stop by and say hi, you can join us at Strapi's Discord Open Office Hours, Monday through Friday, from 12:30 pm to 1:30 pm CST: Strapi Discord Open Office Hours.

For more details, visit the Strapi documentation and the Jekyll documentation.