Hugo 신규 웹 사이트 만들기
사이트의 골격 생성
먼저 Hugo를 설치하여, hugo 명령을 사용할 수 있는 홤경을 만든다.
그러고, 다음과 같이 hugo new site 명령을 사용하면, 웹 사이트의 초기 파일 구성 디렉터리 골격을 만들 수 있다.
새 웹 사이트(my-site) 만들기
% hugo new site my-site
Congratulations! Your new Hugo site is created in /Users/user/hugo-tutorial/my-site.
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.
생성되는 파일들은 매주 간단하고, 아래와 같이 파일 2개와 몇개의 디렉터리뿐이다.
.
└── my-site
├── archetypes : 새 페이지를 만들 때 탬플릿 파일
│ └── default.md
├── config.toml : 사이트 전체 설정 파일
├── content : 컨텐츠를 저장 위치. 사이트 내용이 되는 Markdown 형식의 파일을 넣는다.
├── data : 사이트 생성시 이용하는 데이터
├── layouts : 레이아웃 템플릿 위치
├── public : 배포된 html, css, image 등이 파일 위치
├── static : 이미지 파일 등, 사이트 생성시 그대로 복사되어 파일을 넣는다.
└── themes : 테마 디렉터리를 위치. 실제로 어떤 테마를 사용할지는 config.toml에서 지정한다.
이 상태로 서버를 시작해 보면, “Page Not Found”
사이트 테마 설치 및 설정
Hugo에서 신규 웹 사이트를 생성하고 나서는, 외형을 정의하기 위한 하나의 테마를 설정한다. hugo new site으로 생성한 사이트는 테마까지는 생성되지 않기 때문에, 사이트에서 공개되고 있는 테마를 다운로드해 와야 한다.
여기에서는 mainroad라는 테마를 적용을 해보겠다.
Hugo 테마는 themes 디렉터리에 테마 디렉터리를 만들어 저장하면 된다. 테마별로 디렉터리를 나누어 저장하므로 여러 테마를 미리 다운로드해 둘 수 있으며, 사용하는 테마는 간단하게 바꿀 수도 있다.
그리고, 테마들은 주로 GitHub에서 배포되므로 Git이 설치되어 있으면, 아래와 같이 루트 경로에서 git clone으로 쉽게 적용할 수 있다.
% cd themes
% git clone https://github.com/vimux/mainroad
또는, 아래와 같이 명령어를 한번에 할 수 있다.
% git clone https://github.com/vimux/mainroad themes/mainroad
위 명령으로 themes/mainroad 디렉터리가 생성되었다면, 다음으로 이 테마를 사용하도록 Hugo 설정 파일(config.toml)에 다음 내용을 추가한다.
config.toml
theme = "mainroad"
이것으로 테마 설정은 완료되었다.
사이트의 제목과 언어 설정
사이트의 설정 파일에서는 테마 설정 이외에도, 사이트 타이틀(title)이나, 전체로 사용하는 언어(languageCode)의 설정을 해야 한다.
config.toml
baseURL = "http://devkuma.com/"
languageCode = "ko-kr"
title = "My New Hugo Site"
theme = "mainroad"
Info
여기에서 설정한 값은 템플릿 파일에서{{ .Site.Title }}, {{ .Site.BaseURL }}, {{ .Site.LanguageCode }}와 같이 참조 할 수 있다.
포스트 작성
여기에서는 예제 포스트를 하나만 작성해 보자. 다음과 같이 hugo new 명령을 실행하면, content 디렉터리 아래에 포스트 파일(Markdown 파일)이 자동으로 생성된다. 명령은 프로젝트의 최상위 디렉터리에서 실행해야 한다.
$ hugo new post/sample.md
이것으로 content/post/sample.md 파일이 생성되는데, 아래와 형식으로 수정한다.
content/post/sample.md
---
title: "포스트 제목"
date: 2023-05-05T23:19:43+09:00
#draft: true
---
포스트 본문
포스트 본문
포스트 본문
헤더 부분에 draft: true라고 행은 삭제 혹은 주석으로 하지 않으면, 페이지가 출력되지 않으므로 그 행은 없애야 한다.
Hugo 웹 서버 시작
웹 사이트 테마 설정 및 기사 작성이 끝나면, 명령을 hugo server실행하여 웹 서버를 시작한다.
% hugo server
Start building sites …
hugo v0.104.3+extended darwin/arm64 BuildDate=unknown
| EN
-------------------+-----
Pages | 7
Paginator pages | 0
Non-page files | 0
Static files | 5
Processed images | 0
Aliases | 3
Sitemaps | 1
Cleaned | 0
Built in 7 ms
Watching for changes in /Users/user/hugo-tutorial/my-site/{archetypes,content,data,layouts,static,themes}
Watching for config changes in /Users/user/hugo-tutorial/my-site/config.toml
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
Hugo 서버를 시작하는데 걸리는 시간은 단 7ms이다. 엄첨 빠르다.
Hugo 서버가 기동된 상태에서 웹 브라우저에서 http://localhost:1313/ 접속하면 사이트의 첫번째 페이지가 표시된다.
이후로는 hugo new 명령을 사용해 포스트를 계속해서 작성해 가면 된다. Hugo 서버는 content 디렉터리의 변경 사항을 모니터링하고 포스트가 작성되거나 수정되었을 때, 자동으로 다시 새로 고침이 되므로, Hugo 서버는 한 번 시작하면 재시작하지 않아도 된다.
포스트의 사용자 정의하는 방법은 테마마다 조금씩 다르므로, 자세한 내용은 각 테마의 사이트를 참조해야 한다.