Hugo + GitHub Pages로 블로그 만들기

1. 환경

• Linux
• hugo
• git
• GitHub

2. 개요

Hugo로 블로그를 만들고 GitHub Pages에 호스팅하겠습니다. 블로그의 주소는 https://<깃헙 아이디>.github.io/<블로그>/로 만들겠습니다.

3. Repository 생성¹

1. github.com 로그인
2. 우상단에서 + → New repository
3. Repository name은 <블로그>로, 공개 설정은 Public으로, Add a license는 MIT로 하고 Create repository
4. 가운데 초록 Code 위에 Settings
5. 밑으로 내려가 GitHub Pages에서 source를 master branch로 변경
6. 우상단에서 + → New repository
7. Repository name은 <블로그 소스>로, 공개 설정은 원하는 대로, license는 MIT로 하고 Create repository

3번의 repository name을 다르게 하면 블로그 주소가 아래와 같습니다.

3번의 공개 설정은 Public으로 해야 GitHub Pages를 사용할 수 있습니다.
License는 테마와 같게 해야하는 것 같은데 정확하지 않습니다.
Repository에 포함되는 파일은 아래와 같습니다.

블로그 구성 파일은 인터넷 페이지 파일인 .html 그리고 디자인 파일인 .css 등입니다. 나머지는 글을 작성하게 되는 .md 파일 등 사이트를 구성하는데 필요한 것들입니다.

4. Hugo 설정²

1. git clone https://github.com/<깃헙 아이디>/<블로그 소스>.git
   Terminal에서 위 명령어를 입력하여 <블로그 소스>라는 폴더를 만들면서 해당 repository를 복사합니다.

2. hugo new site <블로그 소스> --force
   Hugo로 <블로그 소스>라는 폴더에 새로운 사이트를 생성합니다. 이미 폴더가 존재하기 때문에 --force 옵션을 사용하였습니다.

3. cd <블로그 소스>
<블로그 소스> 폴더로 이동

4. git submodule add https://github.com/HEIGE-PCloud/DoIt.git themes/DoIt
   DoIt이라는 테마를 clone이 아닌 submodule로 가져옵니다. 다른 테마를 원할 경우 themes.gohugo.io에서 찾으면 됩니다. themes 뒤의 이름으로 폴더를 생성하는데 repository 이름과 같게 하였습니다.

5. git submodule add -b master https://github.com/<깃헙 아이디>/<블로그>.git public
   public 폴더에 <블로그> repository를 submodule로 가져옵니다.

6. touch deploy.sh
   deploy.sh 파일 생성

7. chmod +x deploy.sh
   실행 가능하게 변경

8. 아래 내용을 deploy.sh에 작성하고 저장합니다.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

#!/bin/sh

cd public
shopt -s extglob # turn on extended globbing
rm -rf !(LICENSE) # remove all files and folders except LICENSE and .git file
cd ..

# If a command fails then the deploy stops
set -e

printf "\033[0;32mDeploying updates to GitHub...\033[0m\n"

# Build the project.
hugo # if using a theme, replace with `hugo -t <YOURTHEME>`

# Go To Public folder
cd public

# Add changes to git.
git add .

# Commit changes.
msg="rebuilding site $(date)"
if [ -n "$*" ]; then
	msg="$*"
fi
git commit -m "$msg"

# Push source and build repos. push to <블로그> repository
git push origin master

cd ..
git add .
git commit -m "$msg"
git push origin master # push to <블로그 소스> repository

상기 배치 파일의 내용은 Host on GitHub¹의 내용을 수정한 것입니다. 3번에서 6번 줄을 추가하여 public 폴더로 이동, extended globbing을 켜고 public 폴더 내에서 LICENSE와 .git 파일을 제외한 모든 파일과 폴더를 삭제하고³ 상위 폴더로 이동합니다.

Hugo의 경우 .md 파일로 글을 작성하고 해당 파일의 내용을 인터넷 페이지 파일로 생성합니다. 그런데 이 .md 파일을 삭제하여도 hugo는 생성된 인터넷 페이지 파일을 삭제하지 않습니다. 그래서 public 폴더 내에서 hugo 명령어로 생기지 않는 LICENSE와 .git 파일을 제외한 모든 파일과 폴더를 삭제하고 14번 줄에서 남아 있는 .md 파일에 대한 페이지를 다시 생성합니다.

public 폴더로 이동 후 <블로그> repository에 commit과 push를 합니다. 32번 줄부터도 추가한 부분으로 상위 폴더로 이동하여 <블로그 소스> repository에 commit과 push를 합니다.

9. ./deploy.sh "<메시지>"
   위 명령어로 배치 파일을 실행하면 <메시지>로 commit을 합니다. 깃헙 아이디와 비밀번호를 요구 시 입력하면 됩니다.

5. References