Hugo 선택한 이유와 Hugo 사용법
최근 Medium 블로그에 글을 잘 안적게 되는 이유를 생각하기 시작했습니다. 제가 게을러서 그렇다는 이유도 있고 글로 남기고 싶은 내용이 없다는 것도 있겠지만 이전에 작성하면서 느꼈던 불만 중 하나인 코드 작성의 어려움을 해결하면 그래도 글을 좀 더 잘 적지 않을까? 하는 마음에 코드 작성이 쉬우면서 변경이 자유로운 markdown 형식의 블로그를 찾기 시작했습니다. 처음 떠오른건 지킬이였지만 살짝 삐뚤어진 마음에 자주 사용하는 언어를 벗어나고 싶어 다른걸 찾다가 Hugo 라는 라이브러리가 떠올랐고 바로 설치 방법과 작성 방법을 찾아다녔는데 생각보다 간단해 바로 작업을 진행해서 배포까지 끝냈습니다. 하지만 좀 더 시간을 투자했다면 분명 Hugo를 선택하지 않고 Notion API 를 사용하는 방법을 썼을거라고 생각합니다.
찾았던 라이브러리는 react-notion 입니다. 이 라이브러리와 nextjs 를 합쳐 react-notion-x 라는 라이브러리도 있는데 업무에서 nextjs 를 사용하는 제게는 golang 보다 더 익숙하면서 변경이 좀 더 자유로우면서 노션으로 글을 편하게 작성 할 수 있을 것 입니다. 그렇지만 이미 시간은 지났고 배포를 끝냈으니 그냥 Hugo로 진행하고자 합니다.
API 문서나 공부 내용 정리는 해봤지만 markdown 형식의 포스팅을 작성 해본 적이 없으니 좋은 경험이라고 생각합니다.
하지만 그 전에 만약 이 글을 보고 Hugo 를 사용하고자 하는분이 계신다면 먼저 테마를 둘러보시는걸 추천합니다. 아무리 경험이 좋고 작성이 편해도 디자인도 중요합니다.
테마 를 꼭 둘러보세요!
- 설치
- 글 작성
- 배포
- 참고 링크
설치
사용하고 있는 OS가 Mac 이기 때문에 Mac 기준으로 진행합니다. 먼저 Homebrew 가 설치되어 있음을 가정합니다. (설치가 안되신 분은 설치해주시거나 MacPorts 로 설치해주세요.)
brew install hugo
# or
port install hugo
재대로 설치 되었는지 확인을 해줍니다.
hugo version
설치가 되었다면 이제 사이트를 생성해줍니다.
hugo new site [사이트]
그러면 아래처럼 생성이 됩니다.
다음으로 선택했던 테마를 적용하는 부분입니다만 제가 참고했던 링크에서는 git 의 submodule 을 사용하라고 합니다. 이유에 대해서는 아래에서 설명할 예정이지만 테마 페이지에서도 테마들을 둘러보셨다면 테마를 설치하는 방법으로 submodule 을 사용해 설치하는 방법을 알려주고 있습니다. 물론 submodule 을 사용하지 않더라도 clone 을 통해 테마를 설치할 수 있지만 제가 참고했던 링크에서 submodule 을 사용하라고 했던 이유에 대해서 설명하고자 합니다.
Hugo 커뮤니티에 올라온 질문에 Hugo 제작자가 답변한 내용에 따르면,
업데이트된 테마를 쉽게 가지고 올 수 있기 때문에 clone 보다 submodule로 만드는 것이 더 좋은 선택이라고 한다.
https://discourse.gohugo.io/t/adding-a-theme-as-a-submodule-or-clone/8789
저는 그래서 submodule 로 테마를 가져와서 업데이트 하려고 했으나 막상 테마를 보니 제가 원하는 기능들이 약간씩 부족함을 느껴 원본 테마를 fork 하고 fork 한 테마를 submodule 로 불러와 테마를 수정하고 커밋 하는 방식으로 사용하고 있습니다.
제가 사용하고 있는 테마는 깃헙 테마 로 fork 한 테마는 이쪽 입니다. 나중에 어느정도 PR 을 보낼 수 있는 부분이 있다면 PR을 할 생각도 있습니다.
이미 테마 설치 방법은 아시겠지만.. 제가 사용하는 테마를 기준으로 삼겠습니다.
cd [사이트]
git init
git submodule add git@github.com:JoungSik/github-style.git themes/github-style
이렇게 설치를 하고 config.toml 파일을 변경해줍니다. 테마에서는 이런 example 을 주고 있습니다. 실제로 실행을 해보시면서 체크해 보시는걸 추천합니다.
baseURL = "https://meik2333.com/"
languageCode = "zh-cn"
title = "MeiK's blog"
theme = "github-style"
googleAnalytics = "UA-123456-789"
pygmentsCodeFences = true
pygmentsUseClasses = true
[params]
author = "MeiK"
description = "In solitude, where we are least alone."
github = "MeiK2333"
facebook = "MeiK2333"
twitter = "MeiK2333"
linkedin = "MeiK2333"
instagram = "MeiK2333"
tumblr = "MeiK2333"
email = "meik2333@gmail.com"
url = "https://meik2333.com"
keywords = "blog, google analytics"
rss = true
lastmod = true
userStatusEmoji = "😀"
favicon = "/images/github.png"
location = "China"
[[params.links]]
title = "Link"
href = "https://github.com/meik2333"
[[params.links]]
title = "Link2"
href = "https://meik2333.com"
icon = "https://meik2333.com/images/avatar.png"
[frontmatter]
lastmod = ["lastmod", ":fileModTime", ":default"]
hugo 의 실행을 로컬에서 확인 하려면 아래 명령어로 확인합니다.
hugo server -D
이렇게 설치가 끝났습니다.
글 작성
글은 아래 명령으로 추가 합니다.
hugo new post/sample.md
그러면 /content 안에 파일이 생성 되는걸 확인 할 수 있고 파일에 글을 작성하면 됩니다.
---
title: "Sample"
date: 2021-10-05T22:17:19+09:00 draft: true
---
hello world!
배포
배포를 위해서는 2개의 repository 가 필요합니다. 저는 githuh 에 배포 하려고 생각하고 있어 github 에 repository 를 만들어주었습니다.
- Hugo 의 컨텐츠와 소스 파일들을 전부 가지고 있는 저장소
- 랜더링된 Hugo 웹 페이지 저장소, 저는 JoungSik.github.io 이름으로 생성했습니다.
이제 git remote 등록을 해줍니다.
전체 컨텐츠를 등록하는 저장소를 등록합니다.
cd sample
git remote add origin git@github.com:JoungSik/blog.git
그 후 랜더링 될 Hugo 폴더를 submodule 로 등록합니다.
git submodule add -b master git@github.com:JoungSik/JoungSik.github.io.git public
이제 hugo 로 랜더링 된 파일들이 저장되는 public 폴더는 다른 저장소를 보고 있게 되었습니다.
이제 랜더링을 해줍니다.
hugo -t github-style
순서는 상관 없지만 저는 먼저 public 폴더로 이동 한 뒤 commit 을 진행하고 마지막에 전체 저장소의 푸쉬를 진행합니다.
그러면 다음과 같이 배포가 완료 됩니다.
