静的サイトジェネレータ Hexo忘備録

静的サイトジェネレータ、『Hexo』の、コマンドや設定などの忘備録です。

最初のセットアップの方法は↓以下の記事をご覧ください。

Hexoの基本操作
1. 新規にHexoブログを作る
2. Hexoブログを生成（ジェネレート）する
ローカルサーバを立ち上げる
Hexoで記事を書く手順
Hexoの投稿の削除
Hexoのテーマのヘッダー画像の変更
記事ヘッダーのメタ情報：アイキャッチの設定など
Hexoでのリンクの貼り方
Hexoでの画像の入れ方
Hexoでの目次の入れ方
1. 最初の準備
2. 投稿に目次を貼る
Hexoで「続きを読む」
HexoにGoogle Analyticsを設定する
Hexoで固定ページを作る
ヘッダーメニューに固定ページへのリンクを表示させる
Hexoをエックスサーバーで公開するには
Hexoの扱いはとっかかりが難しいが、分かると簡単！

Hexoの基本操作

新規にHexoブログを作る

新しくブログプロジェクトを作る際

hexo init (ブログ名)

ブログ名は半角英数で。終わると、ブログ名のディレクトリが生成されます。

cd （ブログ名）
npm install

これでブログのセットアップが完了です。

Hexoブログを生成（ジェネレート）する

ブログの編集が終わったら、静的ファイルを『public』フォルダに生成します。この『public』フォルダの中身だけをネットに上げます。

hexo generate

または

hexo g

以後、省略できるものについては　hexo generate(g) と記載します。

ローカルサーバを立ち上げる

hexo server(s)

http://localhost:4000 で見られるようになります。

終了するときは　ctrl + c

Hexoで記事を書く手順

新規記事を書く

hexo new post (投稿名)

投稿名は半角英数で。

source/_posts フォルダに、投稿名のファイル.md ができるので、それをエディタで開いて記事を書く。

記事を生成する

hexo g

publicフォルダの中をアップロードする。

Hexoの投稿の削除

削除するときは、コマンドではなく、『source/_post』フォルダ内の削除したい投稿を削除します。

キャッシュファイルと、『public』フォルダの中身を全部消すには

hexo clean

その後、hexo g で生成します。

Hexoのテーマのヘッダー画像の変更

ヘッダー画像はたいていの場合、themes/テーマ名/source/css/images の中にあります。

これを差し替えればOK。

ブラウザでみても変化ない場合は、Ctrl ＋ F5で再描画（キャッシュクリア）すれば変わるはずです。

記事ヘッダーのメタ情報：アイキャッチの設定など

投稿記事の一番上のヘッダー部分です。

---
title: こんにちわ
date: 2011-08-28 13:21:31
tags: 日記
toc: true
photos: img/night.jpg
---

toc	目次を入れるかどうか、なくても動く
photos	アイキャッチ、（例はsourceフォルダにimgフォルダを作って入れている）

詳細は公式リファレンスへ

Hexoでのリンクの貼り方

[リンク文字列](http://example.com)

Hexoでの画像の入れ方

色々なやり方があるみたいですが、現時点では私は単純に　soruce フォルダの中に img フォルダを作り、その中に画像を入れてアップロードし、記事内の画像を貼りたいところに

<img src="https://アドレス/img/画像名.jpg" alt="">

のタグを入れています。

追記：　 ![alt](/img/image.png) 　でも良いようです。

Hexoでの目次の入れ方

最初の準備

目次プラグインのインストールをします。

npm install hexo-toc --save

設定ファイル themes/(テーマ名)/_config.yml に以下を追加

toc:
  maxdepth: 3
  class: toc
  slugify: transliteration
  anchor:
    position: after
    symbol: '#'
    style: header-anchor

投稿に目次を貼る

目次を貼りたい記事のファイル（source/_posts/記事名.md）の、好きな場所に以下を貼る。

<!-- toc -->

※記事ヘッダーのメタ情報でも設定できるはずですが、なぜかできずにいます。

Hexoで「続きを読む」

続きを読むを表示させたいところに

<!-- more -->

HexoにGoogle Analyticsを設定する

テーマの設定ファイル（themes/テーマ名/_config.yml）に、アナリティクスのUA-XXXXXを記入するだけです。

# Miscellaneous
google_analytics: UA-XXXXXXX-XX
gauges_analytics:
favicon: /favicon.png
twitter:
google_plus:
fb_admins:
fb_app_id:

Hexoで固定ページを作る

hexo new page (ページ名)

ヘッダーメニューに固定ページへのリンクを表示させる

テーマの設定ファイル、 themes/テーマ名/_config.yml に、Pages: を追加する

# Header
menu:
  Home: /
  Archives: /archives
  Pages: /page
rss: /atom.xml

Hexoをエックスサーバーで公開するには

生成（ジェネレート）した後のpublicフォルダの中身を普通にFTPでアップロードするだけです。

Github Pagesなどにデプロイする方法についてはまた別記事で書く予定です。

Hexoの扱いはとっかかりが難しいが、分かると簡単！

HexoはWordpressその他のブログとは全く違う更新のやり方なので、最初はものすごく難しく感じますが、分かってしまえばとても簡単にブログがアップできます。

何よりメンテナンスの手間がなく、表示も爆速なので今後もしかしたら主流になってくるかもしれません。

ぜひ、体験してみてください！

尚、この忘備録は随時追加する予定です。