깃허브(GitHub) + 휴고(Hugo), 블로그 효과적으로 관리하기

전편에서는 휴고를 이용하여 블로그를 생성하고 테마를 적용하는 방법을 알아보았다. 이번 편에서는 깃허브를 사용하고 있다는 가정 하에 서브모듈(Submodule)이라는 기능으로 어떻게 소스코드를 효율적으로 관리할 지에 대해서 고민한 결과를 정리해보았다.

휴고로 빌드한 소스코드 구조 ¶

앞서 휴고로 블로그를 빌드했다면 아래와 같은 디렉토리 구성이 만들어졌을 것이다. 다 설명하기 보다는 몇 가지 필요한 폴더만 보자.

.
├── archetypes
├── config.yml
├── content
├── data
├── layouts
├── public
├── resources
├── static
└── themes

8 directories, 1 file

themes 폴더 ¶

themes 폴더는 블로그에 적용하고 싶은 테마가 위치하는 곳이다. 전편에서 PaperMod라는 테마를 이곳에 다운받고 적용시킨 적이 있으므로 디렉토리의 구조는 아래와 같을 것이다.

$ tree themes -L 2
themes
└── PaperMod
    ├── LICENSE
    ├── README.md
    ├── assets
    ├── go.mod
    ├── i18n
    ├── images
    ├── layouts
    └── theme.toml

5 directories, 4 files

content 폴더 ¶

content 폴더는 이름 그대로 블로그에 담을 글과 그림 등의 컨텐츠가 위치하는 곳이다. 전편에서 마크다운 형식으로 작성한 lorem ipsum이라는 글이 저장되어 있음을 확인할 수 있다.

$ tree content
content
└── post
    └── loremipsum.md

1 directory, 1 file

public 폴더 ¶

public 폴더는 휴고가 빌드한 정적 웹 사이트, 즉, 최종 결과물이 위치하는 곳이다. 루트에 index.html이 있는 것으로 보아 이 자체로 하나의 완결된 웹 사이트임을 알 수 있다. 이 내용을 통째로 깃허브 페이지(GitHub Pages)나 기타 사용 중인 웹 호스팅 서버에 업로드하면 누구나 인터넷을 통하여 해당 웹 사이트에 접속할 수 있게 된다.

$ hugo -D
$ tree public -L 2
public/
├── 404.html
├── assets
│   ├── css
│   └── js
├── categories
│   ├── index.html
│   ├── index.xml
│   └── lorem
├── index.html
├── index.xml
├── page
│   └── 1
├── post
│   ├── index.html
│   ├── index.xml
│   ├── loremipsum
│   └── page
├── robots.txt
├── sitemap.xml
└── tags
    ├── index.html
    ├── index.xml
    ├── ipsum
    └── lorem

13 directories, 11 files

소스코드 쪼개기!!! ¶

필자가 본 포스트에서 말하고 싶은 것은 전체 소스코드에서 themes 폴더, content 폴더, public 폴더는 서로 다른 성격을 지니므로 분리해도 좋을 것 같다는 점이다.

먼저, public 폴더는 다른 폴더들과는 달리, 단독으로 서버에 업로드 되어야 하는 것이다. 깃허브를 예로 들면 “baek9.github.io"라는 저장소를 만들고 이 안에는 public 폴더 안의 내용물을 업로드 해야 baek9.github.io로 접속했을 때 최종 결과물을 확인할 수 있게 된다.

content 폴더의 경우 웹 사이트를 채워줄 각종 글과 그림들의 모음이니 소스코드가 아닌 데이터에 해당한다. 데이터가 분리되어 있다면 언제든 테마를 바꿀 수 있다. 극단적인 예를 하나 더 들면, 랜섬웨어로 소스코드와 데이터가 복구 불가능한 상태라고 했을 때 데이터만 안전한 곳에 백업이 되어 있다면 얼마든지 블로그는 새로 만들 수 있다.

themes 폴더는 굳이 분리하진 않아도 될 것으로 생각한다. themes 폴더를 제외하면 소스코드라 할 만한 것은 config.yml 정도 뿐이니 말이다. 다만, 필자가 직접 작성한 테마가 아닌 외부에서 가져온 테마이기 때문에 분리하고, 필자가 튜닝한 내용인 layouts 폴더 정도는 유지하는 것이 낫다고 판단했다.

결국, content 폴더, themes/PaperMod 폴더, public 폴더는 별도의 서브모듈(Submodule)로 관리하기로 했다.

서브모듈 만들기 ¶

필자가 말하는 일명 프로젝트 쪼개기에 동의하는가? 깃허브 사용자라면 서브모듈이라는 기능으로 프로젝트 쪼개기를 시도해 볼 수 있다. 서브모듈은 프로젝트 안에 다른 프로젝트를 사용해야 할 때 사용해 볼 수 있는 옵션이다. 즉, content 폴더와 public 폴더를 별도의 프로젝트로 독립시키고, 이 두 프로젝트와 이미 외부 프로젝트인 PaperMod와 함께 서브모듈의 형태로 가져오는 것이다.

즉, 전체 소스코드는 https://github.com/baek9/hugoblog 라는 저장소에 위치하지만 content 폴더는 https://github.com/baek9/hbcontent 저장소에, public 폴더는 https://github.com/baek9/baek9.github.io 저장소에 위치한다. themes/PaperMod 폴더는 외부 저장소인 https://github.com/adityatelange/hugo-PaperMod에 위치한다. 즉, 원본 테마가 업그레이드 될 때 나의 블로그도 손쉽게 업데이트할 수 있고, 소스코드와 데이터를 분리할 수 있게 된다.

// Module Hierachy
https://github.com/baek9/hugoblog
├── archetypes
├── config.yml
├── content -> https://github.com/baek9/hbcontent
├── data
├── layouts
├── public ->  https://github.com/baek9/baek9.github.io
├── resources
├── static
└── themes
    └── PaperMod -> https://github.com/adityatelange/hugo-PaperMod