Hugo特徴

こんにちはnasustです。 機能の特徴について解説します。

機能の特徴

機能の特徴は以下の通りです。

  • 最速の静的サイトジェネレーター
  • 記事中心のCMS
  • MarkdownをテンプレートでHTMLに変換
  • 編集内容を瞬時に反映するライブリロード
  • SASS/SCSSサポート
  • テーマのサポート

最速の静的サイトジェネレーター

静的サイトジェネレーターはコンテンツをHTMLに変換するソフトウェアです。 いくつかの静的サイトジェネレーターはありますがHugoはその中で最速です。 1ページ 1ms以下でHTMLを生成します。 一瞬でウェブサイトが出来ます。

Hugoのメリット、デメリットを解説します。 WordPressはメジャーで分かりやすいので比較しながら解説します。

メリット

  • ウェブサイトが高速で表示されます
    • シンプルなHTMLのファイルを読み込むだけなので工夫しなくても高速で表示されます。
    • WordPressも工夫すれば高速ですが、CPUやデータベースのリソースを消費しないので低コストで高速化出来ます。
    • CDNの相性が良いので高速化しやすいです。
    • 静的なHTMLだけを設置できる無料のサービスがあるので低コストで公開出来ます。
  • HTMLだけなのでセキュリティの問題が少ない
    • WordPressの問題はメンテナンスしないとセキュリティの問題が発生することです。それがありません。
    • メンテナンスフリーなので運用の負荷が低いです。
      • メンテナンスし辛い状況での運用で向いています。
      • 運用負荷が低いので複数のサイト運用しやすいです。
  • 文章をGitHubなどで管理できます。GitHubの作業フローで作業できます。
    • チームで文章を書いたり、レビューしたりと便利です。

デメリット

  • マイナーです。
    • 参考文献が少ないです。
    • Hugoのテーマを作成出来るウェブデザイナーは少ないです。
    • エンジニアやウェブデザイナーが使用しているツールの印象です。
  • ヘッドレスCMSなので管理画面が無いです。
    • Netlify CMSなど利用すれば一応出来ます。
  • WordPressのようにプラグインの配布が無いです。
    • プラグイン無しで色々実現するにはテンプレートをカスタマイズ必要があります。
  • 動的コンテンツに弱いです。
    • JSONファイルを生成できるのである程度は出来ますが、それだけで対応出来ない場合があります。
  • ウェブサイトだけで更新出来ないです。
    • 生成したHTMLをアップロードする必要があります。
  • ドキュメントが開発者向けで一部ユーザーフレンドリーじゃない。
    • Hugoで使用しているオープンソースのドキュメントを読んで、という場合がある。

工夫すればデメリットは、ある程度解消できます。 例えばランキングなどはJavaScriptやAPIの開発すること出来ます。 ただ工夫などはエンジニアなど技術がある人じゃないと出来ないです。

記事中心のCMS

ブログのような記事中心のCMSです。

ただしWordPressがブログ以外にも使用出来るように Hugoもカスタマイズ次第で色々なウェブサイトの形式に対応出来ます。

ブログにある記事一覧やタグ別の一覧なども対応出来ます。 また記事の抽出条件をテンプレートのカスタマイズで色々出来ます。

記事中心ですがJSONやXMLのデータもテンプレートでHTMLに変換出来ます。

MarkdownをテンプレートでHTMLに変換

MarkdownをHTMLに高速変換します。

タイトルやタグなどの情報はフロントマターを本文の前に書きます。

フロントマターの例

---
title: "ブログのタイトル"
date: 2019-12-29T00:00:00+09:00
draft: false
tags:
    - "雑記"
    - "WEB"
---

本文
〜〜〜

yaml

例の場合は、yamlで記述しています。他にもtoml,jsonをサポートしています。 この情報はテンプレートから参照する事が出来ます。 フロントマターは自由に情報を定義する事が出来ますので色々活用出来ます。

編集内容を瞬時に反映するライブリロード

Hugo自身にHttpサーバーが内臓しています。 Webサイトをローカルで閲覧する事が出来ます。

Httpサーバーを動作させながら Markdownを編集して保存すると、瞬時に反映されたWebページが表示されます。

テンプレートやCSSや画像などWebサイトのアセットも編集すると反映されます。

SASS/SCSSサポート

HugoだけでSASS/SCSSをCSSに変換してくれます。ライブリロードも対応しています。

テーマのサポート

Hugo Themes

Hugoはテーマをサポートしています。上記のサイトでテーマを配布しています。 古いテーマは最新のバージョンに対応していない場合があるので注意してください。

Hugo Theme Star Ranking: The Popular Theme List for Hugo.

どのテーマが人気あるかは上記のサイトで確認出来ます。

prevnext