静的サイトはデータをそのまま配信するため，セキュリティと速度に優れます．
静的サイトジェネレータは記事となるファイルから静的サイトを生成するソフトウェアです．
多くのジェネレータは，執筆が簡単かつ記事の再利用が容易であるという特長があるMarkdown形式で執筆された記事からサイトを生成することができます．
このページでは，静的サイトジェネレータの1つであるHexoについて説明します．

自サーバー内で出力する場合には，上のような設定は必要ありません．
_config.ymlの出力先フォルダpublicを出力先の絶対パスにすることによりhexo deployコマンドで直接デプロイすることができます．
この場合にも，hexo cleanはhexo deployの出力先と同じ場所からサイトを削除します．

GitHub + Netlify

Netlifyでサイトを公開するにはまず，NetlifyからGitHub上にあるプロジェクトのリポジトリを選択します．
git pushされたとき自動でビルド・デプロイされるようになるが，そのビルドコマンドとしてはhexo generateを指定し，サイト出力先フォルダは(_config.ymlで変更していない限り)public/とします．

独自ドメインからサブドメインを利用したい場合，まずDomain Management > Custom Domains > Add domain aliasと進み，独自ドメインにおいて利用したいサブドメインを登録します．
そして，DNSサーバーにて，対象のサブドメインのCNAMEで値をNetlifyのサブドメインに設定します．

テーマ

Tranquilpeak

Tranquilpeakはサイドバー付きのレスポンシブ対応テーマです．

次のmarkdownファイルを作ると，それから生成されるhtmlがカテゴリー別の記事一覧となります．

---
title: "ページのタイトル"
layout: "all-categories"
comments: false
---

同様にして，layout: "all-tags"とすればタグ別の記事一覧，layout: "all-archives"とすることでアーカイブページを作成できます．

記事でと書いておくと，そこに目次を作ってくれます．

テーマのコンフィグファイルはテーマのディレクトリにある_config.ymlと，日本語設定に関するlanguages/ja.ymlの2つです．

記事作成時刻だけでなく更新時刻も表示したい場合は，テーマ内のlayout/_partial/post/meta.ejsを加工します．

<time datetime= 中略
</time>

<% if (post.updated) { %>
	<i class="fas fa-redo"></i>
	<time datetime="<%= post.updated.format() %>">
		<% if (post.lang) { %>
			<%= post.updated.locale(post.lang).format(__('date_format')) %>
		<% } else { %>
			<%= post.updated.locale(page.lang).format(__('date_format')) %>
		<% } %>
	</time>
<% } %>

