블로그 생성

Svelte-kit#

HUGO 블로그 생성 w/GitHub#

Hugo is a fast and modern static site generator written in Go, and designed to make website creation fun again.

Hugo 설치#

• MacOS - brew install hugo
• Ubuntu - snap install hugo
  • 주의 - apt로 설치하면 구버전이 설치된다. snap을 이용하면 최신 버전으로 다운이 가능하다.
• Window - ?

자세한 정보는 Hugo Docs의 Install Hugo 참조.

Hugo로 블로그 생성#

hugo version 을 통해 작동이 가능한지 확인한다.

hugo new site blog 기본 Hugo site 파일을 생성한다.

GitHub를 이용해 블로그를 만들기 위해서는 두개의 repository가 필요하다.

• <USERNAME>.github.io 와 <YOUR-PROJECT> repository 두개를 생성한다.
• <USERNAME>.github.io 는 GitHub Page 기본 주소 양식이다. 이곳에 Hugo로 생성된 html 파일들이 올라 갈 것이다.
• <YOUR-PROJECT> 는 Hugo의 기본 페이지 파일들과 작성된 파일(Post)이 올라갈 것이다.

cd blog 생성한 DIR로 이동한다. 지금의 예에서는 <YOUR-PROJECT>가 blog인 경우이다.

git init git 필수파일을 생성한다.

git submodule add https://github.com/vividvilla/ezhil.git themes/ezhil Hugo로 생성된 themes 안에 원하는 thems의 GitHub를 가져온다. 위와 같은 방법으로 하면 해당 GitHub repo가 업데이트 되면 해당 DIR로 가서 git pull만 하면 자신의 테마가 업데이트 된다. clone 해서 전체 다 다시 가져올 필요가 없다.

Hugo의 테마들은 여기서 볼 수 있다.

hugo new posts/my-first-post.md 로 첫 post를 작성한다. 생성되는 기본 format은 archetypes/default.md 을 이용한다.

hugo server -D 를 이용해 생성할 사이트를 미리 볼 수 있다. http://localhost:1313/ 가 미리보기 주소이다.

만족할 결과가 나왔는가? 그렇다면 GitHub에 여러분의 Page를 올려보자. 그 전에 public/이 있는지 확인하고 있다면, rm -rf public로 지워준다.

Hugo는 <YOUR-PROJECT> 안의 파일을 이용해 <YOUR-PROJECT>/public 에 html (blog page) 파일이 생성된다.

git submodule add -b master https://github.com/<USERNAME>/<USERNAME>.github.io.git public 로 작업 repo의 public을 <USERNAME>.github.io.git 과 연동한다.

아래의 deploy.sh 을 이용해 간편하게 GitHub에 업데이트를 할 수 있다. (hugo에서 제공하는 script)

#!/bin/sh

# 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

원하는 포스트를 작성하고 deploy.sh 를 실행하면 된다. 자동으로 <USERNAME>.github.io.git 에 업데이트가 된다. <YOUR-PROJECT> 는 일종의 재료 파일들이기 때문에 GitHub에 매번 push할 필요는 없다.

jekyll에 비해 초기 설정은 다소 어려웠다. 하지만, blog contents를 작성, 관리에는 hugo가 더 편리하다.

blog의 색상이나 메뉴 변경은 config.toml이나 css안의 내용을 변경하면 가능합니다.

./static/css에서 색 변경이 가능하다.