2017年3月26日日曜日

Ubuntu 16.04 で hugo を試してみた

概要

Ubuntu で hugo をインストールしてクリックスタートを試してみました

環境

  • Ubuntu 16.04
  • hugo 0.19

インストール

  • sudo apt install hugo

だと 0.16 になってしまうので deb パッケージからインストール

スキャホールドする

  • hugo new site bookshelf

で一式作成してくれます

記事作成

  • cd bookshelf
  • hugo new post/good-to-great.md
  • vim content/post/good-to-great.md

で markdown 本文を記載できます

テーマを当てる

hugo はデフォルトでテーマが何もないので記事を作成してもテーマを当てないと何も表示されません

で http://localhost:1313 にアクセスすると画面が表示されます

テーマを変える

でテーマを変えることができます
自分の場合このテーマだと起動した時にエラーが表示されました
おそらく Params が config.toml に記載されていないためエラーが出ているんだと思います
表示はされるので気にしなくても OK です

設定ファイルを編集する

設定ファイルを変更することでサイトのタイトルなどを変更することができます

  • vim config.toml
baseURL = "http://localhost/"
languageCode = "en-us"
title = "hawksnowlog Book Reviews"

[Params]
  Author = "hawksnowlog"
  • hugo server --baseURL=localhost --bind=0.0.0.0 --theme=hugo_theme_robust --buildDrafts

でサイトのタイトルなどが変わると思います

画像をオーバライトする

テーマで使われている画像を別の画像でオーバライトします
テーマのファイルを自体をいじるわけではなく適切なパスに配置することでオーバライトできます

画像が変わらない場合はブラウザキャッシュしている可能性があるのでキャッシュを削除するかプライベートブラウズで確認してください
Chrome の場合は Ctrl + Shift + R で強制リロードすれば OK です

レイアウトファイルをオーバライトする

画像だけでなくレイアウトファイルもオーバライトできます

  • mkdir -p layouts/_default
  • cp ./themes/hugo_theme_robust/layouts/_default/li.html layouts/_default
  • vim layouts/_default/li.html

で適当に html ファイルを編集するとデザインを変更することができます
基本的にはテーマに含まれているファイルを適切なパスにコピーしてそれを編集する方針で OK です
フッターを変える場合は以下の通り

  • mkdir -p layouts/partials
  • cp ./themes/hugo_theme_robust/layouts/partials/default_foot.html layouts/partials
  • vim layouts/partials/default_foot.html

記事をカスタマイズする

画像を差し替えてみます

+++
date = "2016-02-14T16:11:58+05:30"
draft = true
title = "Good to Great Book Review"
image = "book1.jpg"
+++

追記するのは先頭の toml フォーマットの部分になります
で画像のサムネイル部分を変更できます

ビルドして静的ファイルを作成する

例えば nginx でホスティングしたい場合に使えます

  • hugo --theme=hugo_theme_robust --buildDrafts

で public/ というディレクトリ配下に静的ファイルができあがります
これを例えば

  • cp -ipr public /var/www/html/

とかすれば nginx でホスティングすることができます
ビルド時に --baseURL を指定していないので config.toml で baseURL の設定を行っておいてください
基本はホスティングするサイトの IP を指定しておけばいいと思います
サブディレクトリ使う場合は、そのパスも入力しましょう

Tips

hugo undraft というコマンドがありそれで記事をドラフトからプロダクションにすることで --buildDrafts がなくても表示の対象にすることができる

最後に

hugo を Ubuntu で試してみました
基本的にクイックスタートをやっただけですが、hugo の最新版ないと動かないテーマもありました

あとはクイックスタートのページに github pages で公開する方法も載っていましたが公開する予定はなかったのでスルーしました
git で管理する場合は public と themes ディレクトリは .gitignore に記載したほうが良いと思います

参考サイト

時刻:
ラベル:

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)