HUGO

HUGO1는 Go언어로 만들어진 Octopress나 jekyll과 비슷한 Static website(wiki) generator 로 현재 Jekyll과 더불러 급속도로 인기를 얻고 있다.

멀티 플랫폼을 지원하며 설치가 간단하다.

사이트 생성

사이트 생성이 굉장히 간단하다. 생성된 폴더를 보면 심플한 구조로 되어있다.

$ hugo new site myhugo && tree myhugo
Congratulations! Your new Hugo site is created in /Users/kiyeon/myhugo.

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.
myhugo
├── archetypes
│   └── default.md
├── config.toml
├── content
├── data
├── layouts
├── static
└── themes

6 directories, 2 files

글쓰기

이때 파일명의 대시(‘-’)는 제목에서 스페이스로 처리된다. ‘–editor vi’옵션을 주면 파일을 만들고 vi로 해당 파일을 열어준다. 파일명을 한글로하면 로컬에서는 잘 열리지만 배포시 안열리는 문제가 있다.

draft가 ‘true’이면 비공개다. ‘false’로 해야 공개가 된다.

myhugo$ hugo new post/hello-world.md --editor vi
---
title: "hello world"
date: 2017-02-13T20:20:36+09:00
draft: false
---

Hello World!

테마 설치

서버를 띄우고 브라우저에서 확인하기 위해서는 포스트를 포장해줄 레이아웃(테마)이 필요하다. hugo는 기본테마가 없기때문에 반드시 처음 설치를 하면 테마를 설치해줘야 한다. Theme showcase에서 마음에 드는 테마를 고른후 git으로 설치한다.

myhugo> git clone https://github.com/appernetic/hugo-bootstrap-premium themes/btpr

서버 띄우고 브라우저로 확인

myhugo> hugo server --theme=btpr --buildDrafts
Started building sites ...
Built site for language en:
1 of 1 draft rendered
0 future content
0 expired content
1 regular pages created
2 other pages created
0 non-page files copied
2 paginator pages created
0 tags created
0 categories created
total in 11 ms
Watching for changes in ~/hugo_test/1/{data,content,layouts,static,themes}
Serving pages from memory
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

--buildDrafts | -D는 draft된 글도 함께 빌드하라는 옵션이다. 위에서는 draft를 false로 해서 안써도 되지만 이런 옵션이 있다는걸 알아두자. hugo help를 하면 도움말을 볼 수 있다. 참고로 IP를 지정하고 싶다면 --bind=IpAddress를 사용하고 도메인을 지정하려면 --baseURL | -b domain을 사용한다. 이제 브라우저에서 확인해볼 수 있다. HUGO가 재미있는건 별도의 설치없이도 LiveReload가 된다는건데 설정이나 글을 수정하면 브라우저가 새로고침이 되어 수정한 내용을 실시간으로 확인해 볼 수 있다.

배포

배포전에 config.toml을 수정한다.

myhugo$ cat config.toml
languageCode = "ko-kr"
title = "My New Hugo Site"
baseurl = "https://myhugo.aerobatic.io/"

