How to use Hugo with Github

Published 08-07-2019 10:58:04

[Intro]

현재 페이지는 정적 페이지 생성기인 Hugo를 활용하여 작성되었다. Hugo는 Golang기반으로 동작한다고 한다.

글작성은 아직 마크다운 언어에 익숙하지 못하여 시행착오를 겪고있는 중이다.

Hugo를 사용해야겠다고 생각한 이유는 chann.kr 글에 공감을 했기 때문이다. Hugo와 Github Page 연동 과정에서 겪었던 사소한 어려움을 포함하여, 이 글을 읽는 독자가 쉽게 다가갈 수 있도록 해보려한다.

#

[Installation]

구축한 환경은 WSL(Windows Subsystem for Linux)을 활용하였다.

golang 설치

sugo apt-get install golang
#golang이 설치가 되지 않을 경우, apt-get update를 실행한다.

Hugo 설치

sudo apt-get install hugo

git 설치

sudo apt-get install git

TIPS) Github Page와 관련하여, 페이지 종류에는 2가지가 있다. Page용 레포지토리의 설정에서 Repository Name에 기입되는 값에 따라 접속 URL이 변경된다.

  1. {username}.github.io >> https://{username}.github.io
  2. {others} >> https://{username}.github.io/{others}

#

[Initial]

설치가 완료되었으면, Hugo 프로젝트를 생성한다.

hugo new site {sitename}

Hugo Template를 선택하고 git clone을 통해 받아온다.

cd {sitename}/themes
git clone {repository_of_theme}

TIPS) theme디렉토리 하위에 테마명으로 된 디렉토리가 있어야한다.

#

[Configuration]

Hugo의 설정은 프로젝트 최상위 디렉토리내 config.toml파일에서 진행하면된다.

baseURL = "https://af1tgc.github.io"
languageCode = "en-us"
title = "Yosub"
theme = "code-editor"
contentdir = "content"
layoutdir = "layout"
staticdir = "static"
publishdir = "public"
[params]
    author = "authors"
    locale = "en-US"
    category = "categories" 

TIPS) Hugo는 Taxonomies(분류변수)를 사용하여 nav처럼 사용할 수 있다. config.toml 파일에 category 및 tag 와 같은 Taxonomies 변수를 설정하고, 글작성시 categories: “” 형식으로 작성하면된다.

설정이 완료되었으면 Github Pages와 연동을 진행한다.

cd public
git init
git add .
git commit -m "initial commit"
git remote add origin https://github.com/{username}/{username}.github.io.git
git push origin master

#

[Posting]

글 작성은 다음과 같은 명령어를 통해 진행한다.

hugo new {dir}/{post-content}.md

글의 형식은 마크다운커스텀 가능으로 작성하면 된다. 마음껏!

이후 Github에 push를 진행한다.

cd {sitename}
hugo
cd public
git add .
git commit -m "COMMIT MSG"
git push origin master

TIPS) Hugo 에서 제공하는 push 자동화 쉘스트립트이다.

# 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.
git push origin master