Hugoの下書きポスト作成方法 - Draft Page

ここでは、HugoでDraft Pageを作成する方法について説明します。
Tags:

下書きポスト

Hugoの下書き(draft)機能は、未完成の記事ファイルを一時的に他の記事と同じ場所へ保存する機能である。ページのFront matter部分にdraft: trueと記入されている場合、そのページは下書きとして扱われる。

YAML形式の場合

---
draft: true
---

本文

TOML形式の場合

+++
draft = true
+++

本文

下書きとして作成されたポストは、基本的にHTMLファイルとして出力されない。下書きポストも出力したい場合は、hugoコマンドに-D(--buildDrafts)オプションを指定する。

下書きポストを出力

% hugo -D         # サイトを生成する場合
% hugo server -D  # サーバーを起動する場合

publicディレクトリに出力される下書きポストに注意

hugoコマンドはデフォルトでpublicディレクトリにHTMLファイルなどを出力するが、このときpublicディレクトリ内に既に存在する下書きポストは削除しない。

% hugo -D  # これでdraftポストを含めて生成される。
% hugo     # 次にdraftモードOFFで生成しても、既存の下書きポストは削除されない。

Webサイトを公開するときは、下書き記事が誤ってアップロードされないよう注意が必要である。ポストをアップロードする前にpublicディレクトリを削除し、その後hugoコマンドで再生成する方が安全である。

Linux / macOSの場合

% rm -Rf public && hugo

Windowsの場合

C:\> rmdir /s /q public & hugo

下書きポスト一覧の確認

コマンドラインで確認

コマンドラインでhugo list draftsを実行すると、contentディレクトリ内のポストのうち、下書きとしてチェックされている、つまりFront matterにdraft: trueが設定されている一覧を確認できる。

% hugo list drafts
content/draft.md
content/post/sample2.md

参考: hugo list drafts | Hugo

テンプレートで確認

テンプレートファイルで下書きポストへのリンクを列挙するには、まず次のように記述する。

layouts/index.html

<h2>Draft Pages</h2>
<ul>
  {{ range (where .Site.Pages ".Draft" true) }}
    <li><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
  {{ end }}
</ul>
  • where .Site.Page ".Draft" trueとなっている部分は、下書きポストを抽出するための検索条件を指定している。
  • サイトのすべてのページ(.Site.Pages)から、ページ変数.Draftの値がtrueである(".Draft" true)ものを列挙するよう指定している。

そして、起動コマンドに-Dオプションを付けて実行する。

% hugo server -D

ポストが下書きかどうかを判別する

テンプレートファイルで、現在レンダリング中の記事が下書きかどうか、つまりFront matterにdraft: trueと書かれているかを確認するには、Page変数である.Draftを参照する。

layouts/_default/single.html

<h1>{{ .Title }}</h1>
{{ if .Draft }}
  <b>注意: このポストはまだ下書きです。</b>
{{ end }}

もちろん、起動時はコマンドに-Dオプションを付けて実行しなければ表示されない。