UJP - HUGOを使ってみる

Life is fun and easy!

不正IP報告数

Okan Sensor
 
メイン
ログイン
ブログ カテゴリ一覧

  • カテゴリ ハウツー の最新配信
  • RSS
  • RDF
  • ATOM

ブログ - HUGOを使ってみる

HUGOを使ってみる

カテゴリ : 
ハウツー
ブロガー : 
ujpblog 2018/6/13 1:18
 「サイトジェネレータ」というカテゴリに属するHUGOが気に入っている.
 大雑把にいうと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$
 HUGOはGO言語で作られているらしく,depというGo dependency management toolが必要とのこと.普段通りにそのままインストール.
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$
 HUGOの醍醐味は,フリー素材のテーマファイルが多く用意されていることだけれど,初期状態では入ってない.

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$
 初期状態だと何もない状態.vex-hugo.gitをダウンロードする.
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$
 最小限,日本語サイトだということでjaを設定.そして先ほどダウンロードしたテーマも記述する.できたファイルはこんな感じ.
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/

 ちゃんと動作すれば,次のような画面が表示される.







トラックバック


広告スペース
Google