단계마다 제가 가장 도움을 얻었던 포스팅을 링크했고, 링크 하단에 (내가 생각하기에) 추가로 필요한 설명을 짧게 썼다. 링크의 내용과 절차를 먼저 읽고 그 후에 덧붙인 설명을 읽으면 될 것 같다.
도메인 구매(Namecheap)
Amy Nichol Smith
가격과 실시간 채팅이 마음에 들어 Namecheap에서 도메인을 등록했다. 바로바로 joyfuljoeunlee.dev !! 도메인만 봐도 개발자 같다^^^^
Ghost 설치(DigitalOcean)
위 포스팅을 참고해 디지털오션을 이용한 고스트 설치 방법을 알 수 있다. 참고로 Create Droplets의 Choose a datacenter region에서 본인의 서비스를 고려 중인 지역에 맞춰 선택하면 되는데 나는 한국과 가까운 싱가포르를 선택했다.
디지털오션에서 드롭릿을 생성한 후에 도메인을 IP주소에 연결할 것이다. 이후에 도메인 등록 기관에 접속해 네임서버를 업데이트하는 것을 잊지 말자.
Gatsby 사이트 세팅
처음에는 gatsby-starter-ghost 템플릿을 사용했는데, 좀 더 가벼운 걸 원해서 gatsby-starter-blog로 바꾸게 되었다.
Ghost 컨텐츠를 Gatsby와 연결
위 포스팅의 Connecting Gatsby to Ghost 파트를 보면 gatsby-starter-blog 템플릿에서 개츠비와 고스트를 연결하는 방법이 설명되어있다.
가장 중요한 것은 gatsby.config.js 파일에서 gatsby-source-ghost의 apiUrl과 contentApiKey를 알맞게 적는 것이다. 이 정보를 추가함으로써 개츠비가 고스트의 내용을 가져올 수 있게 된다. 고스트의 관리자 대시보드에서
Settings(오른쪽 하단 바퀴 모양)->Integrations->Add custom integrations->Name: Gatsby Source Ghost(로 했지만 자유롭게 적어도 됨)
단계를 완료하면 위와 같은 화면에서 apiUrl과 contentApiKey를 얻을 수 있다.
{
resolve: `gatsby-plugin-feed`,
options: {
query: `
{
site {
siteMetadata {
title
description
siteUrl
site_url: siteUrl
}
}
}
`,
feeds: [
{
serialize: ({ query: { site, allMarkdownRemark } }) => {
return allMarkdownRemark.nodes.map(node => {
return Object.assign({}, node.frontmatter, {
description: node.excerpt,
date: node.frontmatter.date,
url: site.siteMetadata.siteUrl + node.fields.slug,
guid: site.siteMetadata.siteUrl + node.fields.slug,
custom_elements: [{ "content:encoded": node.html }],
})
})
},
query: `
{
allMarkdownRemark(
sort: { order: DESC, fields: [frontmatter___date] },
) {
nodes {
excerpt
html
fields {
slug
}
frontmatter {
title
date
}
}
}
}
`,
output: "/rss.xml",
title: "Gatsby Starter Blog RSS Feed",
},
],
},
},추가로 gatsby-config.js 파일에서 위 코트를 주석 처리 해야 한다. 이유는 아직 모르겠지만 빌드할 때 에러가 발생하는데 일단 이 플러그인이 필요 없기 때문에 임시로 해결했다.
Gatsby를 Netlify에 배포
위 포스팅을 통해 개츠비 사이트를 네트리파이로 배포할 수 있다. 빌드 설정이 헷갈리면 이 포스팅을 추가로 보면 좋다.
Ghost 업데이트 할 때 Netlify 빌드하도록 세팅
이제 진짜 마지막이다. 위 포스팅을 읽고 고스트 내용을 업데이트할 때마다 네트리파이가 빌드를 트리거하도록 해보자.