公式に載っていないHugoのインストール方法

WordPressなどのCMS（コンテンツ・マネジメント・システム、いわゆるブログツール）に代わるものとして、鳴り物入りで登場して久しい静的サイトジェネレーター、GatsbyやJekyllなどが有名です。私は好きですが、技術的なハードルの高さのせいか、いまいち広まってない印象を受けます。

今回、特に、公式サイトを見ても理解が難しいHugoについて書いていこうと思います。（いっぽうのGatsbyは公式サイトのチュートリアルでもわかりやすく使えます。）

# 大規模サイトに向かないGatsbyと向くHugo

1000を超えるページ数のあるウェブサイトの場合、Gatsbyではデプロイするにもヒープメモリの不足から「JavaScript heap
out of memory」とエラーが出て止まってしまいます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1914981/2f8a6648-8a9d-c9bd-d8ce-a221f4015a4d.png)

```
<--- Last few GCs --->

[7568:0000018E6F6A5D50]   678508 ms: Mark-sweep 2044.6 (2059.4) -> 2043.6 (2060.1) MB, 2945.1 / 0.3 ms  (average mu = 0.126, current mu = 0.018) allocation failure scavenge might not succeed
[7568:0000018E6F6A5D50]   681357 ms: Mark-sweep (reduce) 2047.7 (2060.1) -> 2046.5 (2062.9) MB, 2505.5 / 0.3 ms  (+ 214.8 ms in 64 steps since start of marking, biggest step 9.6 ms, walltime since start of marking 2849 ms) (average mu = 0.087, current mu

<--- JS stacktrace --->

FATAL ERROR: MarkCompactCollector: young object promotion failed Allocation failed - JavaScript heap out of memory
 1: 00007FF636FD058F napi_wrap+109311
 2: 00007FF636F752B6 v8::internal::OrderedHashTable<v8::internal::OrderedHashSet,1>::NumberOfElementsOffset+33302
 3: 00007FF636F76086 node::OnFatalError+294
 4: 00007FF63784150E v8::Isolate::ReportExternalAllocationLimitReached+94
 5: 00007FF63782638D v8::SharedArrayBuffer::Externalize+781
 6: 00007FF6376D081C v8::internal::Heap::EphemeronKeyWriteBarrierFromCode+1516
 7: 00007FF6376BB45B v8::internal::NativeContextInferrer::Infer+59243
 8: 00007FF6376A098F v8::internal::MarkingWorklists::SwitchToContextSlow+57327
 9: 00007FF6376B45DB v8::internal::NativeContextInferrer::Infer+30955
10: 00007FF6376AB6FD v8::internal::MarkCompactCollector::EnsureSweepingCompleted+6269
11: 00007FF6376B382E v8::internal::NativeContextInferrer::Infer+27454
12: 00007FF6376B77BB v8::internal::NativeContextInferrer::Infer+43723
13: 00007FF6376C1012 v8::internal::ItemParallelJob::Task::RunInternal+18
14: 00007FF6376C0FA1 v8::internal::ItemParallelJob::Run+641
15: 00007FF6376948A3 v8::internal::MarkingWorklists::SwitchToContextSlow+7939
16: 00007FF6376ABBAC v8::internal::MarkCompactCollector::EnsureSweepingCompleted+7468
17: 00007FF6376AA3F4 v8::internal::MarkCompactCollector::EnsureSweepingCompleted+1396
18: 00007FF6376A7F58 v8::internal::MarkingWorklists::SwitchToContextSlow+87480
19: 00007FF6376D65A1 v8::internal::Heap::LeftTrimFixedArray+929
20: 00007FF6376D8685 v8::internal::Heap::PageFlagsAreConsistent+789
21: 00007FF6376CD931 v8::internal::Heap::CollectGarbage+2033
22: 00007FF6376CBB35 v8::internal::Heap::AllocateExternalBackingStore+1317
23: 00007FF6376EBF27 v8::internal::Factory::NewFillerObject+183
24: 00007FF63741BFB1 v8::internal::interpreter::JumpTableTargetOffsets::iterator::operator=+1409
25: 00007FF6378C9EBD v8::internal::SetupIsolateDelegate::SetupHeap+463949
26: 00000218ACDFAEDC
```

どうも調べてみたら、大規模サイトでは多くの静的サイトジェネレーターでデプロイ時間が遅くなる傾向があるそうです。当然の話ですね。しかし、Hugoを使うと爆速でできるらしいことがわかりました。

今回は大規模サイト構築の第一歩として、Hugoのインストールから編集方法まで説明したいと思います。

# Hugoのインストール

まずはローカルにHugoをダウンロードしてインストールしていきます。

## Hugo本体のダウンロードとインストール

