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

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


『 Go 』Article List
Category List

Eye Catch Image
Read More

Androidに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

AWSに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Bitcoinに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

CentOSに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

dockerに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

GitHubに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Goに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Javaに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

JavaScriptに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Laravelに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Pythonに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Rubyに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Scalaに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Swiftに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Unityに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Vue.jsに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Wordpressに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

機械学習に関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。