Эта статья представляет собой обновленную версию эта почта.


Итак, я думаю, вы слышали о Headless CMS?

Если вы не знакомы с концепцией — есть удобная страница в Википедии https://en.wikipedia.org/wiki/Headless_content_management_system. Чтобы прочитать о генераторах статических сайтов, я рекомендую статью Cloudflare: https://www.cloudflare.com/en-gb/learning/performance/static-site-generator/.

В этой статье я собираюсь описать, как использовать Jekyll в качестве генератора статических сайтов, используя Strapi версии 4 в качестве серверной части Headless CMS.
Требования

Для выполнения упражнений, описанных в этой статье, вам понадобится следующее:


Простой сайт-портфолио

В этом примере мы создаем очень простую страницу портфолио фотографа, где пользователи могут загрузить фотографию с названием и простым описанием.
Конфигурация Strapi — настройка CMS


Конфигурация Страпи

Создайте новый проект Strapi:

npx create-strapi-app@latest my-project-photo --quickstart
Войти в полноэкранный режим

Выйти из полноэкранного режима

И затем, чтобы начать проект:

cd my-project-photo
npm run develop
Войти в полноэкранный режим

Выйти из полноэкранного режима

Или, если вы используете пряжу:

yarn create-strapi-app@latest my-project-photo --quickstart
cd my-project-photo
yarn run develop
Войти в полноэкранный режим

Выйти из полноэкранного режима

Теперь у вас должен быть доступный экземпляр Strapi: /.


Конфигурация Strapi — настройка коллекции

Перейдите к Content-Type Build в вашем экземпляре администратора. а затем создайте коллекцию, как показано ниже:

Создать коллекцию

Для создания полей выберите:

Текстовое поле для Заголовка, тип Краткий текст:

Текстовое поле заголовка

Поле Media с именем Image, тип Single media:

Медиа-поле Одно медиа

Текстовое поле с именем Комментарий, введите Длинный текст:

Длинный текст комментария

Наконец, у вас должно получиться что-то похожее на:

Результаты типа контента

Теперь перейдите в Content Manager и добавьте свой первый объект в базу данных:

Создать запись


Генерация токена авторизации

Перейти к: и создайте новый токен:

Генерация токена авторизации

После создания — сохраните токен в сторону — он понадобится вам позже. Рекомендуется какой-нибудь менеджер паролей.


Конфигурация Джекила

В вашем проекте Jekyll добавьте в Gemfile:

gem “jekyll-strapi-4”, “~> 1.0.11”
Войти в полноэкранный режим

Выйти из полноэкранного режима

и установить пакет:

bundle install
Войти в полноэкранный режим

Выйти из полноэкранного режима

Конфигурация проекта Jekyll

Создать новый проект Джекилл

jekyll new portfolio-site
cd portfolio-site
Войти в полноэкранный режим

Выйти из полноэкранного режима

Добавьте jekyll-strapi-4 в плагины в _config.yml:

plugins:
  - jekyll-feed
  - jekyll-strapi-4
Войти в полноэкранный режим

Выйти из полноэкранного режима

и следующее в конце _config.yml:

strapi:
    # Your API endpoint (optional, default to 
    endpoint: 
    # Collections, key is used to access in the strapi.collections
    # template variable
    collections:
        # Example for a "Photo" collection
        photos:
            # Collection name (optional)
            # type: photos
            # Permalink used to generate the output files (eg. /articles/:id).
            permalink: /photos/:id/
            # Layout file for this collection
            layout: photo.html
            # Generate output files or not (default: false)
            output: true
Войти в полноэкранный режим

Выйти из полноэкранного режима

Устанавливаем плагин:

bundle install
Войти в полноэкранный режим

Выйти из полноэкранного режима

Затем в каталоге _layouts создайте два файла home.html:

---
layout: default
---

<div class="home">
  <h1 class="page-heading">Photos</h1>
  {%- if strapi.collections.photos.size > 0 -%}
  <ul>
    {%- for photo in strapi.collections.photos -%}
    <li>
      <a href=" photo.url }}">{{ photo.strapi_attributes.Titlle }}</a>
    </li>
    {%- endfor -%}
  </ul>
  {%- endif -%}
</div>
Войти в полноэкранный режим

Выйти из полноэкранного режима

и фото.html:

---
layout: default
---

<div class="home">
  <h1 class="page-heading">{{ page.strapi_attributes.TestDescription }}</h1>
  <h2>{{ page.document.strapi_attributes.Title }}</h2>
  <p>{{ page.document.strapi_attributes.Comment }}</p>
  <img src=" page.document.strapi_attributes.Image.data.attributes.formats.thumbnail" asset_url }}"/>
</div>
Войти в полноэкранный режим

Выйти из полноэкранного режима

Теперь вы должны установить переменную среды с токеном авторизации (здесь вам нужно использовать ранее сохраненный токен):

export STRAPI_TOKEN=328438953489534...345423053895
Войти в полноэкранный режим

Выйти из полноэкранного режима

и теперь вы можете создать свою страницу:

bundle exec jekyll build --trace
Войти в полноэкранный режим

Выйти из полноэкранного режима

И после этого вы можете проверить свой сайт:

cd _site
python3 -m http.server
Войти в полноэкранный режим

Выйти из полноэкранного режима

и открытие в вашем браузере.


Развернутый пример — демо

Здесь вы можете увидеть страницу из предыдущего примера, развернутую на страницах GitHub:

Он использует следующий репозиторий GitHub: