Hugo入門 / 解説 | 爆速の静的サイトジェネレーター

こんにちはnasustです。Hugoを紹介します。

Hugoとは

The world s fastest framework for building websites   Hugo

Hugoとは、オープンソースの静的サイトジェネレーターです。

静的サイトジェネレーターというのは、 MarkdownとレイアウトのテンプレートからHTMLファイルを生成するソフトウェアです。

要するブログみたいなCMSサイトと同じようなことが出来るということですね。

ブログを想像すると分かりやすいです。 ブログは記事を書くと、エントリーのページが出来上がります。 そして、トップやカテゴリーに更新順でエントリーの一覧に乗ります。

記事を書くだけで連動して各ページが更新されます。 Hugoのテンプレートに、その連動のルールを記述することで同じことが出来ます。

Hugoの特徴

サイトの生成速度が半端なく速いです。 ほとんどのWebサイトを数秒以内に(1ページあたり1ミリ秒未満で)生成できるぐらい速いです。

「The world’s fastest framework for building websites」と謳っているだけあって、 他のサイトジェネレターより高速です。

この速度のおかげでトライ & エラーを繰り返しながら、サイトを素早く作成する事ができます。

Hugo自体にHttpサーバーが内蔵されており、文章やテンプレートを変更すると自動リロードされて瞬時に反映されます。

記事はMarkdownで記述します。このファイルが作成されるとテンプレートに 則ってHTML変換されます。

Mac、Linux、Windowsのクロスプラットフォームで動作します。

Hugoで生成されたサイトは高速で表示される

静的サイトジェネレーターなので、サイトの表示の元になるのはシンプルにHTMLになります。 その為にWordPressのようにサーバーサイドの処理が無いために高速で表示されます。

また結果的にHTMLだけなのでセキュリティの問題も起きません。

インストール

上記のページから、OSに合ったファイルをダウンロードします。 MacであればhugoX.XX.XmacOS-XXBit.tar.gz、 WindowsであればhugoX.XX.XWindows-XXBit.zipです。

他にもMacのHomebrewからインストール出来ます。

brew install hugo

解答すると、Macの場合は”hugo”、Windowsの場合は”hugo.exe”が展開されます。 これはコマンドラインのプログラムです。 実行するとサイトジェネレーション出来ます。

とてもシンプルなのでインストールは簡単ですね。

次回の記事は、Hugoで簡単なサイトを作成の仕方を解説します。

iOS、Android、Web、APIサーバーなどのフロントエンド・バックエンドを開発するソフトウェアエンジニアです。 UI/UXが好きです。かっこいいUIやWebデザインを眺めるのが趣味です。 このブログはソフトウェア開発関係の内容を記事にしています。
web service:
GitHubQiitaTwitterはてなブログ
handle name:
nasust
real name:
hideki mori
job:
ソフトウェアエンジニア
develop:
target: ios, android, web page, single page application, api server, system service, cli tool, linux embedded device

lang: c/c++, go, swift, objective-c, java, kotlin, typescript, dart, javascript, ruby, python, php

tool: vscode, xcode, android studio, photoshop, vim, docker