3rd Hugoの使い方メモ
Hugoの使い方メモ
０ コマンドライン（ターミナル）の開き方
Windowsの場合 エクスプローラのロケーションバーに cmd と打ち込むと、開いているフォルダをカレントフォルダとしてコマンドプロンプトが起動する。
特に事前の準備は必要ない。
弐頭でのファイル構成
c;\Hugo\bin\ Hugo.exe LICENSE READ.me
c:\Hugo\Sites
ここにサイトをつくる。色々試しながら、古いサイトは順次、１，２，３とナンバリングしていく。
１ サイトの作り方
$ hugo new site サイト名
これで空のサイトが出来上がります。生成されたのはサイトの情報を入力する config.toml ファイルと空のフォルダ５つ（archetypes, content, data, layouts, static）だけで中身はありません。 以降、hugo コマンドは config.toml ファイルのあるフォルダで実行しますので、hugo(.exe)を同じ場所に移動しておくとよいでしょう。
生成された config.toml ファイルは以下のようになっています。
baseurl = "http://replace-this-with-your-hugo-site.com/"
languageCode = "en-us"
title = "My New Hugo Site"
baseurlがこのサイトを公開するURL、languageCodeはRSS出力に付与する文字コード、titleはサイトのタイトルです。環境に合わせて変更してください。
baseurl = "http://example.com/"
languageCode = "ja"
title = "Hugo入門"
２ テーマのインストール
レイアウトを１から作るのは時間がかかるので、一般公開されているテーマを利用してみましょう。 Hugo公式サイトのテーマ一覧のページから好きなデザインを選択します。ここでは公式サイトのクイックスタートと同じく hugo-uno テーマを使ってみます。 まずはサイトのトップフォルダ（config.tomlがあるフォルダ）に themes というフォルダを作って、そこにhugo-unoテーマを設置します。gitコマンドが使える方は以下で。
$ mkdir themes
$ cd themes
$ git clone https://github.com/SenjinDarashiva/hugo-uno.git
git コマンドが使えない方は ここ からzipファイルをダウンロードして展開してください。フォルダ名は hugo-uno に変更してください。
３ 記事の追加
記事は content フォルダに置きます。以下のコマンドでからの記事ファイルを作ることができます。
$ hugo new ファイル名
ここでは post/hello.md という名前で作ってみます。
$ hugo new post/hello.md
コマンドを実行すると content フォルダ内に post フォルダが作成され、その中に hello.md ファイルが作られます。 標準設定ではファイルの場所・名前がそのままURLのパス部分になるので、この記事は http://サーバ名/post/hello/ というURLで公開されることになります。
テキストエディタで hello.md を編集しましょう。生成された直後の hello.md ファイルの中身は以下のようになっています。
+++
date = "2016-04-05T12:00:00+09:00"
draft = true
title = "hello"
+++
先頭の半角 + 3文字から次の + 3文字の行までを フロントマター と呼び、記事のタイトルや日付、カテゴリ等ページの属性を指定します。 title がページのタイトルです。draft は下書きかどうかの状態で true が指定されているとプレビューやページ生成がされませんので false に指定するか削除しましょう。本文はフロントマター以降（この場合は７行目以降）に Markdown記法 で記述します。
+++
date = "2016-04-05T12:00:00+09:00"
title = "Hugoを始めました"
+++
こんにちは、**Hugo** を始めました。
### Markdown記法
Markdownの書き方は以下のサイトが参考になります。
- [Wikipedia](https://ja.wikipedia.org/wiki/Markdown)
- [Qiita](http://qiita.com/Qiita/items/c686397e4a0f4f11683d)
- [日本語Markdownユーザー会](http://www.markdown.jp/what-is-markdown/#markdown-1)
４ プレビュー
hugo は簡易HTTPサーバを内蔵していていつでもプレビューできます。プレビュー中は自動的にリロードがかかるため何もしなくても表示が逐次更新されます。 プレビュー機能を実行するには hugo server コマンドを使用します。-t の後ろはテーマのフォルダ名を指定してください。
ドラフトも含めて表示させたい場合は、-D, –buildDrafts とします。
$ hugo server -t hugo-uno -w
$ hugo server -D
ブラウザで http://127.0.0.1:1313/ にアクセスすると作成したサイトが表示されます。終了するときは Ctrl+C を押してください。
５ ページ生成のやりかた
sites にて hugo で sites 内に public が作られ その内部に 一式できる
プレビューで問題がないことを確認できたらページ生成です。以下のコマンドを実行してください。
$ hugo -t hugo-uno
ウェブサイトとして公開するファイル一式が public フォルダに出力されますので、このままウェブサーバに設置してください。
今回はインストールからページ生成、ウェブサーバの公開までの流れを急ぎでご紹介しましたが、次回以降は各項目についてもう少し掘り下げていこうと思います。