GitLab Pages와 Hugo로 블로그 만들기

엔지니어들에게 문서 작업이란 결코 때어낼 수 없는 영역입니다. 문서를 정리하는 것 뿐만 아니라 작업을 어떻게 마무리 지었는지에 대한 개인 일지를 기록하기 위해 블로그를 이용하기도 합니다. 이 포스트에서는 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 프로젝트 생성

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 블로그 테마 적용

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

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

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

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

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

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

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

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

6. .gitlab-ci.yml 작성

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

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가 돌아가는 것을 확인할 수 있습니다.

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

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

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

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

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

마치며

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