,

hugo でサイトを作ってみる

最近ウェブサイト制作が趣味みたいになってきて、よくサイトを作っては放置している。

というわけで hugo を使ってサイトを作ってみたので作り方を記載してみようと思う。
日記レベルの記事なのであまり参考にならないと思われるが頑張ってほしい

hugo とは Golang で書かれた静的サイトジェネレーターのことだ
因みに作成する環境は以下

・windows 10

公式マニュアル

https://gohugo.io/getting-started/installing
英語が読める人はこの記事をスルーしてここを読むとよい

インストール

https://github.com/gohugoio/hugo/releases
windows の場合は、
hugo_extended_0.59.1_Windows-64bit.zip
をダウンロードして、解凍してC:\Hugoとかに突っ込むとよい

Pathに追加

キーボードにある窓マークを押して「path」とか入力すると

が出てくる
ここから環境変数Pathを追加する

PowerShell とかの CLI からなら set PATH=%PATH%;C:\Hugo\bin でいいらしい。
マニュアルにはそう書いてある

起動してみる

コマンドプロンプトか好きなCLIを起動して以下のコマンドを打ってみる

hugo version
$ hugo version
Hugo Static Site Generator v0.59.1-D5DAB232 windows/amd64 BuildDate: 2019-10-31T15:22:43Z

こんな感じのものが出てきたら成功だ
おめでとう

試しにサイトを作る

好きなディレクトに移動して以下のコマンドでサイトを作成する
hugo new site example
これでexampleディレクトリの中に最低限の構成ができたはずだ
この状態だとまだテーマが無いのでダウンロードする

cd example\themes\
git clone https://github.com/vimux/blank

ブランクテーマだ。すっきりしているのできっと気に入ってくれると思う。

サイト設定

config.toml の中身を修正する
toml の書き方にしたがって書く、ファイルを見れば知らなくても大体わかると思う
baseURL、titleなどは好きなものを入れてほしい。
最後の行に先ほどダウンロードしたテンプレートの名前を入れる

baseURL = "http://example.org/"
languageCode = "ja"
title = "My New Hugo Site"
theme = "blank"

こんな感じ

記事を書く

コマンドを打ってファイルを作るのは面倒なので、
content/posts/kiji.md にファイルを作り
中身は以下のようにしてほしい

---
title: "記事で"
date: 2019-11-12T15:29:48+09:00
draft: false
---
# 記事ですですよ

こんな感じ

サイトを生成

hugo

とコマンドを打つと

$ hugo
Building sites …
                   | EN
+------------------+----+
  Pages            |  9
  Paginator pages  |  0
  Non-page files   |  0
  Static files     |  1
  Processed images |  0
  Aliases          |  4
  Sitemaps         |  1
  Cleaned          |  0

Total in 40 ms

こんな感じ
これでpublic 以下にファイルが生成された
これが公開用のファイルだ
ブラウザで見てみるとちゃんとHTMLが出力されていることが分かる

開発

hugo server

で開発用のサーバーが立ち上がる
デフォルトは http://localhost:1313/ になっている
このページを開くと上記のスクリーンショットのページが出てくると思う

記事を更新するたびにブラウザも更新されるので
この機能をうまく使って開発してほしい

Categorised in: ,