Flotiq 헤드리스 CMS를 사용한 블로그용 Gatsby 스타터

이 블로그 상용구로 프로젝트를 시작하세요. 이 스타터는 React용 초고속 앱 생성기를 사용하여 초고속으로 시작하고 실행하는 데 필요할 수 있는 기본 Gatsby 구성 파일과 함께 제공됩니다.


라이브 데모: https://flotiqgatsbyblog2.gatsbyjs.io

이 프로젝트 사용:

Flotiq - 데이터 문자열을 위한 헤드리스 CMS(You can create account here )

Tailwind - 유틸리티 우선 CSS 프레임워크

Flotiq source plugin - Flotiq에서 데이터를 가져오기 위한 커넥터

Flotiq components for react - Flotiq 콘텐츠 개체와 완벽하게 작동하고 데이터를 아름답게 표시하도록 설계 및 작성된 구성 요소 라이브러리

이 프로젝트는 노드 ^14.17.0 ||에서 작동합니다. >=16.0.0, 노드 15를 지원하지 않습니다.

빠른 시작

Flotiq CLI를 사용하여 템플릿에서 프로젝트 시작

npm install -g flotiq-cli
flotiq start [flotiqApiKey] [projectName] https://github.com/flotiq/flotiq-gatsby-blog-2.git

flotiqApKey - Flotiq 계정에 대한 API 키 읽기 및 쓰기

projectName - 프로젝트 이름 또는 프로젝트 경로(프로젝트를 시작하거나 현재 디렉토리에서 데이터를 가져오려는 경우 - . 사용)

Gatsby CLI를 사용하여 템플릿에서 프로젝트를 시작할 수도 있습니다.

gatsby new my-hello-world-starter https://github.com/flotiq/flotiq-gatsby-blog-2.git

애플리케이션 구성

다음 단계는 데이터를 가져와야 하는 위치를 알 수 있도록 애플리케이션을 구성하는 것입니다.

다음 구조로 디렉터리의 루트 내에 .env.development라는 파일을 만들어야 합니다.

GATSBY_FLOTIQ_API_KEY=YOUR FLOTIQ API KEY
GA_TRACKING_ID=YOUR GA TRACKING KEY

개발을 시작합니다.

새 사이트의 디렉토리로 이동하여 시작하십시오.

cd flotiq-gatsby-blog-2/
gatsby develop

이 단계는 선택 사항이며 flotiq-cli를 사용하여 프로젝트를 시작한 경우에는 필요하지 않습니다.

예제 데이터를 계정으로 가져오려면 실행하기 전에gatsby develop 다음을 실행하십시오.

flotiq import [flotiqApiKey] .

Flotiq 계정에 두 개의 예시 개체가 추가됩니다.

참고: 가져오기가 작동하려면 읽기 및 쓰기 API 키를 flotiqApiKey로 입력해야 합니다. 계정에 콘텐츠 유형이 필요하지 않습니다.

소스 코드를 열고 편집을 시작하십시오!

귀하의 사이트는 현재 http://localhost:8000에서 실행 중입니다!

Note: You'll also see a second link: http://localhost:8000/___graphql. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the Gatsby Tutorial.

선택한 코드 편집기에서 flotiq-gatsby-blog-2 디렉토리를 열고 src/templates/index.js를 편집합니다. 변경 사항을 저장하면 브라우저가 실시간으로 업데이트됩니다!

Flotiq 편집기를 사용하여 콘텐츠 관리

이제 Flotiq editor을 사용하여 콘텐츠를 쉽게 관리할 수 있습니다.