簡単な使い方

はじめに

ここでは、Quick Startに従って、簡単にHugoを使う方法を説明します。

Hugoを使うためには、インストール後、以下のステップが必要です。

新規サイトを作成する

新しいサイトを作成します。ここでは、quickstart というサイトを作成します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

$ hugo new site quickstart
Congratulations! Your new Hugo site is created in /home/user/quickstart.

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.

指定したサイト名(ここではquickstart)のディレクトリが作成され、サイトのひな型が出来上がります。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

$ cd quickstart/
$ ls -R
.:
archetypes/  config.toml  content/  data/  layouts/  static/  themes/

./archetypes:
default.md

./content:

./data:

./layouts:

./static:

./themes:

出来上がるファイル・ディレクトリの意味は以下の通りです。

名前 意味
archetypes/ ひな型ファイルを格納するディレクトリ
archetypes/default.md コンテンツのひな型ファイル
config.toml Hugoの設定ファイル
content/ コンテンツを格納するディレクトリ
data/ サイト構築の追加データを格納するディレクトリ
layouts/ サイト用のテンプレートを格納するディレクトリ
static/ 静的ファイルを格納するディレクトリ
themes/ テーマ(テンプレート)を格納するディレクトリ

テーマ(テンプレート)を追加する

Hugoを利用するには、サイトのデザインを定義したテンプレートを作成する必要があります。テンプレートは自分で作成することもできます。Hugoのサイトには、多くの人が作成した、テンプレートが、テーマとして数多く公開されています。

ここでは、Ananke Gohugo Themeを利用します。

quickstart ディレクトリで以下の操作を行います。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

$ pwd
/home/user/quickstart
$ git init
Initialized empty Git repository in /home/user/quickstart/.git/
$ git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke
Cloning into '/home/user/quickstart/themes/ananke'...
remote: Enumerating objects: 4, done.
remote: Counting objects: 100% (4/4), done.
remote: Compressing objects: 100% (4/4), done.
remote: Total 1873 (delta 0), reused 2 (delta 0), pack-reused 1869
Receiving objects: 100% (1873/1873), 4.36 MiB | 3.81 MiB/s, done.
Resolving deltas: 100% (1046/1046), done.

config.toml に、テーマ名を追加します(4行目)。themsディレクトリ配下のディレクトリ名を指定します。1から3行目も、自分に合わせた設定に書き換えます。

1
2
3
4

baseURL = "http://example.org/"
languageCode = "en-us"
title = "My New Hugo Site"
theme = "ananke"

コンテンツを作成する

テンプレートの準備ができたので、個別のコンテンツを作成します。

quickstartディレクトリで、次のコマンドを実行すると、hugo new posts/my-first-post.md, contents ディレクトリに、posts/my-first-post.md というファイルが作成されます。

1
2
3
4

$ pwd
/home/user/quickstart
$ hugo new posts/my-first-post.md
/home/user/quickstart/content/posts/my-first-post.md created

作成されたファイルは、以下の通りです。これは、archetypes/default.md を基に作成された、デフォルトのファイルです。---と---で囲まれた、部分は、Front Matterと呼ばれる、ファイルの属性を定義する部分です。

default.mdの設定に従い、タイトル(title)は、ファイル名から作成され、日付(date)は、コマンドの実行時刻が指定されます。また、draftがtrueの場合は、記事として公開されません。公開する前に、falseに変更します。

6行目以降に、内容を書いていきます。

1
2
3
4
5

+++
title = "My First Post"
date = 2020-11-08T13:23:30+09:00
draft = true
+++

ローカルで確認する

Hugoは、自分自身がウェブサーバとなり、ローカルで記事を確認することができます。以下のコマンドを実行すると、ウェブサーバが起動し、localhost:1313 にアクセスすることで、ページにアクセスすることができます。-D オプションは、draft: true とした記事も公開対象とするオプションです。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

$ hugo server -D
Start building sites …

                   | EN
-------------------+-----
  Pages            | 10
  Paginator pages  |  0
  Non-page files   |  0
  Static files     |  6
  Processed images |  0
  Aliases          |  1
  Sitemaps         |  1
  Cleaned          |  0

Built in 41 ms
Watching for changes in /home/user/quickstart/{archetypes,content,data,layouts,static,themes}
Watching for config changes in /home/user/quickstart/config.toml
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

この状態で、記事を修正したり追加したりすると、その変更が即時に反映され、ブラウザにリロードされます。

アップロード用コンテンツを作成する

さきほどは、Hugo自身をウェブサーバにしました。このときは、HTMLファイルは作成されませんでした。公開するためには、HTMLファイルを作成します。‘hugo’コマンドを実行すると、publicディレクトリ配下にHTMLファイルなどが作成されます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

$ hugo
Start building sites …

                   | EN
-------------------+-----
  Pages            | 10
  Paginator pages  |  0
  Non-page files   |  0
  Static files     |  6
  Processed images |  0
  Aliases          |  1
  Sitemaps         |  1
  Cleaned          |  0

Total in 114 ms
$ ls public/
404.html  categories/  dist/  images/  index.html  index.xml  posts/  sitemap.xml  tags/
$

コンテンツをWebサーバにアップロードする

最後に、出来上がったpublic配下のファイルを、ウェブサーバにアップロードして、一連の処理は完了です。

最終更新日

January 23, 2021

inserted by FC2 system