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 を以下のように修正する。
+++
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 を設定する。
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/に載っている。
終わりに
他にも色々カスタマイズもできるので、気になったら使ってみてください。