# Getting Started with Jekyll
✋ CAUTION
This third-party integration guide might not be up-to-date with Strapi v4. Contributions (opens new window) are most welcome.
This integration guide is following the Quick Start Guide. We assume that you have fully completed its "Hands-on" path, and therefore can consume the API by browsing this url (opens new window).
If you haven't gone through the Quick Start Guide, the way you request a Strapi API with Jekyll (opens new window) remains the same except that you will not fetch the same content.
# Create a Jekyll app
Be sure to have Jekyll installed (opens new window) on your computer.
jekyll new jekyll-app
# Configure Jekyll
Jekyll is a Static Site Generator (opens new window) and will fetch your content from Strapi at build time. You need to configure Jekyll to communicate with your Strapi application.
- Add
jekyll-strapi
to yourGemfile
group :jekyll_plugins do
gem "jekyll-feed", "~> 0.12"
gem "jekyll-strapi"
end
- Add
jekyll-strapi
to your plugins in_config.yml
.
plugins:
- jekyll-feed
- jekyll-strapi
- Add the configuration of Strapi at the end of the
_config.yml
.
strapi:
# Your API endpoint (optional, default to http://localhost:1337)
endpoint: http://localhost:1337
collections:
restaurants:
type: restaurants
categories:
type: categories
- Run
bundle install
to install your gems.
bundle install
# GET Request your collection type
Execute a GET
request on the restaurant
collection type in order to fetch all your restaurants.
Be sure that you activated the find
permission for the restaurant
collection type.
# Example
./_layouts/home.html
---
layout: default
---
<div class="home">
<h1 class="page-heading">Restaurants</h1>
{%- if strapi.collections.restaurants.size > 0 -%}
<ul>
{%- for restaurant in strapi.collections.restaurants -%}
<li>
{{ restaurant.name }}
</li>
{%- endfor -%}
</ul>
{%- endif -%}
</div>
Execute a GET
request on the category
collection type in order to fetch a specific category with all the associated restaurants.
Be sure that you activated the findOne
permission for the category
collection type.
# Example
./layouts/index.html
---
layout: default
---
<div class="home">
{%- if strapi.collections.categories[0].restaurants.size > 0 -%}
<h1 class="page-heading">{{ strapi.collections.categories[0].name }}</h1>
<ul>
{%- for restaurant in strapi.collections.categories[0].restaurants -%}
<li>
{{ restaurant.name }}
</li>
{%- endfor -%}
</ul>
{%- endif -%}
</div>
Run your application with:
bundle exec jekyll serve
We can generate pages for each category.
- Tell Jekyll to generate a page for each category by updating the
_config.yml
file with the following:
strapi:
# Your API endpoint (optional, default to http://localhost:1337)
endpoint: http://localhost:1337
# Collections, key is used to access in the strapi.collections
# template variable
collections:
# Example for a "posts" collection
restaurants:
# Collection name (optional). Used to construct the url requested. Example: type `foo` would generate the following url `http://localhost:1337/foo`.
type: restaurants
categories:
# Collection name (optional). Used to construct the url requested. Example: type `foo` would generate the following url `http://localhost:1337/foo`.
type: categories
permalink: categories/:name
layout: category.html
# Generate output files or not (default: false)
output: true
- Create a
_layouts/category.html
file that will display the content of each one of your category:
<h1>{{ page.document.name }}</h1>
<ul>
{%- for restaurant in page.document.restaurants -%}
<li>
{{ restaurant.name }}
</li>
{%- endfor -%}
</ul>
After building your application, you'll be able to see a category
folder in your _site
folder.
You can find your restaurant categories by browsing http://localhost:4000/category/<name-of-category>
.
Feel free to do the same for your restaurants!
# Conclusion
Here is how to request your collection types in Strapi using Jekyll. Learn more about Jekyll with their official documentation (opens new window).