Github Pages에서 Vercel로 이동하기 - private repository 전환

Posted 2024/04/11 Thursday

By zhyun kim

읽는 시간 4 분

github pages를 이용해 블로그를 관리하게 되면서 앞으로도 계속 public repository에 글을 올리는게 맞는건가..?? 하는 생각이 계속 머리에 맴돌던 와중에 vercel이 눈에 들어왔다.

그래서 정리해보는 github pages에서 vercel로 옮기기!!

사용하던 github 레포지토리 설정

무료 사이트인 Vercel에 회원 가입 후 로그인을 한 상태에서 진행한다.

로그인 후 보여지는 화면에서 Add New... - project 버튼을 클릭한다.

깃허브 연동을 하지 않은 상태라면 Add GitHub Account 를 선택하여 github와 연동한다.

블로그 코드가 담긴 private repository를 Import한다.

project Name : vercel에서 관리할 이름
Framework Preset : Jekyll (repository 내용을 인식하여 자동으로 선택된 상태가 된다.)
Build and Output Settings
- Build Command : jekyll build
- Output Directory : _site
- Install Command : bundle install
Environment Variables
- Key: JEKYLL_ENV
- Value: production

Build and Output Settings 값과 Environment Variables 값을 꼭 확인하고 Deploy 버튼을 눌러준다.

그러면 넘어간 화면에서 Deploy 되던 중에 Fail 될 텐데, 추가 설정을 해주어야 한다.
Go to Project 버튼을 눌러주고,

상단에 있는 Settings 메뉴로 들어간다.

Project Settings 화면에서 아래로 스크롤을 조금만 해보면 Node.js Version 섹션이 나타나는데, 이 값이 20.x로 되어있다면 18.x로 변경해주고 저장한다.

다시 맨 위에 Deployments 메뉴를 선택하여 최근에 실패한 build 이름을 클릭한다.

화면 상단에 있는 Redeploy 버튼을 클릭하여 다시 build한다

Redeploy to Production 창이 나타나면 Redeploy 버튼을 누른다.

잠시 기다리면 build에 성공하고 다음과 같이 Domain 등 생성된 페이지에 대한 정보가 나타난다.

Domains 제일 첫 줄에 보이는 값을 사용하여 블로그에 접근할 수 있다.

혹은 가지고 있는 개인 도메인이 있다면 아래 화면에서 등록하여 사용할 수 있다.

Domain을 등록하면 ssl 인증서도 자동으로 발급해주고 굉장히 빠르게 진행되기 때문에 사용하면 좋을 것 같다.
(시간 측정을 해보지 못했지만 체감하기로는 ssl 등록까지 5분 미만으로 소요되었던 것 같다.)

무료!!
github에 데이터를 push 하면 vercel에 자동으로 배포되는 ci/cd가 간단한 설정으로 해결됨
public repository로 블로그의 모든 데이터를 공개하는게 아주 찜찜했다 ;-;
개인 서버 용 컴퓨터 본체가 1대 있어서 그걸로 blog를 관리해볼까 싶었지만
이사 등의 이슈로 본체의 전원이 꺼질 경우 블로그에 접속 되지 않는 상황이 발생하는게 싫었다.

vercel 만세! 😆