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

9900 ワード
gatsby 静的サイトジェネレーター Hugo 静的サイトジェネレーター テキストリンク

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

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

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

1000を超えるページ数のあるウェブサイトの場合、Gatsbyではデプロイするにもヒープメモリの不足から「JavaScript heap
out of memory」とエラーが出て止まってしまいます。

<--- 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の公式ドキュメントでは第一にbrewという命令を用いたMacでのインストール方法が、次にChocolateyなどを用いたWindowsのインストール方法が紹介されていますが、なぜか私の環境ではうまく行きません。

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

それぞれの環境にあったものをダウンロードしましょう。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を入れます。

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

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

Pathを通す

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

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


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

そこで

hugo -help

と打っていろいろと表示されれば成功です。おめでとうございます。

これで準備は万端です。それでは進んでいきましょう。

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

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

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

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

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

hugo new site example

と打ってみましょう。最低限のディレクトリが構成されたはずです。

ここで

cd example

と移動して

hugo server

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

Hugoテーマのインストール

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

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

Minimalのページの「Download」と書いてあるところからGithubに飛び、ZIPでダウンロードをし、解凍します。

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

解凍したフォルダを c:\...hugo\example\themes の下に入れます。

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


既存のファイル、フォルダは上書きしてください。

この段階で

hugo server -D

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

すると以下のようなサイトが表示されたはずです。おめでとうございます。

Miminalの編集

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

既存ファイルの編集

まずはAboutの中身を変えます。Hugoの場合、contentフォルダにすべてのコンテンツが入ります。

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


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

新規ファイルの作成

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

hugo new contacts/index.md

さらにメニューはexample直下のconfig.tomlファイルで管理しているため、そこに書き加えます。

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

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

参考記事一覧：