HRR Co., Ltd.

技術的な記録を残していくことを目的としています。1次情報を大事にしています。

HugoをCygwinで使ってみる

Hugo Windows 10 Cygwin

はじめに

最終的なゴールは静的コンテンツのブログサイト構築です。
その第一歩として、Hugoのインストールを行います。
Windows 10 + Cygwin です。

自前でサーバーを準備して、ブログシステムを入れたいと思っています。
真っ先に思いついたのがWordPressでした。
しかしWordPressはしょっちゅう脆弱性に対する更新プログラムが配られているようなイメージがあります（偏見でしたらすみません…）。
ちょっとメンテナンスが大変になるなと。

そこで、早さや脆弱性対策を鑑みて、静的コンテンツでリリースできる形を目指しました。
そこで選んだのがHugoです。

Hugoとは

gohugo.io

Hugo is a fast and modern static site generator written in Go, and designed to make website creation fun again.

HugoはGo言語で書かれた早くてモダンな静的サイトジェネレータですよ。またWebサイトの創作を再び面白くするためにデザインされてますよ。（意訳）

と書かれている通り、静的サイトを生成するツールです。
インプットはMarkdownファイルで、アウトプットがディレクトリ付きのサイトになります。

Hugoのインストール

gohugo.io

何となくMac推しであるような気が…。
Cygwinで使う場合は、Windowsのexeファイルを手に入れるのが早いと思います。

github.com

私の場合は hugo_0.58.1_Windows-64bit.zip でした。
これの中身、hugo.exe を /usr/local/bin/ にコピーすればOKです。試しに下記コマンドを実行してみるといいと思います。

$ hugo version
Hugo Static Site Generator v0.58.1-24277B92 windows/amd64 BuildDate: 2019-09-06T09:19:22Z

Hugoを使ってみる

gohugo.io

Quick Start があるので、これに従います。

Step 1: Install Hugo

これは終わったのでスキップします。

Step 2: Create a New Site

新しいサイトを作成します。
作業ディレクトリを作成しておきます。

$ mkdir -p ~/work/hugo/
$ cd ~/work/hugo/

記載されたコマンドを実行します。

$ hugo new site quickstart
Congratulations! Your new Hugo site is created in C:\cygwin64\home\${USER}\work\hugo\quickstart.

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.

このあとの手順も出力されてますね。
簡単に訳すと、

  1. テーマを同じ名前をつけたフォルダにダウンロードしてね。
  2. 多分あなたはコンテンツを追加したいよね。hugo new <SECTIONNAME>\<FILENAME>.<FORMAT> でシングルファイルを追加できるよ。
  3. hugo server でビルトインの本番サーバーを立ち上げよう。

こんな感じでしょうか。

Step 3: Add a Theme

というわけで、テーマを追加します。
今回は書いてあるとおりに、anankeというテーマを入れてみます。
Git使います。

cd quickstart
 
# テーマのダウンロードと設置
git init
git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke
 
# テーマを設定ファイルに追加
echo 'theme = "ananke"' >> config.toml

こんな感じで、設定ファイルに書き込まれます。手動で書いてもいいですね。

$ cat config.toml
baseURL = "http://example.org/"
languageCode = "en-us"
title = "My New Hugo Site"
theme = "ananke"

Step 4: Add Some Content

ブログなので、コンテンツを追加します。
上にも書いたとおり、形式はhugo new <SECTIONNAME>\<FILENAME>.<FORMAT>です。
具体的には、

hugo new posts/my-first-post.md

こんな感じです。
これならコマンドを叩く必要を感じないかもしれませんが、タイトルや投稿日をファイルの中に書く必要があります（下の画像を参照のこと）。
それをファイルに書き込んでくれるので、生成はコマンドが便利かと思います。

$ cat content/posts/my-first-post.md
---
title: "My First Post"
date: 2019-10-31T06:13:32+09:00
draft: true
---

記事本文もわかるように、下のように軽く追記しておきます。

---
title: "My First Post"
date: 2019-10-31T06:13:32+09:00
draft: true
---
てすと

Step 5: Start the Hugo server

あとはビルトインサーバーが、コマンド一発で立ち上がります。

hugo server -D

-Dは--buildDraftsでもよく、ドラフトの記事（作成途中、未公開）も含めて表示しちゃうオプションのようです。

URLはデフォルトで http://localhost:1313/ のようですので、表示してみましょう。
きっと画像のようになるはず。

f:id:hrroct:20191029153120p:plain

Step 6: Customize the Theme

テーマのカスタマイズも必要かもしれませんが、何よりサイト名や言語設定を変更しておく必要があります。

$ cat config.toml
baseURL = "http://example.org/"
languageCode = "en-us"
title = "My New Hugo Site"
theme = "ananke"

それぞれの項目を、自分に合わせた内容に修正します。

Step 7: Build static pages

最後です。
最終目標である、静的コンテンツを生成します。コマンドは簡単で、

hugo

と打つだけです。
./public/フォルダに出力されますが、コンテンツがdraft: falseの場合、この出力に含まれませんので、ご注意ください。
（というか出力されたら困るものですが…）

おわりに

というわけで、記事はMarkdownなどテキスト形式で書くことができ、hugoコマンド一発で静的コンテンツの生成ができます。
あとはこれをサーバーに公開するところまで、ワンストップでできるといいのですが…。

それはまた調べてみます。
以上でした！