[Hugoの公式ドキュメント](https://gohugo.io/getting-started/installing/)では第一にbrewという命令を用いたMacでのインストール方法が、次にChocolateyなどを用いたWindowsのインストール方法が紹介されていますが、なぜか私の環境ではうまく行きません。

そんなに難しく考えることはなく、以下のサイトからZIPでダウンロードをして解凍すればひとまずはインストールできます。

https://github.com/gohugoio/hugo/releases/tag/v0.87.0

それぞれの環境にあったものをダウンロードしましょう。Windows
10の場合はhugo_0.87.0_Windows-64bit.zipかhugo_extended_0.87.0_Windows-64bit.zipになってきますが、のちのち便利そうなので容量に余裕があればhugo_extended_0.87.0_Windows-64bit.zipを入れます。

解凍したファイルは適当な場所に入れましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1914981/76222dc3-e67d-43a3-4e29-d439a9da03a8.png)

ここではデスクトップにhugoというフォルダを作り、その中にbinというフォルダを作成して、解凍したファイルを入れます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1914981/ff775e92-0fb5-7c1f-55c6-194628e16074.png)

## Pathを通す

続いてコマンドプロンプトから操作できるようにPathを通します。

Windowsキーを右クリック→システム→システムの詳細設定→環境変数（N）…をクリックして行き、「システム環境変数」の「Path」を選び、編集します。この場合、「新規」を選び、場所を先ほどHugoを置いたフォルダ（私の場合はC:\\\...\Desktop\hugo\bin）を入力します。これでOKを押せばPathが通った状態になります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1914981/b4690fbf-20e0-6c62-9d9d-51ed77660e72.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1914981/0c8a9e77-3f00-ec8e-0c11-82744e513d6f.png)

ためしにWindowsキーを押してcmdと入力し、コマンドプロンプトを立ち上げましょう。

そこで

`hugo -help`

と打っていろいろと表示されれば成功です。おめでとうございます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1914981/11b2e43a-e1ca-a232-ec6e-80853ae7fa27.png)
これで準備は万端です。それでは進んでいきましょう。

コマンドプロンプトでhugoフォルダまで移動します。

私はDドライブに作ったので

```cd c:\\...\desktop\hugo```

と打って移動します。cd のあとはドラッグ＆ドロップでも行けるようです。

移動してから新サイトを作ります。

```hugo new site example```

と打ってみましょう。最低限のディレクトリが構成されたはずです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1914981/9e33b785-c0f7-9197-cce9-0ae631befe5b.png)

ここで

```cd example```

と移動して

```hugo server```

と仮想サーバーを立ち上げると http://localhost:1313/ にページが真っ白なページが表示されるはずです。これで第一段階はできました。

## Hugoテーマのインストール

Hugoには多くのテーマがあります。逆に何かテーマを入れないと何も表示されません。ここではMinimalをインストールすることにします。

+ Themes https://themes.gohugo.io/
+ Minimal https://themes.gohugo.io/themes/minimal/

ここもGitコマンドを使うとか難しいことはせずに、単純な方法で行きます。

[Minimalのページ](https://themes.gohugo.io/themes/minimal/)の「Download」と書いてあるところからGithubに飛び、ZIPでダウンロードをし、解凍します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1914981/f3b33e65-8844-a304-c5ea-eccd6bffd3f0.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1914981/640461a4-e41b-2451-80c8-ee948f8aca68.png)

末尾にある-masterの文字列は不要ですので消します。

解凍したフォルダを c:\\...hugo\example\themes の下に入れます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1914981/689e20d6-2a8d-054c-25dd-1ec625a51105.png)

C:\\...\Desktop\hugo\example\themes\minimal\exampleSiteの中を開き、中にあるファイルをすべてコピーして
D:\hugo\example\にペーストします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1914981/fa8a79d4-9cc6-f50c-f504-c0544366410a.png)
既存のファイル、フォルダは上書きしてください。

この段階で

`hugo server -D`

とコマンドプロンプトで入力し、仮想サーバーを再度起動させましょう。

すると以下のようなサイトが表示されたはずです。おめでとうございます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1914981/67c69878-bb52-1c76-81f7-d2554a2382fa.png)

## Miminalの編集
Minimalの編集をしていきます。

### 既存ファイルの編集
まずはAboutの中身を変えます。Hugoの場合、contentフォルダにすべてのコンテンツが入ります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1914981/6eb90e64-f977-cf38-ae74-3865c023f1e6.png)

ここにあるabout.mdをマークダウン記法で書き換えます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1914981/25f52128-137d-dcdb-c0bd-37a88d94b6fa.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1914981/a8ddbfed-0d4a-e8bc-e4eb-4b6b5859d432.png)

このようにして書き換わりました。

### 新規ファイルの作成
新規ファイルの作成はnewコマンドを使います。

```
hugo new contacts/index.md
```
さらにメニューはexample直下のconfig.tomlファイルで管理しているため、そこに書き加えます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1914981/9c17f44c-465d-4a21-a1dc-22fa78f3762a.png)

これでナビゲーションのメニューも加えることができました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1914981/89681c3a-8d60-67c1-7b22-2c11c863a12c.png)

Hugoはこうして使っていくのが一番早道のように見えます。


参考記事一覧：

https://css-tricks.com/comparing-static-site-generator-build-times/


https://jamstack.org/generators/


https://tech-ja.netlify.app/articles/ja527232/index.html


https://knowledge.sakura.ad.jp/22908/


https://blog-dai.com/hugo-windows-install-howto/