gatsby starter gcn
v3.0.1
Gatsby, Contentful 및 Netlify를 사용하여 놀라운 정적 웹사이트를 구축하기 위한 시작 템플릿입니다. gatsby-contentful-starter에서 영감을 얻었습니다.
https://gcn.netlify.app/
git clone https://github.com/ryanwiemer/gatsby-starter-gcn.git
yarn install
또는 Gatsby CLI를 통해
gatsby new gatsby-starter-gcn https://github.com/ryanwiemer/gatsby-starter-gcn.git
Contentful에 가입하고 새로운 빈 공간을 만들어보세요
yarn run setup
app.contentful.com → 공간 설정 → API 키 에 있는 Contentful 공간에 대해 요청된 정보를 입력하세요. 표준 API 키(첫 번째 탭)와 관리 키(두 번째 탭)를 모두 제공해야 합니다.
/src/gatsby-config.js 에서 siteMeta 데이터 편집
siteMetadata: {
title : 'GCN' , // Title of the website
description : // Description of the website
'A starter template to build amazing static websites with Gatsby, Contentful and Netlify' ,
siteUrl : 'https://gcn.netlify.app' , // Website URL. Do not include trailing slash
image : '/images/share.jpg' , // Path to default image for SEO
menuLinks : [ // The links used in the top menu
{
name : 'Home' ,
slug : '/' ,
} ,
{
name : 'About' ,
slug : '/about/' ,
} ,
{
name : 'Contact' ,
slug : '/contact/' ,
} ,
] ,
postsPerFirstPage : 7 , // Number of posts on the first page
postsPerPage : 6 , // Number of posts used on all other pages
/*
Root URL for posts and tags
For example: 'blog' will result in:
- www.example.com/blog/
- www.example.com/blog/post-name/
- www.example.com/blog/tag/tag-name/
*/
basePath : '/' , // Defaults to the homepage
} 참고: 로컬로 개발할 때 변경 사항이 반영되지 않으면, yarn clean 실행한 후 yarn develop 통해 서버를 다시 시작해야 할 수도 있습니다.
/src/gatsby-plugin-theme-ui/index.js 편집
export default {
colors : {
background : '#ffffff' ,
text : '#121212' ,
primary : '#121212' ,
secondary : '#e9e9e9' ,
tertiary : '#f3f3f3' ,
highlight : '#5b8bf7' ,
} ,
fonts : {
body : '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif' ,
} ,
sizes : {
maxWidth : '1050px' ,
maxWidthCentered : '650px' ,
} ,
responsive : {
small : '35em' ,
medium : '50em' ,
large : '70em' ,
} ,
}yarn test 스크립트를 사용하여 코드에 오류가 있는지 빠르게 확인하세요.static/images 디렉터리에서 share.jpg 및 favicon.png 파일을 바꿀 수 있습니다. gatsby build 실행
/public/ 폴더를 Netlify로 드래그 앤 드롭하세요.
Git의 새로운 Netlify 웹사이트
GitHub에 연결하고 저장소를 선택하세요.
Netlify: 설정 → 빌드 및 배포 → 빌드 환경 변수 로 이동합니다. Space ID 및 Content Delivery API(Contentful의 액세스 토큰)를 사용하여 다음 환경 변수를 추가합니다. 또한 원하는 경우 Google Analytics ID를 입력할 수 있습니다. 제대로 작동하려면 변수 이름을 이와 정확히 동일하게 지정해야 합니다.
ACCESS_TOKEN
SPACE_ID
GOOGLE_ANALYTICS
Trigger deploy 클릭하면 배포를 수동으로 트리거하여 빌드 환경 변수를 사용하여 웹 사이트가 성공적으로 구축되고 있는지 확인할 수 있습니다. 이 시점에서는 master 로 푸시할 때마다 배포가 자동으로 시작되어 프로덕션에 게시된다는 점에 유의하세요. Netlify: 설정 → 빌드 및 배포 → 빌드 후크 로 이동합니다. 새 빌드 후크를 만듭니다.
Contentful: app.contentful.com → 공간 설정 → Webhooks 로 이동합니다. 방금 생성한 Netlify 빌드 URL을 사용하여 웹후크를 생성하고 프로덕션에서 빌드를 트리거해야 하는 이벤트를 구성합니다. 예를 들어 다음은 게시물이나 페이지가 게시, 게시 취소 또는 삭제될 때마다 제작 웹사이트를 다시 구축합니다.
Netlify: 양식 → 알림 으로 이동하세요.
알림 추가 드롭다운을 클릭하고 원하는 알림 방법을 선택하세요.
yarn develop 실행하는 동안 Contentful 공간을 편집하는 경우 이를 중지하고 명령을 다시 실행하여 변경 사항이 반영되었는지 확인해야 합니다. 예를 들어 새 게시물이나 페이지는 웹사이트가 재구축될 때까지 자동으로 표시되지 않습니다.
