Hugoでブログを作った

このブログを作るにあたり HexoGatsuby かで迷った結果 Hugo で作ることにした。 Hugo を採用した理由はいろいろと高速だから!

面倒な node.js のバージョン管理から開放されるという理由もある。

ゆとりなのでWindowsで作業する。

インストール

Hugo Download で検索すると hugo.exe の入ったzipファイルが見つかるので、 zipを開いて hugo.exe を任意の場所に配置して環境変数のPATHを通す。

コマンドを叩いてサイトを作る

$ hugo new site サイト名 で、サイト名でフォルダが切られて中に雛形が作られる。

$ cd サイト名 で作業フォルダに移動。

config.toml にサイトURL,言語,サイト名の項目があるので書く。

テーマ

themes/{各テーマのフォルダ} に配置すればOK。

とりあえず適当なテーマを入れた

$ cd themes
$ git clone https://github.com/halogenica/beautifulhugo.git
$ cd ..

$huto new theme テーマ名というコマンドで1から作ることも可能 - 【Hugo】ゴリラでも分かる静的サイトジェネレーターHugoでオリジナルテーマ作り – Snaplog

記事の追加

$ hugo new ファイル名content/ファイル名 が作成される。 あとは自由に記事を書こう。

content/post/ のディレクトリ配下に置かないと記事として認識されないようなので注意。 postの部分はHugoでセクションと呼ばれる機能のセクション名となる。

記事の中身

---
date: "2019-02-16T00:00:00+09:00"
draft: true
title: "記事タイトル"
description: "記事の説明: meta descriptionや[read more]の前の部分に出力される"
slug: "パーマリンクに利用するslug"
categories:
- 親カテゴリー
- 子カテゴリー
- 孫カテゴリー
tags:
- タグ1
- タグ2
---

article contents before Read More
<!--more-->
article contents  after Read More

`<!--more-->`は`more`の前後に空白を入れると機能しなくなるので注意

記事の中身は上記のように書く --- で挟まれた部分は Front Matter (フロントマッター) と呼び記事の日付などの情報を書ける。

--- で囲む場合は yaml フォーマットで記述する。 +++ で囲む場合は toml フォーマットで記述する。

設定はtomlが良いが、Front Matteryamlのほうがわかりやすいと思う。

---+++で囲まなくても 下の区切り部分だけで機能する。Hexoとの互換性を考慮したのだろうか。 ただし、エディタのシンタックスハイライトがうまく動かなかったので囲んだほうが良さそうだ。

フロントマッターにはテーマ独自の設定を記述することもある。

ローカルサーバでHugoのウェブサイトを動かす

$ hugo server でOK

  • --watchで変更を監視して自動更新してくれる
  • -t テーマ名 でテーマを選べる (config.tomlでもテーマは設定可能)
  • -Ddraft = true を指定した記事も表示される

静的ファイルの出力

$ hugo というコマンドだけでOK。

※ヘルプの表示を期待したのなら $ hugo helpとコマンドを打つ。

バージョンの確認

$ hugo version でバージョンを確認できる。 $hugo --version ではない。

Share
関連記事