Gatsby Flexiblog 테마 gatsby-config.js 설정 및 RSS 설정하는 방법

Flexiblog를 매뉴얼에 따라 설치를 하더라도, 기능을 추가하거나 수정하는 시간이 매우 오래 걸립니다.

제가 설치한 플러그인과 적용방법을 보시면 좀더 편하게 수정할 수 있습니다.

기본 매뉴얼을 통해 기본적인 설치 및 설정을 할 수 있습니다. (링크)

Flexiblog 테마는 로컬 데이터(Markdown), Contentful CMS, Sanity CMS를 소스로 쓸 수 있습니다.

저는 로컬에서 Markdown 파일을 생성해서 Github로 보낸 후 Vercel과 연동하여 배포하고 있습니다.

Thirdparty API로는 Algolia 검색, Disqus 댓글을 쓰고 있습니다. 물론 Web App Manifest (PWA)도 적용해두었습니다.

추가한 플러그인

RSS 데이터 생성 : gatsby-plugin-feed

구글 분석도구 : gatsby-plugin-google-analytics

Sitemap(sitemap.xml) 생성 : gatsby-plugin-sitemap

PWA 오프라인 기능 활성화 : gatsby-plugin-offline

그리고 위 플러그인들을 추가해줬습니다.

설치하는 방법은

위와 같이 설치 후

/site/gatsby-config.js 파일을 아래와 같이 설정했습니다.

RSS 부분은 물어봐도 안가르쳐주더라구요 -_-;;

그래서 어쩔 수 없이 공부해서 넣었습니다. ㅎㅎ 잘 작동합니다.

상세 내용은 gatsby-plugin-feed 플러그인을 참조하세요.

Sitemap URL : /sitemap.xml

RSS URL : /rss.xml

설정이 잘 되었다면 위 경로로 접근할 수 있습니다.

.env 파일 내용

그리고 gatsby-config.js 파일에 보면 process.env.로 시작하는 부분이 있습니다.

숨기고 싶은 요소들을 넣어두는 곳이라고 보면 됩니다.

/site/.env 파일

저는 위와 같이 넣어줬습니다.

구글 분석도구 에러 수정 방법

위와 같이 Gatsby 버전이 낮아서 구글 분석 도구 플러그인이 에러날 수 있습니다.

2.3.17 버전부터 생긴 pluginOptionsSchema 때문인데요. Gatsby의 버전을 높이면 자동으로 해결됩니다.

/site/package.json 파일을 열어서

dependencies 부분에

위 내용을

위와 같이 2.24.69 이상으로 넣어주면 됩니다.