Contents

github.io에 Hugo Blog 만들고 Webstorm(InteliiJ) 플러그인 설정

Updated on 2021-01-21

그동안 개발을 하면서 헤맸던 부분들 정리해서 공유하고 싶었던 마음이 있었습니다.
2021년 부터는 매월 하나의 포스트 이상은 작성해보자는 계획을 세우고 일단 블로그를 구성하였습니다.
첫 포스트는 그 블로그를 구성한 이야기 입니다.

1. Hugo 설치 & 사이트 생성

1.1 Github 에서 Repository 2개 생성

  • Repo 1: Hugo의 컨테츠, 설정, 소스파일을 포함할 Repository
    (blog 사용. 이름 상관 없음. Private 가능)
  • Repo 2: github.io를 통해서 static site를 제공할 Repository
    (<USERNAME>.github.io Public Only)

1.2 Repo 1에 Hugo site 생성

git clone https://github.com/<USERNAME>/blog

1.3 Hugo 설치 (https://gohugo.io/getting-started/installing/)

Homebrew (macOS / Linux)

brew install hugo

MacPorts (macOS)

port install hugo

Chocolatey (Windows)

choco install hugo -confirm

or

choco install hugo-extended -confirm

Scoop (Windows)

scoop install hugo

or

scoop install hugo-extended

1.4 Hugo Site 생성

hugo new site blog -f yaml --force
  • git clone으로 blog 디렉토리가 있기 때문에 --force로 생성합니다.
  • yaml이 익숙해서 yaml로 생성하였으면 기본은 toml입니다.

1.5 static site repositry submodule 등록

  • <USERNAME>.github.io Repo를 blog의 submodule로 등록합니다.
git submodule add https://github.com/<USERNAME>/<USERNAME>.github.io.git public

2. Hugo Theme 적용

2.1 테마 선택

  • https://themes.gohugo.io/ 에서 Demo사이트를 확인하여 원하는 테마를 고릅니다.
  • 선택한 테마의 가이드 혹은 github 확인
  • 테마를 서브 모듈로 추가 (아래는 uBlogger)
  • git submodule add https://github.com/upagge/uBlogger.git themes/uBlogger

2.2 테마에 맞게 config.yaml 수정

  • 테마 설정을 보다보면 yaml을 쓰는 것도 있고 toml을 쓰는것도 있어 아래 사이트에서 변환하면서 설정하였습니다.
  • https://www.convertsimple.com/

3. Hugo Plugin

3.1 설치

  • Webstorm : Preference - Plugin - Market 에서 Hugo Integration 플러그인 검색 후 추가

3.2 Local에서 실행

  • Run/Debug ConfiguratioHugo Run 추가 후 실행

3.3 Post 추가

  • blog/contentposts 디렉토리 생성 후 New -> Hugo New로 생성

Reference