Hugo で新規 Web サイトの作業環境を作成する(hugo new site コマンド)

ここでは、Hugo を使用して、新しく Web サイトを構築するための手順を示します。

hugo のインストールは、次のような構成とします。

C:\hugo
  |- bin
  | |- hugo.exe
  |- sites

サイトのスケルトンを生成する

新規にサイトを作成するには、 hugo new site コマンドを使用して Web サイトのひな型を作成します。

例えば、 新規に hoge_site サイトを作成する場合、次のように実行します。

C:\hugo> cd sites
C:\hugo\sites>hugo new site hoge_site
Congratulations! Your new Hugo site is created in C:\hugo\Sites\hoge_site.

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.

ひな形として作成されるファイルやディレクトリは、次の構造となります。（２つのファイルといくつかのディレクトリ）

hoge_site/
  |- archetypes （新しいページを作成するときのひな形）
  |  |- default.md
  |- content （記事の作成場所。Markdown 形式のファイルを作成）
  |- data    （サイト生成時に利用するデータ）
  |- layouts  (レイアウトテンプレート）
  |- static  （画像ファイルやスタイルシートなどの保存先。サイト生成時にそのままコピーされて使用するファイルを置く）
  |- themes  （テーマの保存先。実際にどのテーマを使用するかは config.toml で指定する）
  |- config.toml （サイト全体の設定）

生成されたファイルやディレクトリ

hugo new site コマンドで生成されたファイルやディレクトリの役割は、ざっくり次のようになります。

archetypes

記事を書くた時に「〇〇.md」というファイルを作成するのですが、この記事ファイルのひな形となるファイルを置くディレクトリになります。新しく記事を書くコマンドを実行したとき、このファイルの内容を元に記事ファイルが作成されます。（default.md）

config.toml

サイト全体の設定をするファイル。

content

記事の作成場所になります。Markdown 形式のファイルで作成します。

data

サイトで使うデータを配置します。

layouts

サイトのレイアウトを決めるファイルを配置します。

static

画像ファイルやスタイルシートなどを配置します。ここに置いたファイルはサイト生成時にそのまま公開用のディレクトリにコピーされます。