1
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 1 year has passed since last update.

Webサイトを最速で構築するフレームワーク Hugo

Last updated at Posted at 2022-09-04

Hugo-logo.png

Hugo(ヒューゴ)と読みます。要は、SSG(Static Site Generator)こと静的サイトジェネレーターです。 Markdown 形式で追加/編集ができるため、とても手軽で簡単に、かつ無料で使えます。

公式の Quick Start を意訳しているだけです

まずは完成形から

ステップ1:Hugo をインストールする

brew install hugo

ステップ2:新しいサイトを作成する

今回はhugoQuickstartという名前のディレクトリを作成します。

hugo new site hugoQuickstart

ステップ3:テーマを追加する

テーマはこちらの『Ananke Gohugo Theme』を使用します。
そのほかのテーマは 『themes.gohugo.io』から探すことができます。

cd hugoQuickstart
git init
git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke

次のコマンドでテーマをサイト構成に追加します。

echo theme = \"ananke\" >> config.toml

ステップ4:コンテンツを追加する

hugo new posts/my-first-post.md

作成したコンテンツを開いてみます。draft: trueにしておくと公開ページから除外できます。

$ cat content/posts/my-first-post.md
---
title: 'My First Post'
date: 2021-04-01T12:00:00+09:00
draft: true
---

ステップ5:Hugoサーバーを起動する

hugo server -D

http://localhost:1313/ にアクセスしてください。
コマンドを叩いてきただけですが、一瞬で Webサイト が構築できました。

ステップ6:テーマをカスタマイズする

細かい設定はconfig.tomlでできますが、割愛します。テーマごとに設定内容が異なるため、構成オプションについては、追加したテーマサイトを参照しましょう。テーマサイト

ステップ7:静的ページを作成する

最後に次のコマンドを叩くことで静的ページが作成されます。作成したページは ./public/ に出力されます。こちらをお好きなところにアップロードするだけで公開完了です。自動デプロイをする場合は、このあたりを確認してみると良いでしょう。

-Dオプションはドラフト版も public フォルダに出力します。
hugoコマンドオプション

hugo -D

github pages に反映されない場合

[Settings]-[Pages]
のSourceでブランチ指定が外れている場合があるため、設定し直してあげる必要がある。

参考

1
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
1
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?