最近話題の静的サイトジェネレータの 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 にします。
記事の書き方は、上記の項目の下にマークダウンを書いていくことで行います。
---
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 を弄ります。
baseURL = "公開ページURL"
languageCode = "js"
title = "hoge"
そして、下記コマンドを実行することで、hugo-test/hoge/public ディレクトリ内に指定したテーマで公開用ページに置くファイルが生成されます。
$ hugo --theme=テーマ名
まとめ
静的サイトジェネレータを生まれて始めて触りましたが、CLI で操作する WordPress のような印象を受けました。
Hugo は他の静的サイトジェネレータよりもシンプルで高速らしいので、もう少し勉強してみようと思います。