[HUGO] Github 연동하기

개요

HUGO 를 사용하여 SSG (Static Site Generators) 를 운영하는 대표적인 방법 중 하나는 github 저장소 를 이용하는 것입니다.
github 를 통하여 서비스 시 별도의 비용도 발생하지 않고 다양한 플러그인들 지원을 통해 여러가지 기능을 손쉽게 적용 할 수 있는 장점이 있습니다.

아래는 HUGO 를 통해 github 에 게시글을 작성하고 노출 시키는방법에 대해 설명해 보고자 합니다.

 

git repository 생성

---

• 먼저 github 에 가입 후 아래와 같이 2개의 repository 를 생성하도록 합니다.

  • 작업저장소 ( 게시글을 작성하고 저장할 저장소이며 실제 노출되는 저장소는 아님)

    → github.com/my-account/content-storage

  • 호스팅저장소 (작업저장소에서 작성 된 게시글을 실제 사용자들이 볼 수 있는 저장소)

    → content-hosting.github.io

> 작업저장소 및 호스팅저장소 생성 후 로컬에서 푸쉬할 때 인증을 위해 token 을 미리 발급한다.
토큰은 [github.co](http://github.co)m 에 로그인 후 우측 상단의 프로필 > settings > Developer Settings > Personal access tokens 메뉴에서 **Create new token** 버튼을통해 생성 할 수 있으며 권한은 **repo** 정도로만주고 진행한다.
> 

> *github 의 계정설정에서 (우측 상단 프로필 > Settings > Repositories > Repository default branch) 가 기본으로 main 으로 되어 있다면 master 로 변경한다.*
> 

> 호스팅저장소는 저장소 생성 시 [readme.md](http://readme.md) 파일을 생성하도록 한다. 그렇지 않으면 서브모듈로 추가 시 master 저장소가 비어서 정상적으로 연결되지 않을 수 있다
> 

 

저장소 연결하기

---

 
이 글에 앞서 저는 hugo new site my-site 로 생성하였기 때문에 수행 경로를 hugo/my-site 라 칭하겠습니다.

작업저장소 연결하기

수행 경로: hugo/my-site

# git 초기화
git init

# 저장소 연결
git remote add origin https://github.com/my-account/content-storage

# 저장소 이동
git branch -M master

# 커밋
git add .
git commit -am 'initialize commit'
git push -u origin master

 

호스팅저장소 연결하기

---

수행 경로: hugo/my-site

# submodule 로 연결하여 준다
git submodule add -b master https://github.com/my-account/content-hosting.github.io.git public

# submodule 저장소로 이동
cd ./public

# 현재 저장소 확인 
git status

# master 가 아닐 경우 master 로 변경
git checkout master

호스팅저장소를 연결하면 내 hugo/my-site/public 폴더가 생성 된 것을 확인 할 수 있는데 이 폴더 안의 내용들이 호스팅저장소에 노출 된다.

• 호스팅저장소에 hugo 테마 적용

  • 현재 적용되어져 있는 mainroad 테마를 호스팅저장소에 적용한다.

    hugo -t mainroad

    → /hugo/my-site/public 아래 테마관련 파일들이 생성된 것을 확인 할 수 있다.

 

저장소에 푸쉬 및 확인하기

---

수행 경로: /hugo/my-site

• 배포 쉘 실행

# 커밋할 파일 추가
git add .

# 커밋 내용 작성
git commit -am '최초 커밋'

# 저장소에 푸쉬
git push origin master

→ github 에 접속하여 my-account/content-storage 저장소에 가보면 파일들이 추가됨과 함께 public 폴더가 서브모듈로 포함되어 있는 것을 확인할 수 있다.