LoginSignup
27

More than 5 years have passed since last update.

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

Last updated at Posted at 2017-07-16

最近話題の静的サイトジェネレータの 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 は他の静的サイトジェネレータよりもシンプルで高速らしいので、もう少し勉強してみようと思います。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
27