Featured image of post Hugo로 이사하기

Hugo로 이사하기

티스토리, 깃북 안녕! 오늘이 마지막이야...

근황

오랫만에 다시 글을 쓰는거 같다. 의도적으로 안썼다기보단 사실 너무 바빴다는게 맞을거 같다. 특히 최근에는 일이 많다기보다는 go언어로 백엔드 업무를 처음 배우다보니 글을 쓰며 공부할 수가 없었다. 업무에 조금 익숙해 지면 관련된 내용들은 차근차근 포스팅할 예정이다.

hugo와의 첫 만남

근데 지금이 조금 익숙해진 시점이긴 하다. 물론 배울게 아직 산덤이지만, 일과 후에는 조금 시간이 남아 다시 공부를 하면서 글을 다시 써볼려고 한다. 근데 다시 시작해 보려고 하니 쓰기가 싫어졌다. 왜냐,

image

나의 블로그의 가독성을 좋지 못했다. 다시 봐야지 하고 내가 내 글을 봐도 가독성이 늘 떨어진다고 생각했지만, 테마를 바꾸기에는 다시 설정을 하는 수고가 싫었으며, 테마를 바꾼다고 엄청 나아질 것이라고 생각도 하지 않았다(물론 잘 사용하시는 분들도 있지만, 적어도 나에겐 말이다). 그래서 깃북을 사용해 왔는데, 깃북을 확실히 티스토리보다 가독성이 훨씬 좋았으며, 목차별로 내용을 잘 그룹지을 수가 있는 점이 좋았다. 하지만 UI 커스텀이 너무 제한적이라 내가 할 수 있는 것들이 없었다. 그렇게 고민하던중 현회사의 팀장님이 블로그를 변경하신다는 말을 듣고 어떤 프로젝트를 사용하시는지 여쭤봤다. 이렇게 알게된 것이 바로 hugo이다.

다양한 Theme, 반응형도 되고, Ruby도 안쓰네? 😃

과거 jekyll를 통해 깃허브 블로그를 만들었으나, 처음 만들어 보는거기도 하고 처음 접해보는 루비 명령어들이 너무 낯설었다. 물론 처음만 하면 된다고 하지만, 그때의 경험이 별로여서 그런지 jekyll는 싫었는데, hugo는 아주 매력적이었다. go로 작성하여 나중에 기여도 할 수 있었고, 이미지 프로세싱이나 국제화 등 더 많은 기능이 제공되어 고민 없이 선택하게 되었다.

설치 방법(github 페이지랑 연동하기)

먼저 두 개의 레포를 준비한다. github action을 통해 하나만 사용해도 될거 같긴한데, 여튼 남들이 다 하는데로 두개 준비했다.

Repo 2개 준비

  • 원하는 이름의 repo 하나(이하 blog repo로 명명)
  • {username}.github.io로 네이밍한 repo 하나

blog repo에 기존 작업 내용 동기화(push)

blog repo에 기존 작업 내용 동기화(push)한다. 내가 작업한 내용들은 기본적으로 이 repo에 보관할 것이다.

root 폴더에 public 폴더가 있다면 삭제

root 폴더에 public 폴더가 있다면 삭제한다. 나중엔 안해도 되었는데, 초반에는 이 부분에서도 에러가 났다.

git submodule 추가

서브 모듈을 만들어 빌드된 public 폴더가 다른 remote origin을 가지게 설정해 주는 작업이다.

1
2
3
4
5
6
7
# ex) 나의 경우 git submodule add --name khblog -b main https://github.com/JungKyuHyun/JungKyuHyun.github.io.git public
$ git submodule add --name {서브모드 별명(자유)} -b main https://github.com/{username}/{username}.github.io.git public

# 아래와 같은 응답이 나온다면 잘 진행된 상황.
# warning: You appear to have cloned an empty repository.
# fatal: 'origin/main' is not a commit and a branch 'main' cannot be created from it
# Unable to checkout submodule 'public'

deploy.sh 작성하기

root folderdeploy.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
#!/bin/bash

echo -e "\\033[0;32mDeploying updates to GitHub...\\033[0m"

# Build the project.
hugo # if using a theme, replace with `hugo -t <YOURTHEME>`
# 테마를 사용한다면 테마 이름을 쓰라고 적혀있지만, hugo module로 받았다면 이 부분은 별도로 수정하지 않아도 되는거 같다.
# 오히려 수정하면, theme이 아래 폴더가 텅텅 비었다는 에러가 나온다.

# Go To Public folder
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. (master 브랜치인 경우 master)
git push origin main

# Come Back up to the Project Root
cd ..

deploy!

아래 코드를 콘솔 창에 입력하면, 빌드된 내역이 public에 담기고 {username}.github.io 레포로 push되는 것을 확인할 수 있다.

1
$ ./deploy.sh "커밋 메시지"

(Optional) 만약 권한 관련 에러가 나온다면, 권한을 부여해 주자.

1
$ chmod 777 deploy.sh

연동 작업 완료 후

글이나 테마 등을 수정하여 호스팅된 깃허브 페이지에 반영하고 싶다면, 아래 명령어를 통해 반영하면 된다.

1
$ ./deploy.sh "커밋 메시지"

만약 글 작성이 끝나지 않았다면 blog-repo로만 push하면 실제 호스팅된 블로그에는 반영이 안되게 하면 된다.


글을 테스트 해볼겸 적은 내용이라 두서가 없거나 내용을 조금 뺀 것도 있으니 참고 부탁드립니다 :)

티스토리에서 블로그 이사중..