Hugoとは

ウェブサイトを構築するための世界最速のフレームワーク。
Hugo はGoのプロジェクトの中で、6番目にスターが多いプロジェクトである。テーマなど静的サイトのカスタマイズが、簡単に行うことができる。

インストール

https://gohugo.io/installation/ で各々の環境に合ったものをダウンロードできる。

Macの場合だとbrewで以下のようにダウンロードできる。

brew install hugo

サイトの作成

プロジェクトを作成する。

$ hugo new site mysite

すると、以下のようなmysiteディレクトリが作られる。

mysite
├── archetypes
│   └── default.md
├── assets
├── content
├── data
├── hugo.toml
├── i18n
├── layouts
├── static 
└── themes // テーマを格納する

$ cd mysite
$ git init
$ git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke
$ echo "theme = 'ananke'" >> hugo.toml
$ hugo server

http://localhost:1313/ にアクセスすると、以下のような画面が出てくる。

コンテンツの追加

mysiteは以下で以下のコマンドを叩く。

$ hugo new content posts/my-first-post.md

すると、mysite/content/に下記のように my-first-post.md が追加される。

content/
└── posts
    └── my-first-post.md

作成された my-first-post.md を以下のように修正する。

content/posts/my-first-post.md

+++
title = 'My First Post'
date = 2024-02-19T22:59:22+09:00
draft = true
+++
## hello

**こんにちは**! 初めての投稿です。

Hello [Hugo](https://gohugo.io)!

以下コマンドを叩いてhttp://localhost:1313/ にアクセスすると,
draft = trueにすると下書きとなる。以下のように-Dをつけることで、下書きのプレビューも含むことができる。

hugo server -D

read moreをクリックすると、

このように投稿されている。

サイトの設定

mysite配下の hugo.toml を設定する。

hugo.toml

baseURL = 'https://example.org/'
languageCode = 'ja'
title = '初めてのWebサイト'
theme = 'ananke'

hugo server -D

タイトルが変わった。

サイトの公開(デプロイ)

AWSの場合は静的ページなのでS3で公開することができる。

詳細なデプロイ方法やAWS以外のやり方は https://gohugo.io/categories/hosting-and-deployment/ に載っています。

設定できると、hugoと叩くだけでデプロイできるようになる。

hugoの使い方

テーマの種類

テーマはhttps://themes.gohugo.io/ に色々載っている。

変更の監視

ホットリロードする場合はhugo server --navigateToChangedを叩く。

設定ファイル

設定ファイルはtoml以外にもyaml, jsonが使用できる。
パラメータ等はhttps://gohugo.io/getting-started/configuration/に載っている。

終わりに

他にも色々カスタマイズもできるので、気になったら使ってみてください。