Hugo を使った 個人サイトの作り方 1 インストール編

tech 1599字：読了まで約2分57秒

Hugo アイキャッチ画像

Hugoのインストール

Hugo を利用できるよう、Windows 10 Home にインストールします。

ここで哀しいお知らせです。Hugo は基本的にコマンドライン（ドラマでハッカーがよく入力してる黒背景の窓）で操作します。

Githubからパッケージをダウンロードし、パスを通すという方法もありますが、バージョン管理なども面倒ですし、今回はコマンドラインベースで作業していこうと思います。

コマンドラインは 「Windows システムツール」＞「コマンドプロンプト」が標準ですが、簡易すぎるきらいもあるので「Windows Powershell」を使用します。 Powershellはおそらく標準で入っていると思いますが、なければインストールします。

Scoopの利用

続けて、ソフト管理アプリ Scoopをインストールします。 Scoopはいちいちインストールに管理者権限を必要としないのでラクです。

Powershell を開いて、以下の二行コマンドを入力します。Scoopの公式サイトに書いてあるのをコピペしてきました。

Set-ExecutionPolicy RemoteSigned -Scope CurrentUser
irm get.scoop.sh | iex

実行権限を付加して、Scoopインストールを行うというコマンドです。 あとは自動的に進みます。Scoop was Installed Successfully!とコマンドプロンプトが喜んだら無事に終了です。

さて、肝心の　Hugo をインストールします。二種類ありますが基本的には Hugo Extended を選びます。

  1. CSS拡張のSASSが利用可能になる（一部テーマでは必須らしい）
  2. 新しい画像圧縮方式のWebPを使用できる。

の二点が特色です。

コマンドラインに以下のコマンドを打ちます。

scoop install hugo-extended

hugo-extended’ (0.109.0) was installed successfully!

コマンドプロンプトが緑文字で喜びを訴え、これでHugo 本体のインストールは終了しました。

新しいサイトの作成

続けて、コマンドラインで cd [任意の作業用フォルダの場所] と入力し、作業用フォルダに移動します。（説明のため、C:\newsite\sitenameとしようと思います） そしてコマンドラインで以下を実行します。

hugo new site [サイト名]

コマンドプロンプトがまたもや喜びます。

「Congratulations! Your new Hugo site is created in C:\newsite\sitename.」

ディレクトリやファイルなど、基本的なサイトの雛形が作成されました！

ディレクトリ構造

ディレクトリ構造は以下のようになっています。

C:\NEWSITE\SITENAME
│  hugo.toml(config.toml)　※サイト全体の設定ファイル。v0.110.0から名称変更。
├─archetypes　※マークダウンファイル新規作成用テンプレートが入っている。
│      default.md
├─assets　※SASSファイル等を利用するときはここに入れる。
├─content ※コンテンツ本体となるmarkdownファイルを入れる。./content/post/指定テーマもある。
├─data　※サイト全体から参照できるデータファイルを入れる。簡易データベース。
├─layouts ※テーマを改造したい場合、themesフォルダ内部を直接編集せず、ここにコピーしたファイルを改定する。
├─public　※公開用ファイルがHugoによって作られる。中身をサーバーにアップロードすることでサイトが公開される。
├─static　※画像、CSS、Javascriptなどリソースを入れていく。Hugoによって./public/以下にコピーされる。
└─themes　※外観や構成などを制御するテーマファイルを入れる。

インストールが完了し、次からは具体的な作業に入っていきます。

Hugoでサイトを表示するためのテーマ利用に便利なので、GitをインストールしGithubアカウントも作っておくといいかと思います。Gitについて説明し始めると大幅に脱線するので本シリーズでは省略します。

関連記事