Tech Stock logo Tech Stock

기존에 Hugo + Github + Netlify조합으로 만들어 뒀던 사이트가 하나 있었는데

Netlify같은 경우는 무료 호스팅 업체로써 Github와 연동도 되고,
사용하기도 무척 편리한 장점이 있지만…

TTFB(Time to First Byte)가 많이 떨어지는
즉, 처음 사이트 접속하고 페이지가 로딩 되기까지의 시간이 꾀나 걸린다.

속도가 생명인 웹에서는 절대로!! 절대로 !! 용납 불가능 하다.

그래서 생각한것이
호스팅을 Github Pages로 쓰자는 것이였고,
(깃헙페이지의 TTFB는 양호한 편이다)
공부도 할겸 CircleCI를 조합해서 Github 리포지토리에 CI/CD하게끔 하는 것이였다.

대략적인 처리의 흐름은 다음과 같다.

Hugo소스 리포지토리 + CircleCI 연동
Hugo소스 리포지토리에 변경점이 있으면(push시에) CircleCI가 이를 감지한다
CircleCI는 Docker 1컨테이너 로 작동하며, Hugo소스 리포지토리의 내용을 땡겨와서 빌드하고
빌드된 파일만을 GithubPages(깃헙페이지용 리포지토리)에 푸쉬(디플로이)한다.


연동하고 싶은 리포지토리의 루트 밑에

.circleci

라는 디렉토리를 생성해주고

config.yml

파일을 생성하여 작성해준다.

그리고 config.yml의 내용은 다음과 같이 작성한다.


version: 2.1
jobs:
  build:
    docker:
      - image: cibuilds/hugo:latest
        environment:
          TZ: Asia/Tokyo
    steps:
      - checkout
      - add_ssh_keys:
           fingerprints:
             - "your fingerprints"
      - run:
          name: "Directory check"
          command: ls -al
      - run:
          name: "Build from source"
          command:  |
             cd exampleSite
             hugo --themesDir ../..
      - deploy:
          name: Deploy to Github Pages
          command:   |
             cd exampleSite/public
             git config --global user.email "your email"
             git config --global user.name "your username"
             git init
             git remote add origin https://github.com/your-repository.git
             git add .
             msg="Updated: `date +'%Y-%m-%d %H:%M:%S'`"
             git commit -m "$msg"
             git push -f origin master


도커 이미지의 image: cibuilds/hugo:latest부분은. 특정 버전을 사용시엔 hugo:0.60 이런식으로 적는다.
environment: TZ: Asia/Tokyo 가 없으면 Push시의 시간대가 미국기준으로 잡히니 주의
핑거 프린트는 CircleCI의 프로젝트 셋팅 -> SSH Keys -> User Key 로 지정해줘야 한다.

이것은 가장 쉬운 기본중의 기본편이다.
병렬처리나 workflow작성은 조금더 복잡하다.
다음번에 workflow작성을 포스팅 하기로..