목표

• 개인 기술 정리를 위한 블로그의 생성
• markdown 사용이 편리한 github.io를 이용하기로 결정
• 빌드가 빠른 HUGO framework을 사용 (github에서는 Jekyll framework가 기본이나 컨텐츠가 쌓이면 빌드가 느려지는 단점이 있음)
• Hugo theme는 STACK을 사용

개발 환경

• Oracle Cloud Arm server
• Ubuntu 20.40
• code-server

사전 준비

GO 설치

Hugo는 GO로 작성되 있으므로 GO를 설치한다.

• ref : https://go.dev/doc/install
• 필요 시 GO의 설치 경로를 PATH에 등록한다.

Hugo 설치

• 리눅스의 경우 패키지 관리자를 이용하여 설치가 가능하나 이 경우 old 버전이 설치된다.
• STACK 테마의 경우 최신버전과 hugo extension이 필요하므로 Go를 이용하여 설치한다.
• https://gohugo.io/installation/linux/

1

 go install -tags extended github.com/gohugoio/hugo@latest

• 필요 시 Hugo의 설치 경로를 PATH에 등록한다.

git repo 생성

1. hosting을 위한 repo를 생성한다.
   • repo의 이름은 {git ID}.github.io 형식 ex) muonkmu.github.io
   • 호스팅 목적이므로 repo는 public
2. hugo 빌드 전 소스를 보관할 repo를 생성한다.
   • 이름은 상관 없음 ex) blog
   • 소스 보관용이므로 public/private은 개인 취향

블로그 작성 및 배포

hugo 프로젝트 생성 및 테마 설정

1. 프로젝트를 생성 후 폴더 이동, 하기 예제의 이름은 hugoBlog로 가정

1
2

hugo new site hugoBlog
cd hugoBlog

2. git 초기화 및 테마 설정
   • 하기 예제에서는 Stack 테마 사용
   • clone으로 테마 소스를 themes폴더에 넣을 수도 있으나 submodule을 추천

1
2

 git init
 git submodule add https://github.com/CaiJimmy/hugo-theme-stack.git themes/hugo-theme-stack

3. config파일 설정
   • config.toml을 수정, 하기 예제에서는 stack 테마의 예제 파일을 복사/수정 한다.
   • config.yaml의 baseurl, theme, title 등을 수정한다.

1
2
3

rm config.toml
cp themes/hugo-theme-stack/exampleSite/config.yaml ./
cp themes/hugo-theme-stack/exampleSite/content ./

1
2
3
4
5

baseurl: https://muonkmu.github.io/
languageCode: en-us
theme: hugo-theme-stack
paginate: 7
title: MW Devlog

컨텐츠 작성 및 테스트

1. categories, post, page 등을 작성한다.
   • 하기 예제에서는 stack 테마의 예제 파일을 복사/수정 한다.
   • content/post 내 예제 파일을 참조하여 post를 작성한다(예제포스트는 지워도 된다.)

1
2

rm -r content
cp themes/hugo-theme-stack/exampleSite/content ./

2. 테스트 서버를 구동하여 동작을 확인한다.
   • 하기 예제에는 orcle 서버에서 개발하는 것을 가정, 내부 바인딩과 포트를 별도로 할당였다(오라클 서버에서 방화벽에 우선적으로 포트을 열어둬야 함)
   • 웹 브라우저로 테스트 서버에 접속해 동작을 확인한다.

1

 hugo server -D --bind=0.0.0.0 -p 8070

빌드 및 배포

1. github repo를 연결한다.
   • 소스 repo에 프로젝트 폴더를 연결
   • host repo에 public 폴더를 연결

1
2
3

git remote add origin https://github.com/muonkmu/blog.git
rm -r public
git submodule add -b master https://github.com/muonkmu/muonkmu.github.io.git public

2. 소스를 빌드한다.
   • 하기 예제에서는 stack 테마의 사용 경우이다.

1

 hugo -t hugo-theme-stack

3. 빌드 및 소스 파일을 push 한다.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

cd public
git add .
git commit -m "first commit"
git branch -M main
git push origin main
cd ..
git add .
git commit -m "first commit"
git branch -M main
git push origin main

4. (option)배포에 시 사용할 쉘 스크립트를 작성한다. ex)deploy.sh

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

#!/bin/bash

hugo -t hugo-theme-stack
cd public
git add .
msg="rebuilding site `date`"
if [ $# -eq 1 ]
  then msg="$1"
fi
git commit -m "$msg"
git push origin main

cd ..
git add .
msg="rebuilding site `date`"
if [ $# -eq 1 ]
  then msg="$1"
fi
git commit -m "$msg"
git push origin main

Debug

HUGO 받침 분리 표기 문제

• 사용하던 중 ‘가’ 받침이 분리되어 표기되는 문제가 발견되었다. ex) ‘각’ 이 ‘가ㄱ’ 로 표기
• 구글링을 해보니 Droid Sans Fallback 폰트의 문제라고 생각되어 관련 폰트를 삭제하여 문제를 해결
• ./themes/hugo-theme-stack/assets/scss/variables.scss 의 --sys-font-family, --zh-font-family 변수 내 Droid Sans 관련 폰트를 모두 삭제한다.