Git 연동과 정적 페이지 배포

도입

이전 포스팅 참조 : 개발 블로그의 종류와 선택 > SSG에 대하여 > HUGO 기본 설치 및 사용법

지난 시간에 Hugo설치 및 간단한 사용법을 알아보았습니다. 이번에는 깃과 연동하여 버전관리 및 깃허브 페이지에 블로그를 띄워보겠습니다.

이 포스팅은 Git이 설치되어 있는 것을 전제로 합니다. 혹시 Git이 설치되지 않은 분들은 설치 후 진행해주세요.

블로그 디렉터리와 Git 연결하기

먼저 지난 시간에 생성한 디렉터리를 Git에 등록해야 합니다. 대부분 Git에 익숙하시겠지만, 아직 어려우신 분들을 위해 자세히 설명드리겠습니다.

블로그 레포지토리 생성

• Git에 특정 디렉터리를 올려 버전관리를 하기 위해서는 레포지토리를 생성해야 합니다.

이제 깃허브에 블로그 레포지토리가 생성되었습니다.

블로그 레포지토리 연결

• 새로 생성한 레포지토리에 저번에 생성한 블로그 디렉터리를 연결합니다.
• 우선 git bash 혹은 zsh등의 쉘에서 ‘cd {디렉터리 경로}’ 명령어를 통해 블로그의 최상위 디렉터리로 이동합니다.

  

• 다음 명령어를 통해 블로그 원격 레포지토리에 커밋합니다.

# 새로운 로컬 레포지토리 생성
$ git init

# 원격 레포지토리 연결 : 원격 레포지토리 주소는 새로 생성된 레포지토리에 있습니다.(하단 이미지 참조)
$ git remote add origin {원격 레포지토리 주소}

# 로컬 브랜치 이름 변경(깃허브는 최초 브랜치가 main이고 깃은 master여서 이름을 main으로 변경해야 합니다.)
$ git branch -m main

# 로컬 레포지토리(블로그 디렉터리) → 원격 레포지토리로 커밋
$ git add .
$ git commit -m "first commit"
$ git push -u origin main

이제 블로그 디렉터리와 레포지토리가 연결되어 변경사항을 커밋하면 깃허브에 저장할 수 있습니다.

배포용 레포지토리 생성하기

블로그 레포지토리를 성공적으로 등록하였으니, 이제 배포용 레포지토리를 생성해야 합니다.

이렇게 두 개의 레포지토리를 두는 이유는 다음과 같습니다.

1. Hugo로 빌드한 페이지를 별도의 레포지토리에서 관리하여 블로그 디렉터리와 소스코드 분리
2. 깃허브 계정의 정적페이지 주소와 동일한 이름의 레포지토리를 사용하여 메인 페이지 경로 단일화¹

그럼 배포용 레포지토리를 생성해서 연결해보겠습니다.

배포용 레포지토리 생성

• 본인의 깃허브 페이지 주소와 동일한 레포지토리를 생성합니다.
• 위의 블로그 레포지토리 생성과 동일한 절차로 생성하되, 이름을 아래와 같이 설정하시면 됩니다.

# 본인 깃허브 페이지 주소 : https://{본인 깃허브 계정명}.github.io
{본인 깃허브 계정명}.github.io

배포용 레포지토리가 생성되었습니다.

블로그 레포지토리와 연결

• 새로 생성한 배포용 레포지토리는 블로그 레포지토리 내부의 public 경로에 submodule로 등록해야 합니다.
• 이렇게 등록 후 블로그 레포지토리에서 새로 페이지를 작성하면, 자동으로 배포용 레포지토리 내부 파일의 변경사항으로 잡히기 때문에 편하게 관리할 수 있습니다.
• submodule로 등록 및 확인하는 명령어는 다음과 같습니다.

# git submodule add {서브모듈 레포지토리 주소} public
$ git submodule add https://github.com/leaf-nam/leaf-nam.github.io.git public

# 제대로 등록되었는지 확인해보려면, 아래 명령어를 실행합니다.
$ git submodule
# +72759664014b7a27ad069a24aa876836605e2d51 public (heads/main)

이제 배포용 레포지토리가 서브모듈로 등록되어 배포할 준비를 마쳤습니다.

정적 사이트 배포하기

생성된 배포용 레포지토리에 정적파일들을 업로드 후 Github Pages를 사용하여 배포하겠습니다.

배포용 레포지토리에 정적파일 업로드

• git bash를 실행하여 블로그 레포지토리에서 정적파일들을 빌드합니다.

# 블로그 레포지토리 메인 경로로 이동합니다.
$ cd {블로그 레포지토리 경로}

# 정적파일을 빌드합니다.
$ hugo
#Start building sites …
#hugo v0.123.4-21a41003c4633b142ac565c52da22924dc30637a+extended #darwin/arm64 BuildDate=2024-02-26T16:33:05Z VendorInfo=brew
#                   | KO
#-------------------+-----
#  Pages            | 67
#  Paginator pages  |  0
#  Non-page files   | 26
#  Static files     |  0
#  Processed images | 12
#  Aliases          | 25
#  Cleaned          |  0

• 배포용 레포지토리로 이동 후 해당파일들을 커밋합니다.

# 배포용 레포지토리로 이동합니다.
$ cd public

# 해당 파일들을 커밋합니다.
$ git add .
$ git commit -m "blog 업로드"
$ git push origin main

이제 깃허브에 있는 레포지토리에 저희가 생성한 블로그 정적파일들이 업로드되었습니다.

Github Pages 설정

• 배포용 레포지토리에 들어가서 다음 절차를 통해 Github Pages를 배포합니다.

해당페이지로 들어가면 정상적으로 블로그가 배포됨을 확인할 수 있습니다.

결론

지금까지 블로그 페이지를 깃허브와 연동하고 Git Pages를 사용하여 배포까지 완료했습니다. 깃 사용이 익숙하신 분들이라면 금방 적용하셨을 것이라고 생각합니다.

직접 EC2와 같은 서버에 빌드해보신 분들이라면 아시겠지만, 별다른 세팅 없이 본인의 페이지를 빌드해서 즉시 웹에 게시할 수 있다는 점이 Git Pages의 강력한 점인 것 같습니다.

이제 블로그 배포까지 완료했으니, 다음 포스팅에서는 다른 사용자와 소통할 수 있는 댓글 기능을 utterances 라이브러리를 사용해 연결해보겠습니다.

References