4
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2021-08-20

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

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

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

1000を超えるページ数のあるウェブサイトの場合、Gatsbyではデプロイするにもヒープメモリの不足から「JavaScript heap
out of memory」とエラーが出て止まってしまいます。
image.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の公式ドキュメントでは第一に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を入れます。

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

image.png

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

image.png

Pathを通す

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

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

image.png
image.png

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

そこで

hugo -help

と打っていろいろと表示されれば成功です。おめでとうございます。
image.png
これで準備は万端です。それでは進んでいきましょう。

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

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

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

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

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

hugo new site example

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

ここで

cd example

と移動して

hugo server

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

Hugoテーマのインストール

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

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

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

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

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

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

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

この段階で

hugo server -D

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

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

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

###既存ファイルの編集
まずはAboutの中身を変えます。Hugoの場合、contentフォルダにすべてのコンテンツが入ります。
image.png

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

image.png
image.png

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

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

hugo new contacts/index.md

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

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

image.png

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

参考記事一覧:

4
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?