정적 사이트 생성기 Hugo를 사용할 수 있도록 설정

소개

macOS Catalina에 Static Site Generator(정적 사이트 생성기) Hugo를 도입하여 사용할 수 있도록 한다.

Hugo란?

Hugo은 오픈 소스로 개발 된 Static Site Generator입니다.



일반적으로 웹사이트 구축에서는 Wordpress와 같은 CMS(콘텐츠 관리 시스템)가 사용되는 경우가 많다. 하지만, 개인으로 운용하고 있는 blog등의 Web 사이트에서는 정적 사이트 제너레이터를 이용해 구축하는 쪽이, 시스템 관리·보수의 면에서 메리트가 있다.

그 밖에도 웹 페이지의 콘텐츠를 Git과 같은 버전 관리 시스템을 사용하여 관리할 수 있게 되는 이점 등도 있다.

macOS Catalina에서 설정

설치

Hugo 공식 사이트에 설명 된 내용을 기반으로 macOS에 설치합니다.

$ brew install hugo
$ hugo version
Hugo Static Site Generator v0.71.1/extended darwin/amd64 BuildDate: unknown

샘플 프로젝트 만들기

Hugo의 공식 사이트에는 다음 예제가 설명되어 있습니다.

$ hugo new site quickstart

이 명령은 현재 디렉토리의 quickstart 디렉토리를 작성합니다. 사용자의 home 디렉토리에서 실행하면 /home/{user}/quickstart가 작성됩니다.

여기서 ~/Sites 디렉토리 아래에 samplesite 프로젝트를 만듭니다.

$ mkdir Sites
$ cd Sites
$ hugo new site samplesite
$ ls samplesite
archetypes/  config.toml  content/     data/        layouts/     static/      themes/

테마 도입

Hugo에서는 공식 사이트에서 다양한 CSS 테마를 입수할 수 있다.



여기에서는 Twenty Fourteen라는 테마를 얻습니다. 테마의 입수 방법은 zip 아카이브로 취득하는 방법도 있지만, 여기에서는 Git을 사용해 취득한다.

$ cd samplesite
$ git init
$ git submodule add https://github.com/jaden/twentyfourteen.git themes/twentyfourteen

config.toml에 테마 설정을 추가합니다.

echo 'theme = "twentyfourteen"' >> config.toml

콘텐츠 준비

기사를 추가합니다.

$ hugo new posts/my-fast-post.md
/Users/{user}/Sites/samplesite/content/posts/my-first-post.md created

Hugo에서는 samplesite/content 아래에 콘텐츠를 저장합니다.

$ tree ./samplesite
./samplesite
├── archetypes
│   └── default.md
├── config.toml
├── content
│   └── posts
│       └── my-first-post.md  //作成したコンテンツ
├── data
├── layouts
├── resources
│   └── _gen
│       ├── assets
│       └── images
├── static
└── themes
    └── twentyfourteen
        ├── LICENSE.md
        ├── README.md

my-first-post.md의 내용은 적절하게 기입한다. 이것으로 기사의 준비가 완료.

샘플 사이트 시작

Hugo에서는 정적 사이트 출력하기 전에 로컬 서버를 기동해, 내용을 확인할 수 있다.

$ pwd
/Users/{user}/Sites/samplesite
$ hugo server -D
( ローカルサーバは http://localhost:1313/ で起動する。Ctrl+C で終了)

사이트 설정하기

구축할 웹사이트의 URL이나 언어 코드 등을 설정한다.

config.toml

baseURL = "http://example.org/"  //適時URLは修正する。
languageCode = "ja-JP"
title = "My New Hugo Site"
theme = "twentyfourteen"

정적 사이트 출력

$hugo -D

samplesite/public 아래에 정적 사이트 파일이 출력됩니다.

결론

작성된 파일을 도메인 부여한 Amazon S3 등에 업로드하면 정적 웹 사이트로 공개할 수 있다.

테마 CSS등도 자유롭게 편집할 수 있으므로, 자신의 취향에 맞게 커스터마이즈 할 수도 있다.