languageCode는 ko-kr, baseurl은 배포할 웹서버의 도메인으로 바꿔준다.(명령행에서는 –baseURL=https://hugo.aerobatic.io)

웹에 배포를 하기위해 사이트를 빌딩 한다.

hugo만 실행하면 public폴더에 배포용 파일들을 만들어 준다. 이때도 마찬가지로 theme를 지정해줘야 하며 웹에서 사용할 수 있도록 baseURL도 설정되어 있어야 한다.

myhugo$ hugo --theme=btpr
Started building sites ...
Built site for language en:
0 draft content
0 future content
0 expired content
5 regular pages created
2 other pages created
0 non-page files copied
2 paginator pages created
0 tags created
0 categories created
total in 20 ms

위 명령을 실행하면 public폴더가 생성되고 hugo가 그 폴더에 사이트를 빌드해준다.
간단하게 Aerobatic에 배포를 해보자.

myhugo$ cd public
myhugo/public$ aero create && aero rename -n 'myhugo' && aero deploy

Creating new Aerobatic website in this directory


Website https://puzzled-care.aerobatic.io created.
To deploy your first version, run aero deploy.

   Website name updated.
   The new url is https://myhugo.aerobatic.io

Deploy new Aerobatic website version to stage production

     Compressing website assets
     Uploading archive to Aerobatic
     Waiting for cloud deployment to begin
     Cloud deployment in-progress

Version v1 deployment complete.
View now at https://myhugo.aerobatic.io

https://myhugo.aerobatic.io/ 웹에 배포된 것을 확인할 수 있다.

Hugo, Git Page로 배포하기

https://gohugo.io/tutorials/github-pages-blog/ 참조

2개의 저장소를 만든다. 하나는 hugo 컨텐츠 관리용 저장소. https://github.com/kiyeon/my-hugo 다른 하나는 github page 배포용 저장소. https://github.com/kiyeon/kiyeon.github.io

# 지킬 컨텐츠를 hugo로 import 한다.
hugo import jekyll myjekyll_dir my-hugo && cd my-hugo

# 컨텐츠 관리용 저장소 셋팅
git init
git remote add origin https://github.com/kiyeon/my-hugo.git

# 테마를 받고 git 서브모듈로 추가한다.
mkdir themes
git submodule add https://github.com/yoshiharuyamashita/blackburn.git
cd ..

# config.toml을 설정한다. 
baseurl = "http://blog.kiyeon.net/"
#languageCode = "en-us"
languageCode = "ko-kr"
title = "Kiyeon's Blog"
theme = "blackburn"
author = "Yoshiharu Yamashita"
copyright = "&copy; 2016. All rights reserved."
canonifyurls = true
paginate = 5
disablePathToLower = true

# 배포용 저장소를 서브모듈로 추가한다.
mkdir public
cd public
git submodule add https://github.com/kiyeon/kiyeon/github.io.git
cd ..

# 사이트를 빌딩한다.
hugo

# 빌딩한 사이틀 배포한다.
cd public
git add .
git commit -m"rebuilding site `date`"
git push -u origin master

# 컨텐츠 저장소의 변경사항을 저장하고 푸쉬한다.
cd ..
git add .
git commit -m'initialize hugo'
git push -u origin master

새로운 폴더에서 작업할땐 clone후 git submodule init && git shubmodule update를 해준다.

유용한 CLI 명령

Jekyll 포스트 가져오기

$ hugo import jekyll jekyll_root_path target_path

Markdown

HUGO는 BlackFriday Markdown 렌더링 엔진을 사용한다.
Blackfriday의 옵션을 사용해 Markdown 렌더링 기능을 조금 수정할 수 있으며 config.toml(or yaml)에 다음과 같은 형식으로 설정해야 한다.

config.toml

[blackfriday]
    fractions = true
    hrefTargetBlank = true # default 'false', true opens external links in a new window or tab.
    extensions = [""]

Syntax Highlighting

Hugo에서 코드의 Syntax Highlighting을 사용하는 다양한 방법을 제공한다. markdown의 backtick(`)을 사용하는게 간편하지만 클라이언트측에서 렌더링되는 문제가 있다. hugo에 내장된 syntax highlighting기능을 사용하면 다양한 옵션을 사용할 수 있고 전처리가 되어 속도면에서 장점이 있다.

 1 2 3 4 5 6 7 8 9101112
{{< highlight html "linenos=table, linenostart=1, hl_lines=2 5-6">}}
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>

</body>
</html>
{{< /highlight >}}

주석

<!--와 -->사이에 문자열을 넣으면 주석처리가 된다.

References

  1. 2013년 07월 Steve Francia가 프로젝트를 시작했다. [return]
comments powered by Disqus