Flotiq 스타터 - Gatsby Blog

이 기사에서는 Flotiq에서 만든 새로운 블로그 스타터를 소개합니다. 헤드리스 CMS를 사용하면 블로그를 빠르게 배포하고 관리할 수 있습니다. Flotiq 스타터를 사용하면 모든 프로젝트를 쉽게 디자인하고 맞춤화할 수 있습니다.
플로티크를 즐겨보세요.

Flotiq 헤드리스 CMS로 최신 블로그를 만들기 위한 Gatsby 블로그 스타터

Gradient 블로그는 기업, 프리랜서 또는 개인 용도를 위한 최신 헤드리스 CMS 블로그 스타터입니다. 콘텐츠를 명확하고 창의적인 방식으로 표시하기 위해 만들어졌습니다. 청중을 매료시키고 독특한 시간을 제공합니다.

디자인, 제품, 기업, 엔지니어링 또는 상상할 수 있는 모든 것이 목적에 맞는 레이아웃으로 표시됩니다.

Live preview
특징

UI 키트를 사용한 반응형 디자인

반응형 내비게이션

리치 미디어

Flotiq Forms으로 만든 연락처 양식

간편한 배포

최대화된 페이지 속도 점수

SEO 친화적

웹 글꼴 - Google Fonts의 글꼴을 사용하여 구축됨

이 프로젝트 사용:

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

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

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

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

빠른 시작

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

npm i –g flotiq-cli 
flotiq start [flotiqReadWriteApiKey] flotiq-gatsby-blog-1 https://github.com/flotiq/flotiq-gatsby-blog-1.git 

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

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

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

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

애플리케이션 구성
다음 단계는 데이터를 가져와야 하는 위치를 알기 위해 응용 프로그램을 구성하는 것입니다.

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

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

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

cd flotiq-gatsby-blog-1/ gatsby develop 

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

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

flotiq import [flotiqApiKey] . 

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

Note: You need to put your Read and write API key as the flotiqApiKey for import to work. You don't need any content types in your account.

소스 코드를 열고 편집을 시작하세요!

귀하의 사이트는 현재 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.

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

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

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

Flotiq의 사랑과 열정으로 제작되었습니다.