gatsby starter try ghost
1.0.0
헤드리스 Ghost CMS에서 블로그를 만들기 위한 Gatsby 스타터입니다.
Ghost 블로그를 눈부시게 빠른 정적 웹사이트로 바꿔보세요. 이 Gatsby 테마는 향상된 Ghost Casper 모양과 느낌을 특징으로 하는 Ghost Handlebars 엔진의 프런트 엔드 대체품입니다. 모든 콘텐츠는 헤드리스 Ghost CMS에서 제공됩니다.
gatsby-config.js에 지치셨나요? 더 많은 혜택을 제공하는 통합 솔루션을 Blogody에서 확인해 보세요!
Gatsby보다 Next.js를 선호하시나요? next-cms-ghost로 가보세요!
이 프로젝트 사용에 대한 실용적인 가이드는 튜토리얼을 확인하세요.
데모를 플레이하여 첫인상을 얻으세요.
편의를 위해 다음 플러그인이 포함되었습니다.
| 이름 | 버전 | 설명 |
|---|---|---|
gatsby-theme-ghost-dark-mode | 다크 모드 토글? | |
gatsby-rehype-ghost-links | CMS 링크를 절대 링크에서 상대 링크로 다시 작성 | |
gatsby-rehype-prismjs | PrismJS를 사용한 구문 강조 | |
gatsby-theme-ghost-members ? | 회원가입 |
필요하지 않은 경우 gatsby-config.js 및 package.json 에서 이를 제거하면 빌드 프로세스 중에 시간을 절약할 수 있습니다.
Gatsby 테마나 플러그인을 설치하여 추가 기능을 통합할 수 있습니다. 다음 플러그인은 gatsby-starter-try-ghost 와 작동하도록 테스트되었습니다.
| 이름 | 버전 | 설명 |
|---|---|---|
gatsby-rehype-inline-images ? | 블러업이 포함된 지연 로딩 인라인 이미지 | |
gatsby-theme-ghost-contact | 연락처 페이지 | |
gatsby-theme-ghost-commento | Commento를 이용한 댓글 시스템 | |
gatsby-theme-ghost-toc ? | 목차 | |
gatsby-plugin-ackee-tracker | Ackee를 사용한 사이트 추적 | |
gatsby-plugin-google-analytics | Google Analytics를 이용한 사이트 추적 |
다음을 실행하여 이 스타터를 설치하세요.
gatsby new try-ghost https://github.com/styxlab/gatsby-starter-try-ghost디렉토리 변경
cd try-ghost달리다
yarn develop http://localhost:8000 에서 귀하의 사이트를 방문하세요.
//siteConfig.js
module . exports = {
// Do not include a trailing slash!
siteUrl : `https://your-blog.com` ,
// Maximum number of post shown per page
// Infinite Scroll: Initial chunk of posts, subsequent posts are fetched one by one
postsPerPage : 3 ,
// This allows an alternative site title for meta data for pages.
siteTitleMeta : `Gatsby Starter Ghost CMS` ,
// This allows an site description for meta data for pages.
siteDescriptionMeta : `Turn your Ghost blog into a flaring fast static site with Gatsby` ,
// Used for App and Offline manifest e.g. Mobile Home Screen
shortTitle : `Ghost` ,
siteIcon : `favicon.png` ,
backgroundColor : `#e9e9e9` ,
themeColor : `#15171A` ,
// Include Gatsby images for lazy loading and image optimizations (default: true)
gatsbyImages : true ,
// Overwrite navigation menu (default: []), label is case sensitive
// overwriteGhostNavigation: [{ label: `Home`, url: `/` }],
} ; 위에 표시된 구성에서 변경해야 할 가장 중요한 필드는 siteUrl , siteTitleMeta 및 siteDescriptionMeta 입니다. 최소한 필요에 맞게 업데이트하세요.
모든 콘텐츠는 Ghost CMS에서 제공됩니다. 기본적으로 콘텐츠는 https://cms.gotsby.org 의 데모 위치에서 가져옵니다. 확실히 당신은 자신의 콘텐츠를 소스로 원합니다. 콘텐츠 키를 사용 가능하게 만드는 방법에는 두 가지가 있습니다. 빌드 시나리오에 따라 방법을 선택하세요.
클라우드 제공업체(예: Gatsby, Netlify, Vercel)를 사용하여 프로젝트를 빌드하는 경우 가장 좋은 옵션은 키에 환경 변수를 제공하는 것입니다.
| 열쇠 | 값(예) |
|---|---|
| GHOST_API_URL | http://localhost:2368 |
| GHOST_CONTENT_API_KEY | 9fccdb0e4ea5b572e2e5b92942 |
이를 정의할 수 있는 위치는 공급자에 따라 다르지만 일반적으로 사이트 설정에서 옵션을 찾을 수 있습니다. 이는 공개 저장소에 키를 게시하는 것을 방지하며 가장 안전합니다.
로컬로 빌드하거나 전 세계에서 빌드 디렉터리에 액세스할 수 없는 개인 네트워크에서 빌드하는 경우 다음 JSON 구조를 사용하여 기본 디렉터리에 새 .ghost.json 파일을 안전하게 추가할 수 있습니다.
{
" development " : {
" apiUrl " : " http://localhost:2368 " ,
" contentApiKey " : " 9fccdb0e4ea5b572e2e5b92942 "
},
" production " : {
" apiUrl " : " http://localhost:2368 " ,
" contentApiKey " : " 9fccdb0e4ea5b572e2e5b92942 "
}
} 이 파일은 실수로 공개 저장소에 게시되는 것을 방지하기 위해 .gitignore 의 일부입니다. 자신의 Ghost CMS Content API 키와 일치하도록 apiUrl 및 contentApiKey 변경하십시오.
최상의 SEO 결과를 얻으려면 Ghost 관리자 설정에서 이 사이트를 비공개로 설정 플래그를 선택하여 기본 Ghost Handlebars 테마 프런트 엔드를 비활성화하는 것이 좋습니다. 이렇게 하면 Ghost 설치 전에 비밀번호 보호가 활성화되고 <meta name="robots" content="noindex" /> 설정되어 Gatsby 프런트 엔드가 검색 엔진의 신뢰할 수 있는 소스가 됩니다.
sudo npm install npm-upgrade -g 를 사용하여 npm-upgrade를 설치하는 것이 좋습니다. 기본 디렉터리로 변경하고 다음을 사용하여 모든 패키지를 업데이트합니다.
npm-upgrade package.json 파일 내의 모든 패키지를 업데이트하라는 메시지가 표시됩니다. 다음으로 새 패키지를 다운로드합니다.
yarn
yarn clean 이제 업데이트 프로세스가 완료되었으며 yarn build (또는 yarn develop )를 사용하여 새 빌드를 시작할 수 있습니다.
모든 개발이 진행되고 있으므로 gatsby-theme-try-ghost/issues에서 모든 버그와 문제를 보고해 주세요.
이 프로젝트는 Gatsby 또는 Ghost와 관련이 없습니다.
Copyright (c) 2020 styxlab - MIT 라이선스에 따라 출시되었습니다.
