SSG HUGO 시작해보기

정적 사이트 생성기중 하나인 HUGO를 시작해봅니다.
https://gohugo.io/getting-started/quick-start/

환경

• 2021년 5월
• M1 맥미니

개념

• 정적 사이트 생성기 (SSG, Static Site Generator)
  • 정적 웹페이지를 쉽게 생성해주는 프레임워크(or 라이브러리)
  • 빌드를 통해 HTML 결과물을 생성
  • GitHub Pages 와 Netlify 로 손쉽게 웹사이트 운영이 가능
• JAM 스택
  • Javascript, Api, Markup Stack
  • 위의 기술로 웹사이트를 구성하는 방법
• SSG 종류
  • Jekyll (GitHub Pages 기본 제공)
  • Hexo (Go 기반)
  • Gatsby (React, Node.js 기반)
  • VuePress (Vue 기반)
  • 등등
• 참고 글
  • [Blog] 정적 사이트 생성기 Gatsby

좀더 간단해 보이는 Hexo 를 시작해 보기로 했습니다.
그런데, 샘플까지 해보고 나니 가볍게 만들땐 Bootstrap 을 이용하고 싶어졌습니다. :O

설치

• 먼저 hugo 패키지를 설치

$ brew install hugo
...
🍺  /opt/homebrew/Cellar/hugo/0.83.1: 44 files, 65.0MB

$ hugo version
hugo v0.83.1+extended darwin/arm64 BuildDate=unknown

• 프로젝트 생성

$ hugo new site quickstart
Congratulations! Your new Hugo site is created in /Users/xxx/dev/hugo/test.

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.

실행

• 로컬 서버 실행
  • 기본 localhost:1313

$ hugo server -D

• 템플릿을 선택하고 ./public 디렉토리에 결과 HTML 생성

$ hugo -T

• ./public 을 GitHub 에 올려서 Pages 로 확인 가능
  • 또는 GitHub 에 프로젝트 통으로 올리고 Netlify 에서 빌드 명령을 추가해서 배포

여기까지 발만 걸쳐보고 다음을 기약합니다.
(프론트앤드쪽으로 뭔가 많이 나왔네요)

참, netlify cms 로 Hugo 의 템플릿 수정을 쉽게 할 수 있다고 하니 참고 해주세요.
https://www.netlifycms.org/

도메인(옵션), GitHub, netlify, netlify cms 만 가지고 개발 코드 없이 온라인으로만 웹페이지를 만들 수 있겠네요.