[HUGO] 시작하기

HUGO ?

---

HUGO 는 GO 프로그래밍 언어로 작성된 오픈 소스 정적 사이트 (Static Site Generators) 생성기 입니다.

정적 사이트 생성기란 서버측 처리없이 HTML, CSS, Javascript 파일로 제공되는 웹 사이트로 다양한 플랫폼에서 빠르고 안전하며 쉽게 호스팅 할 수 있습니다.

다양한 케이스가 있겠지만 대표적인 방법으로는 github 저장소를 이용하여 콘텐츠 생성 및 호스팅을 하는 방법이 있습니다.

 

• 아래 내용은 macOS 를 기준으로 작성 된 문서입니다

 

설치

---

• brew 를 사용하여 hugo 를 설치합니다

# 최초 설치 시
brew install hugo

# 설치확인
hugo version

 

다음 단계부터는 hugo 관련 파일들이 생성되기 때문에

작업 경로(실제로 hugo 사이트를 생성하고 관리할 경로)

로 이동해서 수행합니다

 

사이트 생성

---

• 신규 사이트 생성

    hugo new site {사이트명}

  → 아래의 폴더 및 파일이 생성됨을 확인 할 수 있습니다.

  archetypes

  assets

  content

  data

  hugo.toml

  layouts

  static

  themes

  생성 된 폴더 및 파일에 대한 내용은 아래와 같습니다.

  • archetypes : front matter 설정을 위한 default.md이 존재
  • content : 블로그에 올릴 글들이 저장되는 곳
  • data : 데이터 저장용. 싸이트에 보이지 않음
  • layouts : 여기에서 블로그에 실제로 적용되는 큰 틀을 가진 html들
  • static : css, js, img파일 등 추가 적인 기능 혹은 사진을 연결하기 위한 폴더
  • public: 위의 정보들을 기반으로 html로 생성된 웹페이지.

 

테마 적용

---

HUGO 에서는 이미 완성 또는 진행 중인 많은 테마들을 제공하고 있습니다. 해당 테마들은 아래 URL 에서 확인 후 마음에 드는 것으로 선택하시면 됩니다.

테마 목록: https://themes.gohugo.io/

제 경우 Mainroad 라는 테마를 사용하였습니다

테마는 서브모듈로 설치하거나 clone 하여 사용하는 방법이 있습니다. 서브모듈로 설치할 경우 해당 테마에 대한 업데이트 등 패치에 손쉽게 반응 할 수 있습니다.

하지만 제 경우에는 커스터마이징도 할겸.. clone 하여 진행하도록 하겠습니다.

(사실 서브모듈로 배포 시 커스터마이징 한 부분이 적용 안되고 서브모듈에 의존하고 있는 소스를 기반으로 배포가 되어서 해당 부분을 처리하는 것을 아직 못찾았습니다.. 찾으면 업데이트 하도록 할게요@@;)

테마 설치는 생성된 사이트로 경로로 이동하여 진행합니다.

# submodule 로 진행할 경우
git submodule add https://github.com/Vimux/Mainroad.git themes/mainroad

# git clone 으로 진행할 경우
git clone https://github.com/Vimux/Mainroad.git themes/mainroad

테마를 설치하게 되면 themes 폴더 안에 mainroad 라는 이름으로 폴더가 생성되어 있는 것을 확인 하실 수 있습니다.

이제 이 테마를 사이트에 적용하기 위해서는 hugo.toml 파일을 수정해야 합니다

(기존에는 config.toml 파일이었는데 hugo 0.110.0 버전 부터는 hugo.toml 로 변경되었습니다.)

  # default
  baseURL = 'http://example.org/'
  languageCode = 'en-us'
  title = 'My New Hugo Site'

  # theme = {themes 아래 생성한 폴더명}
  theme= 'mainroad'

 

실행 및 확인

---

• 아래는 hugo 명령어 입니다.

    # hugo --help 시 나오는 정보
    hugo server 
    --port=[port]: 포트지정 (default: 1313)
    --bind=[bindIP]: 서버가 외부와 연결될 인터페이스 (default: 127.0.0.1)
    --contentDir=[dir]: 컨텐츠 디렉터리
    --themesDir=[dir]: 테마 디렉터리
    --source=[dir]: 소스 디렉터리 (default 현재경로)
    --ignoreCache: ignore cache ( 게시글이 반영안될때 사용)
    -D: 서버 실행 시 미게시(draft) 상태의 글도 포함하여 노출한다.
    --liveReloadPort=[port]: 라이브리로드 포트 변경 (수정사항이 즉각 반영되는 것을 라이브리로드 라고 합니다)
    --navigateToChanged  마지막으로 수정한 페이지로 자동 리다이렉션 (baseURL 사용. 로컬에서 실행 시 appendPort 는 false)
    --appendPort=[true/false]: baseURL에 포트를 붙일건지 옵션 (default: true)
  
    # 컨텐츠 만들기
    hugo new --kind=[type]: 콘텐츠 메타데이터 type을 지정해서 글쓰기
  
    # 서버 실행 시 테마 적용
    hugo -t mainroad
  
    # 서버 실행 시 미게시(draft) 상태의 문서도 조회
    hugo server -D

• 아직 게시된 글이 없으므로 간단히 서버만 실행하여 확인해보도록 합니다.

`hugo server`

```bash
# 아래는 서버 싫행 로그 입니다.

                   | EN
-------------------+-----
  Pages            |  7
  Paginator pages  |  0
  Non-page files   |  0
  Static files     |  5
  Processed images |  0
  Aliases          |  3
  Sitemaps         |  1
  Cleaned          |  0

Built in 29 ms
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop
```

→ 위 메시지를 확인하였다면 브라우저에서 `http://localhost:1313` 접속하여 확인합니다.