• 시작하기 전에
• Hugo 사이트 준비
• GitLab 프로젝트 생성
• Hugo 사이트를 GitLab에 푸시
• Hugo 사이트 빌드
  • 구성 옵션 추가
• Hugo 사이트를 배포하고 확인하기

튜토리얼: GitLab을 사용하여 Hugo 사이트를 빌드, 테스트 및 배포하기

이 튜토리얼에서는 CI/CD 파이프라인을 만들어 Hugo 사이트를 빌드, 테스트 및 배포하는 과정을 안내합니다.

튜토리얼이 끝나면 작동하는 파이프라인과 Hugo 사이트가 GitLab Pages에 배포된 것을 확인할 수 있을 것입니다.

다음은 할 일에 대한 개요입니다:

1. Hugo 사이트를 준비합니다.
2. GitLab 프로젝트를 생성합니다.
3. Hugo 사이트를 GitLab에 푸시합니다.
4. CI/CD 파이프라인으로 Hugo 사이트를 빌드합니다.
5. GitLab Pages에서 Hugo 사이트를 배포하고 확인합니다.

시작하기 전에

• GitLab.com에 계정이 필요합니다.
• Git을 잘 알고 있어야 합니다.
• Hugo 사이트가 있어야 합니다 (이미 사이트가 없는 경우 Hugo 빠른 시작를 따를 수 있습니다).

Hugo 사이트 준비

먼저 Hugo 사이트가 GitLab에 푸시할 준비가 되어 있는지 확인하세요. 콘텐츠, 테마 및 구성 파일이 필요합니다.

GitLab이 빌드를 담당하기 때문에 사이트를 빌드하지 않아도 됩니다. 실제로, public 폴더를 업로드하지 않는 것이 중요합니다. 이는 나중에 충돌을 일으킬 수 있기 때문입니다.

public 폴더를 배제하는 가장 쉬운 방법은 .gitignore 파일을 만들고 public 폴더를 추가하는 것입니다.

다음 명령을 Hugo 프로젝트의 최상위에 입력하여 이를 수행할 수 있습니다:

echo "/public/" >> .gitignore

이 명령은 /public/을 새 .gitignore 파일에 추가하거나 기존 파일에 추가합니다.

이제 GitLab 프로젝트를 생성한 후에 Hugo 사이트를 푸시할 준비가 되었습니다.

GitLab 프로젝트 생성

이전 단계에서 GitLab 프로젝트를 이미 만들지 않은 경우, Hugo 사이트용 빈 GitLab 프로젝트를 생성해야 합니다.

GitLab에서 빈 프로젝트를 만들려면:

1. 왼쪽 사이드바 상단에서 새로 만들기() 및 새 프로젝트/저장소를 선택합니다.
2. 빈 프로젝트 생성을 선택합니다.
3. 프로젝트 세부 정보 입력:
   • 프로젝트 이름 필드에 프로젝트 이름을 입력합니다. 이름은 소문자 또는 대문자 (a-zA-Z), 숫자 (0-9), 이모티콘, 또는 밑줄(_)로 시작해야 합니다. 또한 마침표(.), 더하기(+), 대시(-), 또는 공백을 포함할 수 있습니다.
   • 프로젝트 슬러그 필드에 프로젝트 경로를 입력합니다. GitLab 인스턴스는 슬러그를 프로젝트의 URL 경로로 사용합니다. 슬러그를 변경하려면 먼저 프로젝트 이름을 입력한 다음 슬러그를 변경하세요.
   • 가시성 레벨은 개인 또는 공개 중 하나를 선택할 수 있습니다. 개인을 선택하면 웹 사이트는 여전히 공개적으로 이용할 수 있지만 코드는 비공개로 유지됩니다.
   • 기존 저장소를 푸시하는 경우, README로 저장소 초기화 상자를 선택 해제합니다.
4. 준비가 되면 프로젝트 만들기를 선택합니다.
5. 이 새 프로젝트로 코드를 푸시하는 방법에 대한 지침이 표시됩니다. 다음 단계에서 이러한 지침이 필요합니다.

이제 Hugo 사이트의 홈이 생겼습니다!

Hugo 사이트를 GitLab에 푸시

이제 로컬 Hugo 사이트를 원격 GitLab 프로젝트에 푸시해야 합니다.

이전 단계에서 새 GitLab 프로젝트를 만든 경우, 저장소를 초기화하고 파일을 커밋하고 푸시하는 방법에 대한 지침이 표시됩니다.

그렇지 않은 경우, 로컬 Git 저장소의 원격 원본이 GitLab 프로젝트와 일치하는지 확인하세요.

기본 브랜치가 main인 경우 다음 명령으로 Hugo 사이트를 푸시할 수 있습니다:

git push origin main

사이트를 푸시한 후에 public 폴더를 제외한 모든 콘텐츠가 표시됩니다. .gitignore 파일에 의해 public 폴더가 제외되었습니다.

다음으로, CI/CD 파이프라인을 사용하여 사이트를 빌드하고 해당 public 폴더를 다시 만들어야 합니다.

Hugo 사이트 빌드

GitLab에서 Hugo 사이트를 빌드하려면 먼저 .gitlab-ci.yml 파일을 만들어야 합니다. 이 파일에는 CI/CD 파이프라인에 대한 지침이 포함되어 있습니다. 이전에 이 작업을 수행한 적이 없다면 놀랄 수 있습니다. 그러나 GitLab이 필요한 모든 것을 제공합니다.

구성 옵션 추가

.gitlab-ci.yml이라는 특수한 파일에 구성 옵션을 지정합니다. .gitlab-ci.yml 파일을 만들려면:

1. 왼쪽 사이드바에서 코드 > 저장소를 선택합니다.
2. 파일 목록 위에서 플러스 아이콘 ( + )을 선택한 후 드롭다운 목록에서 새 파일을 선택합니다.
3. 파일 이름으로 .gitlab-ci.yml을 입력합니다. 처음에 마침표를 빼먹지 않도록 주의하세요.
4. 템플릿 적용 드롭다운 목록을 선택한 후 “Hugo”를 필터 상자에 입력합니다.
5. 결과 항목 Hugo를 선택하면 CI/CD를 사용하여 Hugo 사이트를 빌드하는 데 필요한 모든 코드가 파일에 입력됩니다.

이 .gitlab-ci.yml 파일에서 무엇이 발생하는지 자세히 살펴보죠.

default:
  image: "${CI_TEMPLATE_REGISTRY_HOST}/pages/hugo:latest"

variables:
  GIT_SUBMODULE_STRATEGY: recursive

test:  # builds and tests your site
  script:
    - hugo
  rules:
    - if: $CI_COMMIT_BRANCH != $CI_DEFAULT_BRANCH

pages:  # a predefined job that builds your pages and saves them to the specified path.
  script:
    - hugo
  artifacts:
    paths:
      - public
  rules:
    - if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH
  environment: production

• image는 Hugo를 포함하는 GitLab 레지스트리에서 가져온 이미지를 지정합니다. 이 이미지는 사이트를 빌드하는 환경을 만드는 데 사용됩니다.
• GIT_SUBMODULE_STRATEGY 변수는 Hugo 테마에 사용되는 경우가 있는 Git 서브모듈도 GitLab이 확인하도록 합니다.
• test은 사이트를 배포하기 전에 Hugo 사이트에서 테스트를 실행할 수 있는 작업입니다. 이 테스트 작업은 기본 브랜치에 변경 사항을 커밋하지 않는 경우를 제외하고 모든 경우에 실행됩니다. script 아래에 명령을 입력합니다. 이 작업의 명령인 hugo는 사이트를 빌드하여 테스트할 수 있습니다.
• pages는 정적 사이트 생성기로부터 페이지를 빌드하는 미리 정의된 작업입니다. 이 작업은 다시 hugo 명령을 실행하여 사이트를 빌드합니다. 그런 다음 artifacts는 생성된 페이지를 public이라는 디렉토리에 추가하도록 지정합니다. rules에서는이 커밋이 기본 브랜치에서 이루어졌는지 확인합니다. 일반적으로 기능 브랜치에서 라이브 사이트를 빌드하고 배포하지 않는 것이 좋습니다.

이 파일에 다른 내용을 추가할 필요는 없습니다. 준비가 되면 페이지 하단의 변경 사항 커밋을 선택하세요.

이제 Hugo 사이트를 빌드하기 위한 파이프라인을 트리거했습니다!

Hugo 사이트를 배포하고 확인하기

빠르게 진행하면 GitLab이 사이트를 빌드하고 배포하는 것을 볼 수 있습니다.

왼쪽 탐색 메뉴에서 Build > 파이프라인을 선택합니다.

GitLab이 test 및 pages 작업을 실행했음을 확인할 수 있습니다.

사이트를 확인하려면 왼쪽 탐색 메뉴에서 Settings > Pages를 선택합니다.

파이프라인의 pages 작업은 public 디렉토리의 내용을 GitLab Pages로 배포했습니다. 페이지에 액세스 아래에서 링크를 다음 형식으로 볼 수 있어야 합니다: https://<your-namespace>.gitlab.io/<project-path>.

아직 파이프라인을 실행하지 않은 경우에는 이 링크를 볼 수 없습니다.

표시된 링크를 선택하여 사이트를 확인합니다.

Hugo 사이트를 처음으로 확인할 때 스타일시트가 작동하지 않을 것입니다. 걱정하지 마세요. Hugo 구성 파일에 작은 변경을 해야 합니다. Hugo는 GitLab Pages 사이트의 URL을 알아야 스타일시트 및 기타 에셋에 대한 상대적 링크를 생성할 수 있습니다:

1. 로컬 Hugo 사이트에서 config.yaml 또는 config.toml 파일을 엽니다.
2. BaseURL 매개변수의 값을 GitLab Pages 설정에 나타나는 URL과 일치하도록 수정합니다.
3. 수정한 파일을 GitLab에 푸시하면 파이프라인이 다시 트리거됩니다.

파이프라인이 완료되면 방금 지정한 URL에서 사이트가 작동해야 합니다.

만약 Hugo 사이트가 비공개 저장소에 저장되어 있다면, 페이지 사이트가 표시되도록 권한을 변경해야 합니다. 그렇지 않으면 권한이 있는 사용자만 볼 수 있습니다. 권한을 변경하려면:

1. Settings > General > 가시성, 프로젝트 기능, 권한으로 이동합니다.
2. 아래로 스크롤하여 페이지 섹션으로 이동한 후 드롭다운 목록에서 Everyone을 선택합니다.
3. 변경 사항 저장을 선택합니다.

이제 누구나 볼 수 있습니다.

GitLab을 사용하여 Hugo 사이트를 빌드, 테스트 및 배포했습니다. 훌륭한 작업입니다!

사이트를 변경하고 GitLab에 푸시할 때마다 사이트가 자동으로 빌드, 테스트 및 배포됩니다.

더 많은 정보를 알아보려면 이 복잡한 파이프라인을 만드는 방법에 대한 튜토리얼을 확인해보세요. 또한 사용 가능한 다양한 유형의 테스트에 대해 더 알아보세요.