ブログ - HUGOを使ってみる
「サイトジェネレータ」というカテゴリに属するHUGOが気に入っている.
大雑把にいうとMarkdownで記述したWebページをHTMLに変換してくれるもので,CSSとか素材を変更するだけでサイト全体のドキュメントを管理できるということ.
数あるサイトジェネレータの中でも,HUGOが高速動作で評判が良くサイトデザインもたくさんあるというのでこれを使ってみる.
HUGOをインストール
まずはインストール.
HUGOはGO言語で作られているらしく,depというGo dependency management toolが必要とのこと.普段通りにそのままインストール.
サイズ的にも一瞬で入るんだなぁ.
パスを確認.
では,使ってみましょう.
HUGOでサイトを作成
試験用に,サイトを作成.今回は,~Document/hugoディレクトリ配下に作成する.
サイトを作成.
ディレクトリやファイルが配置されたというので,確認してみる.
HUGOの醍醐味は,フリー素材のテーマファイルが多く用意されていることだけれど,初期状態では入ってない.
Complete List | Hugo Themes
https://themes.gohugo.io/
テーマをダウンロード
Hugo Themesで紹介されて居るテーマ用のファイルは,github上に存在しているので,気に入ったものをダウンロードする.今回は,公式ドキュメントで紹介されているhugo-unoというものを選択してみた.
hugoのバージョンとテーマの記載のアンマッチがあったり,公式サイトに載っているからといって完全動作するというわけでもないので,QuickStartガイドに載っているhugo-unoが最初は無難.
githubからダウンロードするファイルは,サイトを作った時に自動的に作成されるthemesディレクトリの下に保存するので,ディレクトリを移動してcloneする.
初期状態だと何もない状態.vex-hugo.gitをダウンロードする.
問題なくダウンロードされた模様.
設定ファイルconfig.tomlを編集
サイトのホームディレクトリに戻ってファイルを確認.
設定ファイルの中身を確認.
最小限,日本語サイトだということでjaを設定.そして先ほどダウンロードしたテーマも記述する.できたファイルはこんな感じ.
HUGOで作成したサイトをブラウザでプレビュー
設定ファイルを保存したら,hugoの簡易Webサーバを起動してブラウザで出来栄えを確認してみる.
ここまで表示されたら,ブラウザでアクセスしてみる.
http://localhost:1313/
ちゃんと動作すれば,次のような画面が表示される.

