1. SIS Lab
  2. >
  3. Blog
  4. >
  5. 静的サイトジェネレータ「Hugo」インストール

静的サイトジェネレータ「Hugo」インストール

更新日:2019.04.27 作成日:2017.01.08

静的ジェネレータ「Hugo」のインストール方法を紹介します。

公式のチュートリアルは、こちらです。 Install Hugo

Hugoインストール

Macでのインストール方法

パッケージ管理にHomebrewを使われている方は、下記コマンドを叩けばインストールされます。

$ brew install hugo

念のため、brew install hugoの前に, brew updateで更新しておくと良いです。

Windowsでのインストール方法

パッケージ管理に Chocolatey を使われている方は、下記コマンドを叩けばインストールできます。

$ choco install hugo -confirm

バイナリ(実行ファイル)をダウンロードしてインストール

MacでHomebrewや、Windowsで Chocolatey を利用していない場合でも、以下の通りバイナリファイル(実行ファイル)をダウンロードして、適切なパスを通すことで利用することができます。

下記URLに従い、利用するWindows環境に合わせて32bit or 64bitをどちらをダウンロードします。(2018/01/27時点の最新バージョンは0.34)

Releases · gohugoio/hugo

Windowsの場合

Macの場合

Hugoでのサイト構築

まずは、下記コマンドを実行すると、Hugoを利用する上で必要なフォルダ構成が作成されます。

$ hugo new site {site name} #site nameに指定した名前のフォルダが作成される
$ hugo new site myblog.com
Congratulations! Your new Hugo site is created in /Users/meganii/tmp/myblog.com.

Just a few more steps and you're ready to go:

1. Download a theme into the same-named folder.
   Choose a theme from https://themes.gohugo.io/, or
   create your own with the "hugo new theme <THEMENAME>" command.
2. Perhaps you want to add some content. You can add single files
   with "hugo new <SECTIONNAME>/<FILENAME>.<FORMAT>".
3. Start the built-in live server via "hugo server".

Visit https://gohugo.io/ for quickstart guide and full documentation.
$ tree
.
├── archetypes
│   └── default.md
├── config.toml
├── content
├── data
├── layouts
├── static
└── themes

hugo serverとコマンドを実行すれば、直下のconfig.tomlを読み込んでサイトのプレビューができるのですが、この最低限のフォルダ構成ではなにも表示されないので、まずはテーマをインストールします。

テーマのインストール

Hugoのテーマ

$ cd themes
$ git clone https://github.com/dim0627/hugo_theme_robust.git

プレビュー

ダウンロードしたthemeを利用するには、以下の通り--themeオプションで、インストールしたテーマを指定してhugo serverを実行します。

先ほどテーマをインストールした時に、themesフォルダに移動しているので、サイト直下に戻っています。

cd .. 
hugo server --theme=hugo_theme_robust

表示されました!!

静的サイトジェネレータ「Hugo」インストール
B! Pocket
スポンサーリンク

Related contents

TECH

2017.12.22

はてなダイアリーからはてなブログ経由で独自ドメインのブログに記事を移行しました

TECH

2017.10.14

HugoでのシンタックスハイライトにPython Pygmentsが不要となった

TECH

2017.10.07

HugoのRelated Contentを利用して関連記事を表示する

TECH

2017.08.31

Hugo Shortcodesの作り方

TECH

2017.04.09

gulpで画像の最適化

TECH

2017.03.19

Hugoで生成した静的サイトのホスト先をさくらVPSからNetlifyに変更する

TECH

2017.02.25

HugoのMarkdownでtarget='_blank'を実現する方法

TECH

2017.02.18

HugoのShortcodesを利用してAmazon紹介リンクタグを作成