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

튜토리얼: Hugo 사이트를 GitLab으로 빌드, 테스트, 배포하기

이 튜토리얼에서는 CI/CD 파이프라인을 생성하여 Hugo 사이트를 빌드, 테스트, 배포하는 방법을 안내합니다.

튜토리얼이 끝나면 작동하는 파이프라인과 GitLab Pages에 배포된 Hugo 사이트를 갖게 될 것입니다.

다음은 여러분이 할 작업입니다:

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

시작하기 전에

• GitLab.com 계정이 필요합니다.
• Git에 익숙해야 합니다.
• Hugo 사이트(이미 갖고 있지 않은 경우 Hugo 빠른 시작를 따를 수 있습니다).

Hugo 사이트 준비하기

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

GitLab에서 사이트를 빌드하지 마세요. 실제로 GitLab이 대신 빌드해줍니다. 사실, public 폴더를 업로드하지 않는 것이 중요합니다. 나중에 충돌을 일으킬 수 있기 때문입니다.

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

다음 명령어로 Hugo 프로젝트의 최상위 수준에서 이를 수행할 수 있습니다:

echo "/public/" >> .gitignore

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

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

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 결과를 선택하면 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 작업을 실행했음을 확인할 수 있습니다.

사이트를 보려면 왼쪽 탐색에서 설정 > 페이지를 선택합니다.

파이프라인의 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. 설정 > 일반 > 가시성, 프로젝트 기능, 권한으로 이동합니다.
2. 아래로 스크롤하여 페이지 섹션을 찾고 드롭다운 디렉터리에서 모두를 선택합니다.
3. 변경 사항 저장을 선택합니다.

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

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

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

CI/CD 파이프라인에 대해 자세히 알아보려면 이 복잡한 파이프라인을 생성하는 방법에 대한 자습서를 참조해보세요. 또한 사용 가능한 다양한 유형의 테스트에 대해 더 알아보세요.