SIS Lab

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

January 8, 2017 January 27, 2018

静的ジェネレータ「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

表示されました!!

スポンサーリンク