/ TECHNOLOGY

Hugo Static Web Engine

hugo logo

정적 웹 엔진, Hugo란?

markdown기반의 정적 웹엔진이다. 해외 블로그 엔진 순위에서도 요즘 1위일 만큼, 인기가 많은 것 같다. theme개발도 많이 되어 있어 편리하게 사용 가능하다.

Jekyll과 같은 스크립트 타입의 언어가 아닌, Go언어로 작성되어 무척이나 가볍고 빠르면서도 설치, 운영 또한 매우 간단하다. 무엇보다도 Hugo와 함께 Bitbucket+aerobabittic 조합으로 무료 블로그 운영이 가능하다.

설치 방법

소스코드도 공개되어 있어 직접 Build하여 사용해도 되고, Brew(맥의 경우)로 인스톨하여 사용도 가능하다.

brew update
brew install hugo

최신 버전을 사용하고 싶다면, Brew로 설치한 다음 직접 빌드한 바이너리를 덮으면 된다.

cp ./hugo /usr/local/bin

사용방법

Go로 빌드해보면 알지만, hugo 파일 하나다. 이 파일을 이용하여, 사이트 구축, 포스트 작성 등 대부분의 것을 다 할 수가 있다. 설치-사이트생성-포스트생성까지 2분도 채 걸리지 않는다. 퀵스타트 페이지에 간단히 설명 되어 있는데, 간단히 정리해 본다.

hugo help  <== 사용 방법이 주르륵 나온다  
hugo new site myblog <== myblog 사이트 생성
hugo new post/helloworld.md <== /post/helloworld 포스트 생성 
hugo server -w   		<== localhost:1313 접속하여 확인

theme 적용

위 방법으로 사이트를 생성했다면, 디렉토리에 themes라는 폴더가 생긴다. 여기에 사용하고 싶은 theme을 clone한 후 설정하면 된다. git은 이미 설치 되어 있다고 가정하고, Ghost의 default theme인 casper를 적용해 보자.

git clone https://github.com/vjeantet/hugo-theme-casper.git ./themes/casper

설정파일 config.toml에 아래 내용 추가 한다음, 재실행 하면 끝~!

theme = "casper"

무료 블로그 운영

hugo 튜토리얼에 잘 설명되어 있다. 추가적으로 필요한 부분만 따로 정리~

추가 파일

bitbucket 리파지토리에 push할 때 같이 보내면 된다. favicon.ico외는 root 디렉토리에 생성하면 된다.

  1. .gitignore

     backup
 public/*
 themes/casper/tmp
 .DS_Store

  2. .gitmodules

     [submodule "themes/casper"]
     path = themes/casper
     url = https://github.com/vjeantet/hugo-theme-casper.git

  3. README.md

     my blog :)

  4. package.json

     {
   "_aerobatic": {
     "build": {
       "engine": "hugo",
       "themeRepo": "https://github.com/vjeantet/hugo-theme-casper.git"
     }
   }
 }

  5. favicon.ico

     /static/images/favicon.ico

SourceTree

PC에 설치하는 프로그램으로 CLI에 능숙하지 않은 사용자라면, 사용하길 추천한다.

aerobatic add-on 설치

메뉴 찾기가 어렵다. 셋팅의 Find integrations에서 찾아 설치하면 된다. 근데, 찾을 필요 없이 첫번째 것이다. :) Add 후에 리파지토리에 가보면, 왼쪽 아래에 지구본 모양의 아이콘을 클릭하면 aerobatic add-on이 실행 된다.

aerobatic 메뉴에서 “myblog”로 웹호스팅 이름 시작하면, 빌드 후에 production 상태에서 아래 주소로 확인 가능하다.

myblog.aerobatic.io

다른 도메인 연결 방법

aerobatic 메뉴의 Hosting settings에서 설정 할 수 있다. 내용은 Custom Domains and SSL에서 확인 가능하지만, 기존의 경험이 없다면 조금 복잡할 수 도 있다. 문제 없이 했는데도 안되면 custom domain not working 사이트로 해결 가능하다.