Help us understand the problem. What is going on with this article?

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

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

yakimeron
株式会社テックコネクト代表取締役兼エンジニアです。Scala/Swift/Kotlin/C#/Java/C++/Go/Ruby/PHP/Python/JavaScriptを書き、AWS/Firebaseを使います。現在はUnity+Go+Nuxt.js+AWS+Firebase+PhotonEngineを利用してVRサービスを開発しています。コードを書いて物を作り出すのが何よりも好き!!
https://techconnect.co.jp/
techconnect
仮想世界の未来を創る VR SNS「TECO」を開発しています!日本のxR業界の発展に少しでも貢献できればと思い立ち上げました。
https://techconnect.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away