뛰어난 Simply Ghost 테마를 사용하여 Ghost(이 경우 헤드리스 CMS) 및 Gatsby를 사용하여 초고속 웹 사이트를 구축하기 위한 시작 템플릿입니다. Handlebars 테마에서 React/Gatsby로 다시 작성되었습니다.
데모: https://gatsby-ghost-simply.netlify.app/
custom_template
필드가 아닌 내부 태그를 사용하세요!)custom_template
필드가 아닌 내부 태그를 사용하세요!)custom_template
필드가 아닌 내부 태그를 사용하세요!)custom_template
필드가 아닌 내부 태그를 사용하세요!) # With Gatsby CLI
gatsby new gatsby-starter-ghost https://github.com/anarion80/gatsby-ghost-simply.git
# From Source
git clone https://github.com/anarion80/gatsby-ghost-simply.git
cd gatsby-ghost-simply
그런 다음 종속성을 설치하십시오.
yarn
개발 서버를 시작합니다. 이제 헤드리스 Ghost에서 콘텐츠를 가져오는 Gatsby 사이트가 생겼습니다. Ghost 인스턴스에 원래 Simply Ghost 테마를 설치할 필요가 없으며 거기에 추가 경로를 설정할 필요도 없습니다.
gatsby develop
기본적으로 스타터는 https://gatsby.ghost.io에 있는 기본 Ghost 설치의 컨텐츠를 채웁니다.
자체 설치를 사용하려면 자격 증명을 사용하여 .ghost.json
구성 파일을 편집해야 합니다. apiUrl
값을 Ghost 사이트의 URL로 변경하십시오. Ghost(Pro) 고객의 경우 이는 .ghost.io
로 끝나는 Ghost URL이고, 자체 호스팅 버전의 Ghost를 사용하는 사용자의 경우 사이트에 액세스하는 데 사용되는 것과 동일한 URL입니다.
그런 다음 contentApiKey
값을 Ghost 사이트와 연결된 키로 업데이트합니다. Ghost Admin 내에서 통합을 생성하여 키를 제공할 수 있습니다. 통합으로 이동하여 "새 통합 추가"를 클릭하세요. 통합 이름을 적절하게 지정하고 생성을 클릭합니다.
{
"apiUrl" : " https://gatsby.ghost.io " ,
"contentApiKey" : " 9cc5c67c358edfdd81455149d0 "
}
마지막으로 siteConfig.js
에서 원하는 URL을 구성하면 링크(예: 표준 링크)가 올바르게 생성됩니다. 메뉴, 소셜 공유 및 검색에 필요한 다른 값도 업데이트해야 합니다.
{
menuDropdown : [
{
label : `About` ,
url : `/about` ,
} ,
.
.
.
] ,
followSocialMedia : [
{
service : `youtube` ,
title : `YOUR_TITLE` ,
url : `YOUR_URL` ,
} ,
.
.
.
] ,
searchSettings : {
key : `YOUR_GHOST_API_KEY` ,
url : `YOUR_GHOST_URL` ,
/* This is optional */
options : {
keys : [ `title` , `plaintext` ] ,
limit : 10 ,
} ,
/* This is optional to perform filtering of the ghost api */
api : {
resource : `posts` ,
parameters : {
limit : `all` ,
fields : [ `title` , `slug` , `plaintext` ] ,
filter : `` ,
include : `` ,
order : `` ,
formats : `` ,
} ,
} ,
} ,
}
사용자 정의 게시물 템플릿을 사용하려면 게시물에 특정 내부 태그(예: #custom-post-wide
, #custom-kusi-doc
등)를 추가하세요.
데모 및 저장소는 가능한 모든 유형의 홈 페이지 변형, 게시물 템플릿, 포트폴리오, 문서 등을 포함하는 "최대 버전"입니다. 필요에 따라 조정/제거합니다.
스타터에는 특히 Netlify와 함께 배포하기 위한 세 가지 구성 파일이 포함되어 있습니다. 빌드 설정을 위한 netlify.toml
파일, 모든 경로에 기본 보안 헤더가 설정된 /static/_headers
파일, Netlify 사용자 정의 도메인 리디렉션을 설정하는 /static/_redirects
.
Netlify 계정에 배포하려면 아래 버튼을 누르세요.
Content API 키는 일반적으로 민감한 정보로 간주되지 않으며 남용 시 변경될 수 있도록 존재합니다. 따라서 대부분의 사람들은 이를 .ghost.json
구성 파일에 직접 커밋합니다. 이 정보를 저장소 외부에 보관하려면 이 구성을 제거하고 대신 프로덕션 빌드에 대해 Netlify ENV 변수를 설정할 수 있습니다.
일단 배포되면 Ghost + Netlify 통합을 설정하여 Ghost의 배포 후크를 사용하여 Netlify 재구축을 트리거할 수 있습니다. 이렇게 하면 Ghost에서 데이터가 변경될 때마다 사이트가 Netlify에서 다시 구축됩니다.
Ghost 설정에서 Make this site private
플래그를 활성화하여 기본 Ghost Handlebars 테마 프런트 엔드를 비활성화할 수 있습니다. 이렇게 하면 Ghost 설치 전에 비밀번호 보호가 활성화되고 <meta name="robots" content="noindex" />
설정되어 Gatsby 프런트 엔드가 SEO에 대한 정보 소스가 됩니다.
# Run a production build, locally
gatsby build
# Serve a production build, locally
gatsby serve
Gatsby develop
.ghost.json
의 development
구성을 사용하는 반면 Gatsby build
production
구성을 사용합니다.
Copyright (c) 2021 anarion80 - GPLv3 라이선스에 따라 출시되었습니다.