엔지니어들에게 문서 작업이란 결코 때어낼 수 없는 영역입니다. 문서를 정리하는 것 뿐만 아니라 작업을 어떻게 마무리 지었는지에 대한 개인 일지를 기록하기 위해 블로그를 이용하기도 합니다. 이 포스트에서는 GitLab Pages와 Hugo로 무료 블로그를 개설하고 글을 작성하기까지 과정을 정리하였습니다.

GitLab Pages 란?​

GitLab Pages를 사용하면 GitLab 저장소에 있는 내용을 정적 웹사이트로 게시할 수 있습니다.

여기서는 GitLab에서 제공하는 gitlab.io가 포함된 주소를 사용하지만 사용자가 호스팅 받은 주소로 연결 시킬 수도 있습니다.

GitLab Pages를 사용하기 위해서는 .gitlab-ci.yml에 pages라는 이름의 작업(job)을 만들고 artifacts의 path에 빌드 경로를 입력하면 됩니다. 이 작업은 아래에서 더 자세히 다루겠습니다.

블로그 만들기​

GitLab Pages는 일반 HTML, CSS 및 JavaScript로 직접 작성된 웹사이트 뿐만 아니라 Gatsby, Jekyll, Hugo, Middleman, Harp, Hexo 및 Brunch와 같은 SSG (Static Site Generator)를 사용할 수 있습니다.

여기서는 Hugo를 사용해 블로그를 만들겠습니다.

1. GitLab 프로젝트 생성​

photo | 인포그랩 GitLab | 인��포그랩 GitLab

GitLab Pages 를 사용하기 위해 먼저 'hugo-blog'라는 이름의 GitLab 프로젝트를 생성하겠습니다.

(비공개 블로그를 원하면 하단의 Visibility Level를 Private으로 선택해야 합니다.)

2. Hugo 설치​

맥에서는 Homebrew가 설치되어 있다면 다음 명령어로 Hugo를 설치 할 수 있습니다.

brew install hugo

도커 또는 윈도우 설치 방법은 여기를 참고하세요.

3. Hugo 사이트 생성​

다음의 명령어를 이용해 blog라는 이름의 휴고 사이트를 생성하겠습니다.

hugo new site blog

작업이 완료되면 'blog'라는 이름의 디렉토리를 생성합니다.

4. GitLab 저장소 연결​

다음의 명령어로 생성한 'blog' 디렉토리와 위에서 생성한 GitLab 프로젝트의 저장소를 연결시키겠습니다.

cd blog
git init
git remote add origin git@gitlab.com:infograb/hugo-blog.git

'git submodule' 명령을 이용하여 Hugo 테마를 설치하려면 'git init'을 반드시 먼저 수행해야 합니다.

5. Hugo 블로그 테마 적용​

photo | 인포그랩 GitLab | 인포그랩 GitLab

Hugo Themes에는 여러가지 블로그 테마가 있습니다. 여기서는 'harbor' 테마를 적용시켜보겠습니다.

테마 페이지에 들어가면 다음과 같이 설치 명령어와 사용법에 대한 설명이 들어 있습니다.

photo | 인포그랩 GitLab | 인포그랩 GitLab

다음 명령으로 테마를 설치 합니다.

cd themes
git submodule add https://github.com/matsuyoshi30/harbor.git harbor

테마가 설치되었다면 테마를 적용시키기 위해서 루트 폴더에 있는 config.toml에 theme 값을 수정해야 합니다.

harbor 테마 사용법 설명에서 'config.toml example' 에 있는 내용을 다음과 같이 그대로 붙여 넣겠습니다.

photo | 인포그랩 GitLab | 인포그랩 GitLab

그리고 baseurl 값을 자신의 GitLab Pages의 주소로 변경합니다.

(Gitlab Pages의 주소는 보통 '그룹명.gitlab.io/프로젝트명'의 주소 형태를 갖습니다.)

photo | 인포그랩 GitLab | 인포그랩 GitLab

6. .gitlab-ci.yml 작성​

GitLab Pages로 블로그를 배포하기 위해서는 다음과 같이 루트 디렉토리에 .gitlab-ci.yml파일을 생성하고 내용을 입력합니다.

photo | 인포그랩 GitLab | 인포그랩 GitLab
image: monachus/hugo
variables:
  GIT_SUBMODULE_STRATEGY: recursive
pages:
  script:
    - hugo
  artifacts:
    paths:
      - public
  only:
    - master

pages 작업 내용을 간단히 살펴 보면 다음과 같습니다.

  • script: 'hugo' 명령으로 빌드 실행
  • artifacts: public 디렉토리 안의 내용을 artifacts로 사용
  • only: master 브랜치에 푸쉬 되었을 때만 동작

7. GitLab Pages 게시​

다음의 명령을 실행하여 로컬에서 작업한 내용을 GitLab 프로젝트의 저장소에 커밋겠습니다.

git add .
git commit -m "Initial commit"
git push -u origin master

GitLab 프로젝트에서 CI/CD > Pipelines 메뉴에 들어가면 작성한 CI가 돌아가는 것을 확인할 수 있습니다.

photo | 인포그랩 GitLab | 인포그랩 GitLab

파이프라인이 완료되면 Settings > Pages 메뉴에서 생성된 페이지 링크를 확인 할 수 있습니다.

(처음 GitLab Pages로 배포할 경우 작업이 30분 정도 소요 됩니다.)

photo | 인포그랩 GitLab | 인포그랩 GitLab

30분 이후 해당 URL로 접속하면 다음과 같이 Hugo 블로그가 배포된것을 확인할 수 있습니다.

photo | 인포그랩 GitLab | 인포그랩 GitLab

8. 첫 글 포스트​

다음의 명령을 실행하여 content/post 디렉토리에 '첫번째 포스트'라는 제목의 빈 포스트를 생성하겠습니다.

hugo new post/첫번째-포스트.md

생성된 content/post/첫번째-포스트.md 마크다운 파일을 다음과 같이 수정합니다.

---
title: '첫번째 포스트'
date: 2021-04-15T19:21:08+09:00
draft: false
disable_comments: true
---

# 내용

첫번째 포스트 입니다.

다음의 명령을 실행하여 포스트를 블로그에 업로드 합니다.

git add .
git commit -m "my first post"
git push

블로그에 포스트가 업데이트된 것을 확인할 수 있습니다.

photo | 인포그랩 GitLab | 인포그랩 GitLab

마치며​

GitLab Pages에 Hugo 블로그를 게시하고 첫 글 작성까지의 과정을 알아보았습니다. 이 포스트의 내용 또는 GitLab Pages에 대한 질문이 있다면 댓글 또는 문의하기 를 통해 문의해 주시기 바랍니다.