Hexo + Github Pages + Codeship을 통한 블로그 CI/CD 자동화
뭘 또 바꾸려고?
이전에 Docker Container에 NPM와 Hexo를 설치해서 사용하는 내용을 포스팅한 적이 있다.
그 포스팅의 내용처럼 컨테이너에 NPM, Hexo를 설치해서 Hexo 서버를 실행해서 결과물을 미리 보고, 문제 없으면 Hexo Deploy 기능을 실행해서 직접 배포하는 방식으로 블로그를 관리하고 있었다. 그런데 사실 번거로운 것이 몇 가지 있었다.
일단 컨테이너를 실행해야 헀고, 컨테이너에서 미리 Hexo를 띄워서 볼 수 있는 점은 좋았으나 배포를 직접 실행해야 한다는 점이었다.
“번거로워도 그냥 써야겠다”라는 마음으로 사용하고 있었는데 회사 동료가 추천해 준 방법이 있었다. 그것은 바로 CI/CD 자동화 서비스를 이용해서 원격 저장소에 올리면 자동으로 배포하는 방법.
미리 띄워서 보는 기능만 제외한다면, 굳이 로컬에서 직접 배포할 필요 없이 자동으로 CI/CD가 되는 그 방법이 더 편하겠다는 생각이 들었다.
그래서 동료가 추천해 준 방법으로 바꿔보기로 결심했다.
Github Pages로 사용할 정적 파일 저장소와 Hexo 저장소 생성하기
먼저 지금까지 1개의 저장소로 관리하던 것을 2개의 저장소로 나누기로 결정했다. 1개는 Github Pages에 올라갈 정적 파일 저장소, 다른 하나는 Hexo 코드가 올라가는 Hexo 저장소.
지금까지는 하나의 저장소를 사용하면서 역할에 따라 브랜치만 분리해서 사용했지만 아예 저장소를 분리하는 것으로 결정했다. 나 같은 경우 Hexo 저장소는 프라이빗 저장소로, Hexo에서 생성한 정적 파일 저장소는 퍼블릭 저장소로 만들었다.
Hexo에 Git Deploy 설정하기
Hexo의 _config.xml 파일에 Git Deploy 기능을 아래와 같이 설정해야 한다. repo 속성에 기입하는 경로는 정적 파일 저장소로 설정하면 된다. 자세한 내용은 링크를 참조할 것.
1 | # _config.yml |
유의할 점은 repo 속성에 정적 파일 저장소의 경로를 지정할 때 __GITHUB_TOKEN__@ 부분을 반드시 넣어줘야한다는 것이다. 왜냐하면 저 부분이 아래에서 발급할 Github Access Token 값으로 대체될 Placeholder 부분이기 때문이다.
Github Access Token 발급하기
Github의 Settings > Developer Settings > Personal access tokens로 이동하여 토큰을 발급 받는다. 아래 화면에서 보이는 Generate new token 버튼을 클릭해서 발급 받을 수 있다.
여기서 발급한 토큰 값은 이 화면에서 확인하고 나서 다른 화면에서는 확인 불가능하므로 개인적으로 잘 관리해야 한다.
Codeship 프로젝트 생성
CI/CD 서비스는 여러 가지 많긴 하지만 Codeship이라는 서비스를 사용하기로 결정했다. 특별한 이유는 없었고, 1달에 100회의 빌드를 무료로 제공해주는 데다가 UI가 괜찮았고 동료의 가장 처음 언급했던 서비스였기 때문이다.
일단 Codeship에 Github 계정으로 로그인하면 다음과 같은 화면이 나온다.
여기서 먼저 해야할 것은 프로젝트를 생성하는 것. 상단 네비게이션 바에 위치한 Projects를 클릭한다. 그럼 다음과 같은 화면이 뜨는데 우측 상단의 New Project 버튼을 클릭하여 프로젝트를 생성해야 한다.
아래와 같이 대표적인 원격 저장소 서비스 3가지 중 1개를 고르게 하는데, 아까 Github 계정으로 로그인하기도 했고 Github Pages로 호스팅하고 있으므로 Github을 고른다.
다음은 Github Organization과 Repository를 고르면 된다. Organization은 본인의 계정을, Repository는 Hexo 저장소를 지정한다.
아래와 같은 화면이 나오면 Codeship Basic을 선택하면 된다.
Codeship 프로젝트 CI/CD 설정
프로젝트를 생성했으면 이제 CI/CD 설정을 해야 한다. 여러 가지 설정들이 있지만 그 중에서 필요한 부분들만 골라서 해보자. 먼저 상단의 Deploy를 누르면 아래와 같은 화면이 나오는데 배포 트리거로 작동할 브랜치를 지정하자. 나는 master 브랜치로 지정했다. 지정 후 Save Pipeline Settings 버튼을 누른다.
그럼 다음과 같은 화면이 나오는데 Custom Script를 선택한다.
배포에 사용할 셸 스크립트를 작성하고 Create Deployment 버튼을 누르면 배포 설정은 끝난다.
위의 화면에서 입력하는 스크립트 내용은 아래와 같다.
1 | npm install hexo-cli hexo-generator-sitemap --save # 필요한 hexo 의존성 설치 |
Build Triggers를 선택하여 master 브랜치의 빌드 트리거를 설정하고 Save Configuration을 클릭한다.
Environment를 선택하여 배포 스크립트에서 사용할 환경변수를 설정한다. 아래와 같이 3개의 환경변수를 설정하면 된다.
여기까지 설정했으면 기본적인 설정은 끝났다. 이제 실제로 Hexo 저장소의 master 브랜치에 푸시해보자.
Hexo 저장소에 푸시하여 CI/CD가 정상적으로 실행되는지 테스트하기
Hexo 저장소에 푸시를 하면 Codeship의 빌드 트리거가 실행되고 빌드 및 배포가 성공하면 아래와 같은 화면이 보인다.
배포가 정상적으로 됐는지 Github Pages에서 호스팅해주는 블로그로 들어가서 확인해보면 된다.
이렇게 하면 Hexo 저장소에 포스트를 추가한 커밋을 푸시하면 Codeship 빌드, 배포가 실행되어 정적 파일 저장소에 정적 파일들이 푸시되고, 그 내용대로 Github Pages에 호스팅되는 과정이 실행된다. 이렇게 바꿔보니 확실히 편한 점이 있어서 나처럼 Hexo 블로그를 로컬에서 수동으로 배포하고 있었던 분들에게는 적극 추천이다!