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

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

이 튜토리얼에서는 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이 대신 빌드하기 때문에 사이트를 빌드하지 마세요. 사실, public 폴더를 올리지 않는 것이 중요합니다. 이는 나중에 충돌을 일으킬 수 있습니다.

public 폴더를 제외하려면 .gitignore 파일을 만들고 public 폴더를 추가하면 됩니다.

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

echo "/public/" >> .gitignore

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

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

GitLab 프로젝트 만들기

지금까지 GitLab에서 Hugo 사이트를 위한 빈 프로젝트를 만들지 않았다면 만들어야 합니다.

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:  # 사이트를 빌드하고 테스트합니다
  script:
    - hugo
  rules:
    - if: $CI_COMMIT_BRANCH != $CI_DEFAULT_BRANCH

pages:  # 정적 사이트 생성을 위한 미리 정의된 작업입니다. 결과 페이지를 지정된 경로에 저장합니다.
  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이 사이트를 빌드하고 배포하는 것을 볼 수 있습니다.

왼쪽 탐색에서 빌드 > 파이프라인을 선택합니다.

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 파이프라인에 대해 알아보려면 컴플렉스 파이프라인 생성 방법에 대한 이 튜토리얼을 시도해보세요. 또한 사용 가능한 다양한 테스트 유형에 대해 더 알아볼 수 있습니다.