本記事ではHugoのインストール方法、ブログの作成、記事の書き方について、わかりやすく一つ一つの手順を省かずに解説する。

前提知識はゼロでも大丈夫。 ちなみに本ブログのフロントエンドは全てHugoによって作成されている。

1.Hugoのダウンロード

Hugoのダウンロードページを開く。

https://github.com/gohugoio/hugo/releases

Show all 23 assetsをクリックし、ファイルをダウンロードする。

ファイル名：hugo_0.113.0_windows-amd64.zip

配置場所パスはどこでもよいが、筆者は下記フォルダに配置している。

ファイルパス：C:\Users\test\Downloads\work\hugo_0.112.7_windows-amd64

2.環境変数pathの設定

設定時以降は、1度も触らない設定になるため、環境変数について理解していなくてもよい。 （行わないとエラーになる）

設定の検索バーに、「環境変数を編集」と入力し、環境変数を開く。

環境変数からPATHを選択し、編集をクリックする。

環境変数の編集画面で、新規をクリックし、先ほどのファイルパスを入力する。 最後にOKをクリックし、画面を閉じる。

3.ブログデザイン・テーマの選択・設定

Hugoでは、ブログのデザイン・テーマを選択することが出来ます。

多くのテーマが用意されているが、テーマごとに設定方法が異なるため、今回は下記リンクからテーマを設定する。

3-1.ブログテーマのダウンロード

筆者は下記リンクのテーマを、カスタマイズしてこのブログを運用している。 （カスタマイズについては、ブログの終盤で説明している）

https://github.com/lgaida/mediumish-gohugo-theme

Codeから、Download ZIPをクリックする。 ダウンロードしたテーマは少し後で使う。

3-2.Hugoコマンドでブログの大枠を作る

ここからはHugoコマンドをコマンドプロンプトから入力していくが、マネするだけで大丈夫なので、理解していなくてもよい。

フォルダのバーをクリックし、cmdと入力する。

エンターを押すと、コマンドプロンプトが開くので、hugo new site sample と入力し、enterを押す。

そうすると、sampleという名前のフォルダが生成される。

次に、先ほどダウンロードしたテーマを、themesフォルダ内に移す。

もう一度、フォルダのバーをクリックし、cmdと入力し、エンターを押す。

次はコマンドプロンプトに、hugo new blog/my-first-post/index.mdと入力し、エンターを押す。

そうすると、blogフォルダ内に、index.mdが生成される。

index.mdに例として下記文章をコピペする。これで完成だ。

---

title: "My first post"

publishdate: 2018-10-07T11:17:14+02:00

tags: ["post", "interesting"]

type: "post"

---

# Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean semper libero quis dictum dapibus. Nulla egestas vitae augue eu rutrum. Duis ullamcorper dictum ipsum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse tortor dui, fermentum non dapibus id, volutpat non odio.

3-3.ブログ・デザインの確認

ここまでで、ブログの大枠は完成になるため、実際の表示を確認する。

再度、sampleフォルダのフォルダバーからcmdを開き、hugo serverと入力する。

そうしたら、ブラウザーに下記の通り入力することで、ブログのプレビューが表示される。

http://localhost:1313/blog/

3-4.HTMLファイルの生成

今までで作成したブログを下記の手順でHTMLファイル等に生成する。

再度、sampleフォルダのフォルダバーからcmdを開き、hugoと入力する。

そうすると、フォルダにHTMLファイル等が生成されている。