헤드리스 CMS - Strapi 4 및 Jekyll을 사용한 정적 사이트 생성기

이 문서는 this post 의 업데이트된 버전입니다.

Headless CMS에 대해 들어 보셨습니까?

개념에 익숙하지 않은 경우 편리한 Wikipedia 페이지https://en.wikipedia.org/wiki/Headless_content_management_system가 있습니다. Static Site Generators에 대해 읽으려면 Cloudflare 문서를 추천합니다: https://www.cloudflare.com/en-gb/learning/performance/static-site-generator/ .

이 기사에서는 Headless CMS 백엔드로 Strapi 버전 4를 사용하여 Jekyll을 정적 사이트 생성기로 사용하는 방법을 설명합니다.
요구 사항

이 문서에 설명된 연습을 수행하려면 다음이 필요합니다.

루비 https://www.ruby-lang.org/en/documentation/installation/

지킬 https://jekyllrb.com/docs/installation/

NodeJS 및 npmhttps://docs.npmjs.com/downloading-and-installing-node-js-and-npm

Python3(하지만 다른 모든 http 서버를 사용할 수 있음)

간단한 포트폴리오 웹사이트

이 예제에서는 사용자가 제목과 간단한 설명이 있는 사진을 업로드할 수 있는 매우 간단한 사진 포트폴리오 페이지를 만듭니다.
스트라피 구성 — 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 인스턴스가 있어야 합니다: http://localhost:1337/ .

스트라피 구성 — 컬렉션 설정

관리자 인스턴스http://localhost:1337/admin/plugins/content-type-builder/에서 Content-Type Build로 이동한 다음 아래와 같이 컬렉션을 만듭니다.



필드를 생성하려면 다음을 선택합니다.

짧은 텍스트 유형인 제목의 텍스트 필드:



이름이 이미지인 미디어 필드에 단일 미디어를 입력합니다.



이름이 Comment인 텍스트 필드에 Long text를 입력합니다.



마지막으로 다음과 비슷한 것이 있어야 합니다.



이제 Content Manager로 이동하여 첫 번째 개체를 데이터베이스에 추가합니다.

인증 토큰 생성

http://localhost:1337/admin/settings/api-tokens/create로 이동하여 새 토큰을 만듭니다.



생성 후 — 토큰을 따로 보관하십시오 — 나중에 필요합니다. 일부 암호 관리자를 권장합니다.

지킬 구성

Jekyll 프로젝트에서 Gemfile에 다음을 추가합니다.

gem “jekyll-strapi-4”, “~> 1.0.11”

번들 설치:

bundle install

지킬 프로젝트 구성

새로운 Jekyll 프로젝트 생성

jekyll new portfolio-site
cd portfolio-site

_config.yml의 플러그인에 jekyll-strapi-4를 추가합니다:

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>

이제 인증 토큰으로 환경 변수를 설정해야 합니다(여기서는 이전에 저장한 토큰을 사용해야 함).

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/