大雑把にいうとMarkdownで記述したWebページをHTMLに変換してくれるもので,CSSとか素材を変更するだけでサイト全体のドキュメントを管理できるということ.
数あるサイトジェネレータの中でも,HUGOが高速動作で評判が良くサイトデザインもたくさんあるというのでこれを使ってみる.
HUGOをインストール
まずはインストール.
MBP2017:~ ujpadmin$ brew info hugo🆑
hugo: stable 0.41 (bottled), HEAD
Configurable static site generator
https://gohugo.io/
Not installed
From: https://github.com/Homebrew/homebrew-core/blob/master/Formula/hugo.rb
==> Dependencies
Build: dep ✘, go ✘
==> Options
--HEAD
Install HEAD version
MBP2017:~ ujpadmin$
MBP2017:~ ujpadmin$
MBP2017:~ ujpadmin$ brew install hugo🆑
==> Downloading https://homebrew.bintray.com/bottles/hugo-0.42.high_sierra.bottle.tar.gz
######################################################################## 100.0%e
==> Pouring hugo-0.42.high_sierra.bottle.tar.gz
==> Caveats
Bash completion has been installed to:
/usr/local/etc/bash_completion.d
==> Summary
🍺 /usr/local/Cellar/hugo/0.42: 32 files, 28.3MB
MBP2017:~ ujpadmin$
パスを確認.
MBP2017:~ ujpadmin$ which hugo🆑
/usr/local/bin/hugo
MBP2017:~ ujpadmin$
HUGOでサイトを作成
試験用に,サイトを作成.今回は,~Document/hugoディレクトリ配下に作成する.
MBP2017:~ ujpadmin$ cd ~/Documents/🆑
MBP2017:Documents ujpadmin$ mkdir hugo;cd hugo🆑
MBP2017:hugo ujpadmin$ pwd🆑
/Users/ujpadmin/Documents/hugo
MBP2017:hugo ujpadmin$
MBP2017:hugo ujpadmin$ hugo new site MyFirstSite🆑
Congratulations! Your new Hugo site is created in /Users/ujpadmin/Documents/hugo/MyFirstSite.
Just a few more steps and you're ready to go:
1. Download a theme into the same-named folder.
Choose a theme from https://themes.gohugo.io/, or
create your own with the "hugo new theme <THEMENAME>" command.
2. Perhaps you want to add some content. You can add single files
with "hugo new <SECTIONNAME>/<FILENAME>.<FORMAT>".
3. Start the built-in live server via "hugo server".
Visit https://gohugo.io/ for quickstart guide and full documentation.
MBP2017:hugo ujpadmin$
MBP2017:hugo ujpadmin$ tree -a🆑
.
└── MyFirstSite
├── archetypes
│ └── default.md
├── config.toml
├── content
├── data
├── layouts
├── static
└── themes
7 directories, 2 files
MBP2017:hugo ujpadmin$
Complete List | Hugo Themes
https://themes.gohugo.io/
テーマをダウンロード
Hugo Themesで紹介されて居るテーマ用のファイルは,github上に存在しているので,気に入ったものをダウンロードする.今回は,公式ドキュメントで紹介されているhugo-unoというものを選択してみた.
hugoのバージョンとテーマの記載のアンマッチがあったり,公式サイトに載っているからといって完全動作するというわけでもないので,QuickStartガイドに載っているhugo-unoが最初は無難.
githubからダウンロードするファイルは,サイトを作った時に自動的に作成されるthemesディレクトリの下に保存するので,ディレクトリを移動してcloneする.
MBP2017:hugo ujpadmin$ pwd🆑
/Users/ujpadmin/Documents/hugo🆑
MBP2017:hugo ujpadmin$ cd MyFirstSite/themes/🆑
MBP2017:themes ujpadmin$ ls🆑
MBP2017:themes ujpadmin$
MBP2017:themes ujpadmin$ git clone https://github.com/SenjinDarashiva/hugo-uno.git🆑
Cloning into 'hugo-uno'...
remote: Counting objects: 532, done.
remote: Total 532 (delta 0), reused 0 (delta 0), pack-reused 532
Receiving objects: 100% (532/532), 3.76 MiB | 56.00 KiB/s, done.
Resolving deltas: 100% (258/258), done.
MBP2017:themes ujpadmin$
設定ファイルconfig.tomlを編集
サイトのホームディレクトリに戻ってファイルを確認.
MBP2017:themes ujpadmin$ cd ..🆑
MBP2017:MyFirstSite ujpadmin$ pwd🆑
/Users/ujpadmin/Documents/hugo/MyFirstSite🈁
MBP2017:MyFirstSite ujpadmin$ ls -la🆑
total 8
drwxr-xr-x 9 ujpadmin staff 288 6 13 00:37 .
drwxr-xr-x 3 ujpadmin staff 96 6 13 00:37 ..
drwxr-xr-x 3 ujpadmin staff 96 6 13 00:37 archetypes
-rw-r--r-- 1 ujpadmin staff 82 6 13 00:37 config.toml🈁
drwxr-xr-x 2 ujpadmin staff 64 6 13 00:37 content
drwxr-xr-x 2 ujpadmin staff 64 6 13 00:37 data
drwxr-xr-x 2 ujpadmin staff 64 6 13 00:37 layouts
drwxr-xr-x 2 ujpadmin staff 64 6 13 00:37 static
drwxr-xr-x 3 ujpadmin staff 96 6 13 00:54 themes
MBP2017:MyFirstSite ujpadmin$
MBP2017:MyFirstSite ujpadmin$ cat config.toml
baseURL = "http://example.org/"
languageCode = "en-us"
title = "My New Hugo Site"
MBP2017:MyFirstSite ujpadmin$
MBP2017:MyFirstSite ujpadmin$ cat config.toml
baseURL = "http://example.org/"
languageCode = "ja"🈁
title = "My New Hugo Site"
theme = "hugo-uno"🈁
MBP2017:MyFirstSite ujpadmin$
HUGOで作成したサイトをブラウザでプレビュー
設定ファイルを保存したら,hugoの簡易Webサーバを起動してブラウザで出来栄えを確認してみる.
MBP2017:MyFirstSite ujpadmin$ hugo server -t hugo-uno -w🆑
| EN
+------------------+----+
Pages | 6
Paginator pages | 0
Non-page files | 0
Static files | 70
Processed images | 0
Aliases | 0
Sitemaps | 1
Cleaned | 0
Total in 11 ms
Watching for changes in /Users/ujpadmin/Documents/hugo/MyFirstSite/{content,data,layouts,static,themes}
Watching for config changes in /Users/ujpadmin/Documents/hugo/MyFirstSite/config.toml
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)🈁
Press Ctrl+C to stop
http://localhost:1313/
ちゃんと動作すれば,次のような画面が表示される.
