Gatsby 테마 선택 후 Vercel로 홈페이지를 배포하기

1. 들어가며

제가 여러가지 방법으로 테마를 선택 후 배포(호스팅)을 해봤는데, 이 방법이 가장 빠르고 편하며, 관리하기 좋다고 생각합니다.

2. 선 배포, 후 수정

배포는 정말 쉽게 할 수 있습니다. 우리는 이미 Vercel과 Github 계정을 연결했기 때문에 몇번의 클릭으로 그냥 홈페이지가 눈앞에 띄워집니다.

https://vercel.com/import/templates

위 링크를 보면 vercel에서 지원하는 정적사이트 생성기 목록을 볼 수 있습니다.

vercel에서 개발하고 있는 nextjs부터 블로그에 최적화 되어있는 gatsby, 마찬가지로 블로그에 강점이 있는 hugo, 전통의 강자 jekyll 등등 지원하는 종류가 많습니다.

이렇게 많은 종류의 정적사이트 생성기에서 만든 파일들을 배포할 수 있습니다.

위에 있는 템플릿들은 전부 기본 테마들이기 때문에 수정하려면 정말 고된 시간을 보내야 합니다.

그래서 저는 Gatsby 테마로 시작하는 것을 추천드립니다.

현재 블로그 부분에서는 독보적인 플러그인 시스템부터, 기능이 완성된 테마까지 사용자가 쉽게 시작할 수 있는 모든 조건이 완비되었다고 생각하기 때문입니다.

물론 Vercel에서 개발하고 있는 Nextjs가 대세이긴 하지만, 블로그 부분에서는 사용자가 많지 않고, 플러그인 시스템, 테마 부분이 매우 부족한 것이 사실입니다.

그래서 편하게 Gatsby로 시작해봅니다.

3. 테마 선택

Gatsby로 선택을 했다면, 이제 테마를 골라야 합니다. 테마의 종류도 수백가지가 넘습니다.

https://www.gatsbyjs.org/starters/?v=2

위 링크를 보시면 현재 Gatsby에서 쓸 수 있는 스타터(테마)를 선택할 수 있습니다.

제가 괜찮다고 생각하는 테마 리스트를 알려드리겠습니다.

(1) gatsby-starter-minimal-blog

소스 : https://github.com/LekoArts/gatsby-starter-minimal-blog

데모 : https://minimal-blog.lekoarts.de/

Lekoarts에서 만든 미니멀 블로그입니다.

그냥 보면 별거없어 보이지만, 이미지 레이지로드, 다크 테마 변경 기능, 코드 하이라이트 기능

 등 필요한 것은 다 들어있습니다.

오늘은 이 테마로 한번 배포해보도록 하겠습니다.

모든 테마가 다크 모드를 지원합니다.

(2) Gatsby Starter Novela 

소스 : https://github.com/narative/gatsby-starter-novela

데모 : https://novela.narative.co/

narative에서 만든 Novela 테마입니다. 

이미지 표현 방식에 대해서는 Gatsby 에서 최고라고 생각합니다.

Medium 방식의 이미지 zoom이 기본으로 탑재되어 있으며, 작은 크기 이미지, 중간 크기, Full 이미지 표시를 선택해서 표현할 수 있습니다.

그리고 코드하이라이트 표현도 잘 되구요!

(3) gatsby-starter-bee

소스 : https://github.com/JaeYeopHan/gatsby-starter-bee

데모 : https://jbee.io

한국인 JaeYeopHan님께서 만들었습니다!

https://github.com/JaeYeopHan/gatsby-starter-bee/blob/master/README.ko.md

여기에 친절하게 한글로 설명도 잘 해두셨구요! 정말 간결한 미니멀 블로그에 최적화되어 있다고 생각합니다. 댓글 플러그인도 disqus나 Utterances를 선택해서 바로 탑재 가능한 것이 큰 장점이라고 생각합니다.

(4) Borderless

