Gatsby Flexiblog 테마 Vercel로 배포하는 방법

Vercel(링크)은 Nextjs를 개발하면서 배포 서비스를 하는 업체입니다.

Gatsby도 자체 서비스인 Gatsby Cloud(링크)를 운영하고 있습니다.

Vercel과 마찬가지로 개인에게는 무료인데요.

Vercel의 경우 배포 서비스하는 업체 중 거의 유일하게 서울 CDN을 제공해줍니다.

개인사용자도 무료로 서울 CDN을 쓸 수 있기 때문에 블로그 운영하기에 최고의 선택이라고 생각합니다.

Github에 있는 자신의 소스를 Vercel에 연동하는 방법은 Gatsby 테마 선택 후 Vercel로 홈페이지를 배포하기를 참조하세요.

Build 설정

그런데 Flexiblog의 경우 구조가 약간 달라서 처음 연결할 때 설정을 추가해야되는데요.

위와 같이 FRAMEWORK PRESET에 Gatsby.js를 선택합니다.

BUILD COMMAND에는 cd site && yarn build를 넣고 OVERRIDE에 체크해줍니다.

OUTPUT DIRECTORY에는 site/public를 넣고 OVERRIDE에 체크해줍니다.

실제 파일들이 site에 있기 때문에 이런 작업을 해줘야됩니다.

trailingSlash 작업

그리고 최상위 폴더에 vercel.json 파일을 생성하고 밑의 내용을 넣어줍니다.

{
    "trailingSlash": true
}

위 내용은 URL 마지막에 /를 강제로 넣어준다는 뜻입니다.

Flexiblog의 경우 URL 마지막에 /가 없는 경우 강제로 새로고침하여 /를 붙여주는데요.

Vercel에서 배포하는 경우 이 옵션이 없으면, 페이지 새로고침 후 CSS가 전부 깨지는 버그가 있습니다.

따라서 이 작업을 해줘야 URL에 /가 없이 접근해도 정상 작동됩니다.