JavaScript

Hugo 로 Github 페이지 블로그 만들기

dev_roach 2023. 8. 16. 07:13
728x90

Hugo와 Github 페이지 통합하기

Hugo는 가장 인기 있는 오픈 소스 정적 사이트 생성기 중 하나입니다. 로컬에 hugo를 쉽게 설치하고 정적 사이트를 Github 페이지에 배포할 수 있습니다.

로컬에 Hugo 설치하기

설치로 바로 들어가기 전에 Mac OS에 설치하는 방법에 대해서만 다루겠습니다. Windows나 Linux에서 설치하는 방법은 공식 문서를 참조하세요.

brew install hugo

hugo 설치가 완료되었다면 다음 단계로 넘어갑니다.

Github에 배포용 저장소 만들기

Github에는 두 개의 저장소를 만들어야 합니다. 하나는 블로그의 글과 스킨을 관리하는 ** 쪽 이고, 다른 하나는 **사이트 배포 용입니다. 그래서 두 저장소를 관리하기 위해 submodule을 사용해야 합니다.

하나의 이름은 '사용자이름.github.io' 여야 하며, 이로써 Github 페이지 저장소임을 나타냅니다. 다른 하나의 이름은 원하는 대로 설정하면 됩니다. 아래와 같이 저장소를 만들어주세요.

위의 저장소는 정적 사이트를 배포하는 데 사용됩니다. 그러므로 해당 저장소에는 아무 것도 작성할 필요가 없습니다.

블로그용 저장소 만들기

위에서 만든 저장소는 블로그의 글을 관리하는 데 사용됩니다. 따라서 이 저장소에 글을 작성해야 합니다. 여기서는 'hugo-theme' 이라는 블로그 저장소를 만들겠습니다. 아무 이름으로 만들어도 괜찮습니다.

좋아요! 두 개의 저장소를 만들었으니 다음 단계로 넘어갑시다.

Hugo 블로그 디렉토리 만들기

이 단계에서는 Hugo 블로그 디렉토리를 만들어보겠습니다. 아래 단계를 따라하세요.

  1. 블로그 디렉토리를 만들고자 하는 위치로 이동합니다.
  2. 만든 디렉토리로 이동하고 아래 명령을 실행합니다.
hugo new site <블로그 이름>
# 'blog'라는 디렉토리를 만들고 아래 명령을 실행했습니다.
# hugo new site blog
  1. blog 디렉토리로 이동합니다.
cd blog

  4. 테마를 적용하려면 아래 명령을 실행합니다. 이 튜토리얼에서는 hugo-theme-terminal 을 사용합니다. 다른 테마를 사용하려면 이곳을 참조하세요. Hugo에 테마를 적용하는 방법은 각 테마의 README.md에서 쉽게 찾아볼 수 있습니다.

git init
git submodule add -f https://github.com/panr/hugo-theme-terminal.git themes/terminal

  5. 웹 사이트에서 설정 파일을 복사합니다. 필요한 경우 hugo-theme-terminal을 사용하려면 여기에서 설정 파일을 복사할 수 있습니

  6. 로컬에서 테스트합니다.

# hugo server -t {테마 이름} (테마의 README.md에 쓰여 있는 규칙을 따라야 합니다)
hugo server -t terminal

  7. http://localhost:1313 으로 이동하여 확인합니다.

블로그 저장소를 서브모듈로 연결하기

블로그 저장소를 서브모듈로 연결하기 전에 한 가지 알아야 할 점이 있습니다. hugo의 빌드 결과물은 public 디렉토리에 포장되어 있습니다. 따라서 블로그 저장소를 public 디렉토리의 서브모듈로 연결해야 합니다.

  1. 블로그 저장소를 서브모듈로 연결합니다. (아래 링크를 자신의 블로그 저장소 링크로 바꾸어야 합니다)
git submodule add -b main https://github.com/당신의계정/당신의계정.github.io.git public
  1. Hugo 블로그를 빌드합니다.
hugo -t terminal
  1. public 디렉토리로 이동하여 push합니다.
cd public
git add .
git commit -m "초기 커밋"
git push origin main
  1. 자신의 저장소로 이동하여 Actions 메뉴를 확인합니다. 빌드 결과를 볼 수 있습니다.

블로그 사이트로 이동해보세요! 결과를 확인할 수 있습니다.

자동 배포용 쉘 스크립트 만들기

블로그를 자동으로 배포하려면 shell 스크립트를 사용할 수 있습니다. 자동 배포용 쉘 스크립트를 만드는 방법을 보여드리겠습니다.

#!/bin/bash

# 1. hugo로 프로젝트 빌드
hugo -t terminal

# 2. Public 폴더로 이동
cd public

# 3. 변경 사항을 git에 추가
git add .

# 4. 변경 사항을 커밋
msg="사이트 다시 빌드하기 $(date)"

# 5. 소스와 빌드 저장소를 푸시
git commit -m "$msg"
git push origin main

if [ $# -eq 1 ]
  then msg="$1"
fi

끝마치며

이 튜토리얼에서는 Hugo를 Github 페이지와 통합하는 방법을 보여드렸습니다. 질문이 있으면 아래에 댓글을 남겨주세요. 제 글을 읽어주셔서 감사합니다. 좋은 하루 보내세요!

저작자표시