Hugo GitHub TravisCI 설정 - 웹사이트 블로그 자동 배포하기

Hugo GitHub TravisCI 설정으로 블로그 자동 배포하기

휴고 블로그 플랫폼으로 개인 블로그를 사용하는 경우,

매번 생성된 결과물을 Git 을 통해서 저장소로 push 하는 것이 쉬운 일은 아니다.

 

이럴 때 사용하는 것이, Travis CI, Circle CI, GitHub Action 등의 툴을 활용하면 된다.

즉, 문서의 변경이나 새로운 글을 추가하는 등의 commit 이 발생할 때 마다 자동으로 hugo 플랫폼 엔진으로 정적 사이트 파일을 생성하고, 원하는 저장 공간으로 업로드를 자동으로 수행하게 되므로, 사용자는 단순히 블로그 글에만 신경 쓰면 된다.

 

이론적인 내용이야 찾아보면 많이 있다. 더 자세히 잘 적어놓은 글을 참고하는 것이 좋다.

그냥 여기는 실제로 동작하는 결과물을 저장해 두고, (최적화 된 것은 아니지만, 동작은 한다 ^^;;;;)

만약 필요한 분들은 소스레벨을 크게 분석하지 말고 Fork 기능을 통해 가져가서 손쉽게 자신의 정보 정도만 바꿔서 사용하면 좋을 듯 하다. 

 

완성된 GitHub 주소는 아래와 같다.

https://github.com/bjnhur/docsy

구글 Docsy 라는 Hugo theme 을 적용한 예이다.

이 테마는 하필 Hugo extended 기능을 사용하고 있으므로, extended 패키지를 잘 활용해야 한다. 

 

자동 배포의 가장 중요한 파일은 .travis.yml 파일과 deploy.sh 파일이다.

---

여기서 등장하는 Travis CI 에 대한 내용은 아래 블로그글을 참고하면 되겠다.
[GIT] CI(continuous Integration)란 & travis 사용법

[GIT] CI(continuous Integration)란 & travis 사용법

DevOps Service: Travis CI

DevOps Service: Travis CI

---

(아차 낭패다!! 사실 성공이 안될 것 같아 테스트 삼아 막 붙여 쓰긴 했는데 막상 되고 보니 어디에서 참고했는지 레퍼런스를 찾을수 없네 ㅜㅜ 정보를 주신 인터넷상의 모든 분들께 감사~~~~~)

여러가지 방법이 검색을 하면 많이 나오니, 잘 정제한 버전을 찾아 사용하시고, 혹시 어려우면 이것 저것 해보다가 완성된 버전이니 아래 코드를 참고만 하시길.

https://gist.github.com/bjnhur/24b473d03659a6fb342994b060ed1279#file-travis-yml

.travis.yml

가상머신이 기동되면,

Hugo 최신 패키지 가져와서 설치하고,

npm install 해서 관련 패키지 설치하고,

Hugo 실행하여, 배포할 파일을 생성시키고, 

아래에 있는 deploy.sh 파일을 실행하여 원하는 공간으로 배포하면 끝나게 구성되어 있다.

https://gist.github.com/bjnhur/7a16136c2ea0a5d2701b63a310591a36

deploy.sh

여기 스크립트의 핵심은 public 에 생성되어 있은 웹 페이지들을 딱 가져와서

원하는 저장공간으로 업로드 시키면 끝나도록 shell script로 간단하게 구성되어 있다.

실제로 동작은 master 브랜치 내용에서 Hugo 엔진을 통해 생성된 public 폴더의 내용만 가져와서 gh-pages 브랜치로 내보내기 하여, GitHub Pages 에 의해서 보여지도록 구성되어 있다. 

 

브랜치를 접근하기 위해서는 보안키을 등록해야 한다. 아래 그림 참고 (출처 : [Blogging] Hugo 로 GitHub 블로그 시작하기 - 5. Travis CI 연동)

• GitHub 화면은 Settings - Developer settings - Personal access tokens 화면이다.
• Travis-ci.org 화면은 자기계정/repo/settings 화면에서 등록할 수 있다.

GitHub 접근 키 등록 in travis CI

 

크게 어려운 스크립트들은 아니니, 그냥 막 쓰며 되겄다.

성공 결과만 캡쳐해서 보관.

Travis CI 빌드 성공

---

뒤늦게 나마, 관련 검색글들 몇개를 아래에 모아둔다. 찾으면 업데이트 해 두자.

TRAVIS CI 를 이용해서 HUGO 기반 웹사이트 배포 하기 - https://ironpark.github.io/2017/12/17/hugo-site-deploy-use-travis-ci/
[Blogging] Hugo 로 GitHub 블로그 시작하기 - 5. Travis CI 연동
GitHub Actions로 Hugo 블로그 배포하기 - https://codefict.dev/posts/2019/12/hugo-github-actions/
Hugo on GitHub Pages with Travis CI - https://www.sidorenko.io/post/2018/12/hugo-on-github-pages-with-travis-ci/
https://github.com/dariubs/parsaspace-hugo-travis
https://cjolowicz.github.io/posts/hosting-a-hugo-blog-on-github-pages-with-travis-ci/

하나 더, 프로젝트 Readme.md 파일에 보면 많은 배지들이 주렁주렁 달린 것이 보인다. 기왕 TravisCI를 활용하고 있으니까, 빌드 상태를 나타내는 배지 정도는 올려두면 좋지 않을까?

자세한 입력 방법은 아래글만 보면 할 수 있다.

GitHub 에 project status badge 달기 - 정광섭