개발 공부를 시작하면서부터 기술블로그를 쓰면 좋다는 이야기를 들었지만, 어디서부터 어떻게 해야 할지 몰라서 github.io 페이지를 만들고 Jekyll을 이용해서 블로그를 만들어 놓기만 한 채 방치하고 있었다.
iOS 공부를 시작하면서 공부한 것 정리용으로, 또 나중에 찾아볼 수 있도록 기록하면 좋겠다 싶어서 찾아보니 Jekyll은 컨텐츠가 쌓일수록 빌드 속도가 엄청 늦어진다는 글을 읽어서 새롭게 hugo를 사용해 보기로 했다.
마침 야곰 아카데미 코드 스타터 5주 과정이 끝나서 리뷰를 써야겠다고 마음먹고 시작!
Hugo 설치
- HomeBrew가 설치되어 있어야 한다.
여기 화면 중앙의
Install Homebrew하단의 코드를 복사해서 터미널에서 실행
1
2
3
4
5
6
7
8
|
# hugo 설치
$ brew install hugo
# hugo 버전 확인
$ hugo version
# 설치가 되어 있다면 버전이 출력된다.
hugo v0.101.0+extended darwin/amd64 BuildDate=unknown
|
Github 레포지토리 생성
blog 라는 이름의 레포지토리와
<username>.github.io 자기아이디 이름의 github.io 레포지토리를 생성해 준다
Hugo 프로젝트 만들기
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
# hugo 프로젝트 생성
$ hugo new site blog
# 생성 완료되면 출력 문구
Congratulations! Your new Hugo site is created in /Users/user/Workspaces/blog.
Just a few more steps and you're ready to go:
1. Download a theme into the same-named folder.
Choose a theme from https://themes.gohugo.io/ or
create your own with the "hugo new theme <THEMENAME>" command.
2. Perhaps you want to add some content. You can add single files
with "hugo new <SECTIONNAME>/<FILENAME>.<FORMAT>".
3. Start the built-in live server via "hugo server".
Visit https://gohugo.io/ for quickstart guide and full documentation.
|
테마는 여기 에서 확인하고 고를 수 있는데, 나는 gurumee92님이 설치한 hugo-tranquilpeak-theme을 따라서 설치하였다. 뭣도 모르니까…
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
# blog 폴더로 이동
$ cd blog
# 프로젝트 루트 경로 확인
$ pwd
/Users/smfc/Dev/blog
# git 초기화
$ git init
# 브렌치를 main으로 변경
$ git branch -M main
# git submodule add https://github.com/<theme 경로>.git themes/<theme 이름>
$ git submodule add https://github.com/kakawait/hugo-tranquilpeak-theme.git themes/hugo-tranquilpeak-theme
# 테마 폴더 안의 `config.toml` 파일을 blog 폴더 하단으로 복사
$ cp themes/hugo-tranquilpeak-theme/exampleSite/config.toml config.toml
|
그후 blog 폴더 하단의 config.toml 파일을 열어서 수정해준다.
1
2
3
4
5
|
# 이 부분 baseURL을 자신의 github.io 주소로 수정
baseURL = "https://jaekimdev.github.io/"
# 블로그 상단에 노출되는 이름 수정
title = "Jae's Devlog"
|
저장 후 터미널에서 hugo 서버 실행
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
$ hugo server
Start building sites …
hugo v0.101.0+extended darwin/amd64 BuildDate=unknown
| EN-US
-------------------+--------
Pages | 9
Paginator pages | 0
Non-page files | 0
Static files | 4
Processed images | 0
Aliases | 1
Sitemaps | 1
Cleaned | 0
Built in 9 ms
Watching for changes in /Users/smfc/Dev/blog/{archetypes,content,data,layouts,static,themes}
Watching for config changes in /Users/smfc/Dev/blog/config.toml
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop
|
브라우저를 열어서 http://localhost:1313/로 접속하면 블로그 화면을 볼 수 있다.
github 레포지토리 연결
blog에 blog 레포지토리를, blog/public에 <username>.github.io 레포지토리를 연결한다.
1
2
3
4
5
6
7
|
# blog -> blog 레포지토리 연결
# git remote add origin http://github.com/<username>/blog.git
$ git remote add origin https://github.com/jaekimdev/blog.git
# blog/public -> <username>.github.io 연결
# git submodule add -b main http://github.com/<username>/<username>.github.io.git public
$ git submodule add -b main http://github.com/jaekimdev/jaekimdev.github.io.git public
|
‼️ public이 이미 존재한다는 에러 메세지가 보여지고 진행되지 않음. ➡️ blog 폴더 하단의 public 폴더를 지운 후에 명령어 실행
배포를 쉽게 하기 위해 blog 폴더 하단에 ‘deploy.sh’ 파일을 만들어 준다 - 나는 config.toml 파일을 복사한 후 이름을 변경해 주고 아래 내용을 붙여넣기 한 후 저장하였다.
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
36
37
|
#!/bin/bash
echo -e "\033[0;32mDeploying updates to GitHub...\033[0m"
# Build the project.
# hugo -t <여러분의 테마>
hugo -t hugo-tranquilpeak-theme
# Go To Public folder, sub module commit
cd public
# Add changes to git.
git add .
# Commit changes.
msg="rebuilding site `date`"
if [ $# -eq 1 ]
then msg="$1"
fi
git commit -m "$msg"
# Push source and build repos.
git push origin main
# Come Back up to the Project Root
cd ..
# blog 저장소 Commit & Push
git add .
msg="rebuilding site `date`"
if [ $# -eq 1 ]
then msg="$1"
fi
git commit -m "$msg"
git push origin main
|
터미널에서 sh파일에 권한을 주고 실행한다.
1
2
3
4
5
|
# deploy.sh 실행 파일 권한 부여
$ chmod 777 deploy.sh
# 배포 실행
$ ./deploy.sh
|
‼️ 나는 이 부분에서 오류 발생! ➡️ 오류메세지에서 안내해 주는대로 git fetch 먼저 해주고 ./deploy.sh 재실행
‼️ 또다시 오류 발생! ➡️ 오류메세지에서 안내해 주는대로 git pull 실행하고 git branch --set-upstream-to=origin/main실행한 후 ./deploy.sh 재실행
‼️ 또다시 오류 발생! ➡️ 오류메세지에서 안내해 주는대로 git pull 실행하고 ./deploy.sh 재실행
내가 찾아본 블로그들에서는 이 부분을 알려주는 곳이 없어서 엄청 오랫동안 만들고 지우고를 반복;;
이젠 다 해결되어 https://<username>.github.io로 접속해서 블로그를 볼 수 있다!!! 🎉
Reference