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

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

Hugoインストール

Macでのインストール方法

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

$ brew install hugo

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

Windowsでのインストール方法

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

$ choco install hugo -confirm

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

パッケージ管理マネージャー（HomebrewやChocolatey）を利用していない場合でも、以下の通りバイナリファイル（実行ファイル）をダウンロードして、適切なパスを通すことで利用できます。

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

Releases · gohugoio/hugo

Windowsの場合

• hugo_0.34_Windows-32bit.zip
• hugo_0.34_Windows-64bit.zip

Macの場合

• hugo_0.34_macOS-32bit.tar.gz
• hugo_0.34_macOS-64bit.tar.gz

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で始める静的サイト構築入門　静的サイトジェネレーターで作る自作サイト (技術の泉シリーズ（NextPublishing）)

インプレスR&D

AmazonKindle楽天市場Yahoo!ショッピング