Headless CMS — генератор статических сайтов с помощью Strapi 4 и Jekyll

Эта статья является обновленной версией данного поста.

Думаю, вы слышали о 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.
Требования

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

  • Ruby https://www.ruby-lang.org/en/documentation/installation/
  • Jekyll https://jekyllrb.com/docs/installation/
  • NodeJS и npm https://docs.npmjs.com/downloading-and-installing-node-js-and-npm
  • Python3 (но вы можете использовать любой другой http-сервер)

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

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

Конфигурация Strapi

Создайте новый проект 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 здесь: http://localhost:1337/.

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

Перейдите в раздел Content-Type Build в вашем экземпляре администратора http://localhost:1337/admin/plugins/content-type-builder/ и затем создайте Collection, как показано ниже:

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

Текстовое поле для названия Title, тип Short text:

Медиа поле с именем Изображение, тип Одиночное медиа:

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

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

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

Генерация токена аутентификации

Перейдите по адресу: http://localhost:1337/admin/settings/api-tokens/create и создайте новый токен:

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

Конфигурация Jekyll

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

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

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

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

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

Создайте новый проект 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 http://localhost:1337)
    endpoint: http://localhost:1337
    # 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>
Войти в полноэкранный режим Выйти из полноэкранного режима

и photo.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>
Войти в полноэкранный режим Выйти из полноэкранного режима

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

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

и теперь вы можете генерировать вашу страницу:

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

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

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

и открыть http://localhost:8000 в вашем браузере.

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

Здесь вы можете увидеть страницу из предыдущего примера, развернутую на страницах GitHub: https://jekyll-strapi-v4-example.bluszcz.net/.

Она использует следующий репозиторий GitHub: https://github.com/bluszcz/jekyll-strapi-v4-example.github.io/

Оцените статью
devanswers.ru
Добавить комментарий