소스 : https://github.com/junhobaik/junhobaik.github.io

데모 : https://junhobaik.github.io/

3번과 마찬가지로 한국인이 만들었습니다!

검색 엔진 최적화, 구글 분석 도구 지원, 구글 애드센스 지원, 디스커스 댓글 지원 등이 특장점이며, 정말 미니멀한 블로그라고 생각합니다.

(5) overreacted.io

소스 : https://github.com/gaearon/overreacted.io

데모 : https://overreacted.io/

다국어 지원이 특장점이라고 볼 수 있습니다. 그리고 태그 기능도 좋구요. 또한 매우 빠릅니다.

코드 하이라이트도 잘 지원이 됩니다.

(6) 기타 추천 테마

윤옴므님의 블로그 : https://github.com/suites/suitelab/

ghost의 casper를 기반으로 만든 테마 : https://github.com/scttcper/gatsby-casper

빌더를 지원하는 템플릿 : https://reflexjs.org/

정말 빠른 테마 : https://github.com/maxpou/gatsby-starter-morning-dew

사진 전시에 최적화된 테마 : https://github.com/LekoArts/gatsby-starter-portfolio-emilia

https://arshad-gatsby-example-phoenix.netlify.app/

https://flex.arshad.io/

등등 정말 많습니다. 

4. Vercel과 연동하여 배포하기

예제로 첫번째로 소개해드렸던 gatsby-starter-minimal-blog를 배포해보도록 하겠습니다.

여러가지 방법이 있지만 가장 쉬운 방법을 알려드립니다.

우선 Vercel에 깃허브 계정으로 로그인 합니다.

https://vercel.com/login

위 링크로 들어가 깃허브로 로그인합니다.

https://vercel.com/import/git?c=1&s=

위 링크에서 깃허브 주소만 붙여주면 됩니다.

gatsby-starter-minimal-blog의 깃허브 링크주소를 붙이면

https://vercel.com/import/git?c=1&s=https://github.com/LekoArts/gatsby-starter-minimal-blog

위와 같이 됩니다. 이제 위 링크를 클릭합니다.

위와 같이 경로를 확인합니다. Continue를 눌러줍니다.

위와 같이 깃허브에 Vercel을 설치하라고 합니다. 클릭합니다.

깃허브에 Vercel 앱을 설치하게 됩니다. Install을 누릅니다.

이제 다음 단계로 가면 Vercel에게 깃허브 접근 권한을 승인해줍니다.

Vercel 계정을 선택합니다. 퍼스널 어카운트를 선택 후 Continue를 누릅니다.

이제 위와 같이 자신의 깃허브 계정에 저장소를 생성합니다.

저장소 이름은 원하는 것 아무거나 가능합니다. 저는 일단 그대로 해볼게요. 

Private Git Repository는 저장소를 외부에 공개를 할 것인가, 아니면 개인 전용으로 공개하지 않을 것인가 선택하는 것입니다.

공개를 원하면 체크를 해제하고, 공개하고 싶지 않다면 체크 후 Continue를 누르면 됩니다.

공개 설정은 나중에 깃허브에서도 수정 가능합니다.

이제 Vercel 설정 부분입니다. 프로젝트 이름은 Vercel 내에서 보여지는 프로젝트의 이름을 결정하는 것입니다. 원하는 이름으로 수정하면 됩니다.

나머지 빌드 셋팅이나 환경 변수 지정은 안해도 됩니다. 

이제 드디어 배포(Deploy)를 합니다.

위와 같이 스스로 빌드를 하고 있습니다.

대략 2분 정도 기다리면

위와 같이 축하한다는 표시가 뜨고 홈페이지에 들어가거나, 대시보드로 들어갈 수 있습니다.

정말 쉽죠? Visit을 누르면 홈페이지를 바로 볼 수 있습니다.

다음 글에서는 Vercel 도메인 설정 및 Git을 활용하여 로컬에서 수정하는 방법에 대해 알려드리겠습니다.