<% if ((post.categories) 以下略

記事中では文章の強調に特殊なタグを用いることができます。
例えば、囲み文字の強調スタイルを使うなら、

{% alert danger %}
Here is a danger alert
{% endalert %}

とします．
info・success・warning・dangerを使用可能です．

テキストにマーカーをつけるには

{% hl_text danger %}
your highlighted text
{% endhl_text %}

とします．
primary・success・warning・dangerやいくつかの色名（例えば，green）を使用可能です．

Book

Bookテーマを使用すると，本のようなデザインになります．
_postディレクトリにhome.mdとmenu.mdを入れてブログを生成します．
home.mdはindex.htmlになり，menu.mdは左カラムになります．
テーマのコンフィグで指定すれば，home.mdやmenu.md以外のファイル名も使用可能です．

menu.mdでは，#奇数個で始めた表示ありの見出し，偶数個の折り畳み見出し，*等の箇条書きによって項目を列挙します．
たとえば，

# 大見出し1
## 折り畳まれる見出し1
* 項目1a
* 項目1b
## 折り畳まれる見出し2
* 項目2a
* 項目2b

# 大見出し2
（以下略）

です。
なお、右カラムには各記事ページの目次が自動生成されます。

メタディスクリプションを使用するため、テーマbook/layout/_partial/head.ejsで、以下を追加します。

<% if (page.excerpt) { %>
    <meta name="description" content="<%= page.excerpt %>">
<% } else if(config.description) { %>
    <meta name="description" content="<%= config.description %>">
<% } %>

これにより，投稿記事のフロントマターでexcerptによって記述した内容がメタディスクリプションとなります．

プラグイン

サイトマップ生成

hexo-generator-sitemapでサイトマップを作ることができます．

プラグインのインストールは次で行います．

npm install hexo-generator-sitemap --save

_config.ymlには次を加えます．

sitemap:
  path: sitemap.xml
  template: ./sitemap_template.xml
  rel: false
  tags: true
  categories: true

上から順に，

出力されるサイトマップのファイルパス
カスタムテンプレートの在処
ヘッダーにrel-sitemapを含めるかどうか
タグを含めるかどうか
カテゴリーを含めるかどうか

です．
また，上述のリストはデフォルトの値の通りです．

特定の記事をサイトマップから除外したい場合，個別の記事のフロントマターに以下を加えます．

sitemap: false

カテゴリーの自動分類

Hexoのカテゴリーを毎回書かなくても済むようにするために，ディレクトリによってカテゴリーが決まるプラグインhexo-directory-categoryをインストールするには，自分のブログのフォルダで

npm install --save hexo-directory-category

とします．

_config.ymlには次を追記します．

auto_dir_categorize:
  enable: true  # options:true, false; default is true
  force: false # options:true, false; default is false

forceオプションがtrueなら，各記事でフロントマターに書かれている既存のカテゴリーを無視して，フォルダに従ってカテゴリーを付け直します．

hexo-auto-categoryというプラグインが記事原本のフロントマターを書き直してしまうのに対し，hexo-directory-categoryは生成されるファイルのみが書き換えられる点が優れています．

記法の拡張

hexo-renderer-markdown-itを使い，markdown-itによる記法拡張を行うことができます．

既存のレンダラーをアンインストールして，hexo-renderer-markdown-itをインストールするには，

npm un hexo-renderer-marked --save
npm i hexo-renderer-markdown-it --save

とします．

次は，github上のドキュメントに書かれた_config.ymlに書く内容の例です．

# Markdown-it config
## Docs: https://github.com/celsomiranda/hexo-renderer-markdown-it/wiki
markdown:
  render:
    html: true
    xhtmlOut: false
    breaks: true
    linkify: true
    typographer: true
    quotes: '“”‘’'
  plugins:
    - markdown-it-abbr
    - markdown-it-footnote
    - markdown-it-ins
    - markdown-it-sub
    - markdown-it-sup
  anchors:
    level: 2
    collisionSuffix: 'v'
    permalink: true
    permalinkClass: header-anchor
    permalinkSymbol: ¶

例えば，markdown-it-supとmarkdown-it-subプラグインは添字を有効にします．

テキスト^上付き添字^
テキスト~下付き添字~

markdown-it-footnoteプラグインは脚注を有効にします．

ただのテキスト[^ラベル]
[^ラベル]: 脚注の文章

markdown-it-deflistプラグインは定義リストを有効にします．

専門用語
:   定義

記事を隠す

古くなった記事を非表示かつnoindexするには，hexo-hide-postsプラグインを使用します．

インストールは

npm install hexo-hide-posts --save

で行えます．

記事のフロントマターにhidden: trueを加えると，そのページにプラグインが適用されます．

プラグインが適用されると，カテゴリー，タグ，アーカイブ，サイトマップなどからページが隠され，デフォルトではnoindexメタタグも埋め込まれます．
ただし，ページのURLを直打ちすればアクセスすることができます．

_config.ymlの諸設定は以下のとおりです．

# hexo-hide-posts
hide_posts:
  # フロントマターのオプション名を「hidden」以外の名称にしたい場合
  filter: hidden
  # 全記事を表示するジェネレータ。
  # 共通のジェネレータには、index, tag, category, archive, sitemap, feedなどがある。
  public_generators: []
  # noindexメタタグを加えるかどうか
  noindex: true

ブログ内でhexo hidden:listとコマンドを打つと，隠した記事の一覧を取得することができます．

Hexoで静的サイトを生成する

目次

インストール

macOS 11の場合

CentOS 8の場合

CentOS 7の場合

ブログ作成

設定

設定ファイル

生成時に.htaccessを含める

記事作成

新規作成

フロントマター

WordPressからHexoに記事を移行する場合

ブログの生成

デプロイ

SFTP

自サーバー