Hugo 등으로 정적 사이트 만들기 경우 매번 빌드해야 하는 번거로움이므로 GitHub Pages 대신 빌드와 호스팅을 한꺼번에 해준다 Netlify Rails 앱에 대한 Heroku와 같은 서비스의 이미지. 아무래도 좋지만 몇번이나 Netflix라고 쓰게 되었다.

이쪽을 따라가는.

A Step-by-Step Guide: Hugo on Netlify

로컬에서 호스팅

Hugo로 사이트 만들기

$ cd
$ hugo new site netlifytest
$ cd netlifytest/
$ hugo new about.md
$ hugo undraft content/about.md

사이트 내용은 없지만 신경 쓰지 않는다.

테마 넣기

htp : /// ぇめ s. 고후고. 이오/

$ git clone https://github.com/pedrodude/martial-paper themes/martial-paper

로컬에서 동작 확인

$ hugo server -t martial-paper

hugo가 출력하는 URL에 액세스. (기본적으로 http://localhost:1313/)

GitHub로 푸시하기

Netlify에서 호스팅하는 데 필요한 것을 GitHub에 푸시합니다.
우선 소세공한다.

$ echo /public >> .gitignore
$ touch static/.gitignore
$ hugo undraft content/about.md
$ rm -rf themes/martial-paper/.git

config.toml

baseurl = "/"
languageCode = "en-us"
title = "My New Hugo Site"

빌드 전의 파일을, 캐주얼에 GitHub 리포지터리(private 가능)의 master에 넣는다.

$ git init
$ git status
$ git add .
$ git commit -m'first commit'
$ git remote add origin [email protected]:satzz/netlifytest.git
$ git push origin master

Netlify에서 호스팅하기

GitHub측의 준비가 되었으므로 드디어 Netlify에 사이트를 만든다.

리포지토리 선택

빌드 설정하기

Branch: master

Dir: public/

Build Command: hugo --theme=martial-paper

빌드

10초 정도.



빌드 완료되면, 페이지 상단의 타이틀이 호스팅한 사이트에의 링크가 되어 있으므로 열어 본다.


CSS에 대한 참조가 잘 작동하지 않는 것 같습니다.



HTML을 보면 href="//css/main.css" 가 되어 버리고 있다(테마 의존?).
여기에서는 우선 baseurl를 호스팅처의 Netlify의 URL로 해 버리기로 한다.

config.toml

-baseurl = "/"
+baseurl = "http://explorer-snake-61260.netlify.com"

변경 사항을 GitHub로 push하면 Netlify의 빌드가 실행되고 로컬처럼 CSS가 적용되었다. 죄송합니다.

참고

A Step-by-Step Guide: Hugo on Netlify