Edited at

Hugoを触ってみたので、一通りの弄り方をまとめる

More than 1 year has passed since last update.

最近話題の静的サイトジェネレータの Hugo を触ってみました、何やら Go 言語製ということで他の静的サイトジェネレータよりも高速に動作するようです。

今回は Hugo を触ってみて、一通りの弄り方をまとめました。

(https://gohugo.io/overview/quickstart/ を参考にしました)


環境


  • MacOS Sierra バージョン 10.12.5

  • Homebrew インストール済み


Hugo インストール

Go 言語製ですが、Go は必要ないようです。

brew install hugo


Hugo を試す


サイト作成

実験用のディレクトリを作って、hugo でサイトを生成します。

$ mkdir hugo-test

$ cd hugo-test
$ hugo new site hoge


テーマ追加 (テンプレート)

テーマを入れないと何も表示されないので、テーマを持ってきます。

テーマ一覧は https://themes.gohugo.io/ から探し、気に入ったテーマの git リポジトリを clone します。

$ cd themes

$ git clone https://github.com/dim0627/hugo_theme_robust.git
$ cd ..


記事追加

記事を追加します、追加方法は下記の通りです。

追加すると追加されたファイルパスが表示されるので、パスにあるファイルを弄ります。

$ hugo new ディレクトリ名/記事名.md

/Users/ユーザ名/hugo-test/hoge/content/ディレクトリ名/記事名.md created

記事の追加時はディレクトリを指定しなくても可能です。

$ hugo new 記事名.md

/Users/ユーザ名/hugo-test/hoge/content/記事名.md created

追加される記事は下記のようになっていると思います。

---

title: "記事名"
date: 2017-07-16T19:40:59+09:00
draft: true
---

各項目の意味は下記の通り。


  • title: 記事名で、ページタイトルになることが多い

  • date: 生成された日時

  • draft: ドラフト記事なら true

ドラフト記事はまだ公開しない記事で、公開したければ draft: false にします。

記事の書き方は、上記の項目の下にマークダウンを書いていくことで行います。


サンプル.md

---

title: "サンプル"
date: 2017-07-16T19:40:59+09:00
draft: true
---

# ようこそ

ここはサンプルページです!

## サンプルタイトル

サンプル文章



プレビュー

$ hugo server --theme=hugo_theme_robust --buildDrafts --watch

--theme= のところは自分が追加したテーマ名を設定します。

--buildDrafts はドラフト記事も表示するようにします。

--watch は変更をリアルタイムで反映するようにします。

上記コマンドでエラーがでなければ、http://localhost:1313/ でアクセス出来るようになります。

各記事へのURLは下記のようになります。

ディレクトリ有り: http://localhost:1313/ディレクトリ名/記事名

ディレクトリ無し: http://localhost:1313/記事名


テーマを弄る

テーマをちょっといじったり、各記事へのリンクを貼りたい時は下記のディレクトリを弄ります。

hugo-test/hoge/themes/テーマ名/layouts/index.html # トップページ

hugo-test/hoge/themes/テーマ名/layouts/partials/header.html # ページヘッダ
hugo-test/hoge/themes/テーマ名/layouts/partials/footer.html # ページフッタ
hugo-test/hoge/themes/テーマ名/static/css/main.css # ページ全体のCSS


サイトを公開出来る状態にする

hugo-test/hoge/config.toml の baseURL を弄ります。


hugo-test/hoge/config.toml

baseURL = "公開ページURL"

languageCode = "js"
title = "hoge"

そして、下記コマンドを実行することで、hugo-test/hoge/public ディレクトリ内に指定したテーマで公開用ページに置くファイルが生成されます。

$ hugo --theme=テーマ名


まとめ

静的サイトジェネレータを生まれて始めて触りましたが、CLI で操作する WordPress のような印象を受けました。

Hugo は他の静的サイトジェネレータよりもシンプルで高速らしいので、もう少し勉強してみようと思います。