静的サイトジェネレータHugoインストール【windows10ローカル】

静的サイトジェネレータのHugoをwindows10のローカルに構築しました。コマンドプロンプト必須です。

Macの方は本家サイトなどをチェックしてみてください。

マークアップやデザインが専門で、php等をあまり使わない方でも、将来的にはテーマ販売出来ると思います。

AWSのS3やAzure Storageなどで動的部分と切り分ける事で、サーバーやセキュリティのトラブルやコストを抑えられる事は大きいと感じています。

大企業や大学でも採用される可能性は十分にあります。身近な事例としては、Chatworkでphestを現役で利用して開発も行っている様です。

Hugoを選んだ理由

簡単そうだから(覚える事や調べる事は結構あるかも、パーツ別のディレクトリ構成など)。

githubや国内の様子や本家サイトなど、開発の継続性がありそうでユーザー数も伸びそうだから。

enbatomarketでCMSのテーマ購入時、同梱されてくる取説がHugoなどの静的サイトジェネレータで作られていると思われるものが結構あり、ドキュメントまで充実している点に感心していました。

インストール手順

目標5分以下です！行きます！

1.githubからzipをダウンロード

githubのHugoでhttps://github.com/spf13/hugo/releasesよりwindowsの64bitバージョンを選びました。

2.フォルダを作る

Hugoのbinフォルダを以下のように作ってください。CドライブやDドライブなどはパソコンのパーティション設定などを見ながら決めてください。

//Hugoのbinフォルダを作る。
C:\Hugo\bin

3.zipを展開

1.でダウンロードしたzipを展開し、hugo.exeを2.で作ったbinフォルダ内に配置してください。

4.環境変数パスを通す

画面左下のウィンドウズマークを右クリック⇒システム⇒システムの詳細設定⇒環境変数に進みます。

windowsパソコンへログインしている現状のユーザーにパスを通す場合、上部の「ユーザーの環境変数」でPathをダブルクリック⇒新規まで進み、C:\Hugo\binを入力⇒OKで各ウィンドウを閉じる。

※2.でDドライブなどにした場合は、D:\Hugo\binなど、適宜最適化してください。

5.helpコマンド動作確認

cortanaなどでコマンドプロンプトを立ち上げます。

以下のへルプコマンドを入力し、パスが通ったか確認します。

ヘルプコマンド一覧が出てきたら、インストール完了です。

//hugo ヘルプコマンド
hugo help

Hugo作業用フォルダ作成、テーマを入れてローカルホストIPで実行/停止

1.Hugoフォルダに移動

//hugoフォルダに移動
cd C:\Hugo\

2.Hugoの初期フォルダを作る

VMの作業フォルダという感じです。

//初期フォルダを作る
hugo new site InitialSites

3.作ったフォルダに移動してテーマをインストール

テーマはhttp://themes.gohugo.io/よりhugo-bootstrap-premiumを選びました。

//作ったフォルダに移動
cd InitialSites
//テーマフォルダを作る
mkdir themes
//テーマフォルダへ移動
cd themes
//テーマをインストール
git clone https://github.com/appernetic/hugo-bootstrap-premium

gitを入れていない場合、手動ダウンロードを行ってください。

4.サイトプレビュー生成

//InitialSitesに戻る。
cd ..
//サイトプレビュー生成
hugo server -t hugo-bootstrap-premium -D -w

localhost:1313

より確認できます。

config.tomlの設定ファイルや初期ページを制作していないので、上部のグロナビだけの状態です。

5.サイトプレビュー停止

中断コマンドのCtrl+Cを行ってください。停止しないとずっとプロセス続きます。

静的サイトジェネレータ各種（参考）

• jekyll
• phest（Chatwork）
• Middleman
• Metalsmith
• Pelican
• hugo