ところで、Hexo って 何て読むんだろ?

ブログ環境の構築で Hexo を 使ってきましたが、いよいよ「ところで、Hexo って 何て読むんだろ?」という疑問が止まらなくなってきました. また公式サイトなどを見ても読み方は言及されていないように思われます. (どっかに書いてあって気づいてないだけ?)

とりあえず 辞書系で “hexo” を 調べる

オンラインで使える英語辞書、英英辞書などを調べてみました. そもそも英単語して hexo が ないため、前方一致で別単語として出てきました. 英英辞典では入力ミスとして別単語の一覧が出ることに…
とはいえ、検索結果から見ると「ヘキソ」になるみたい.

  • 英辞郎 on the WEB
    以下のように何のことかよくわからない品物が沢山出ましたが、基本的に「ヘキソ-」で 始まるものばかりでした. 唯一 “ヘキサン酸” が 例外でした.

    • hexone 《化学》ヘキソン
    • hexoprenaline 《薬学》ヘキソプレナリン
    • hexoic acid ヘキサン酸
  • goo辞書 英和和英
    こちらも英辞郎同様でしたが、”hexo- [連結詞] hexa-の異形” が 入ってました. “hexa-“ ですと “ヘキサ (Hexa). ギリシャ語で、「6」。 – Wikipedia“ ですね.

    • hexo- [連結詞] hexa-の異形.

ネット で Hexo を 使っている人の声

やはり皆さん何て読むんだろうという 疑問 が 多く、「これだ!」と 明言されている方はいらっしゃらないように感じました. いくつか記事を引用させていただきます.

Hexo の 導入記事を公開されている 株式会社 LIG さん の 記事.

ところで、HEXOの読み方は…何て読むんでしょうね。へくそ?
所要時間3分!? Github PagesとHEXOで爆速ブログ構築してみよう! | 株式会社LIG

WordPress から Hexo (& 他ツールの調査) 記事を書かれている Uragami さん の 記事.
“名前って大事だよね” まさに、その通りです! 読めない、カッコ悪いでは他の人に紹介もいたしかねる…

まず、その「名前」。正確な発音わかりませんが、”へくそ”って・・・・
最後までGravにするかHexoにするか悩みましたが、その悩みの原因はこの名前です。
機能的問題あるわけじゃないけど、、、名前って大事だよね。
WordpressからHexoに乗り換えました - URAGAMI

YOMIKATA - ちょっと読み方決めようぜ さん
こちら、面白いサービスですね. 日本人的な読み方を ゆるく決めてしまうコンセプトが楽しい. Hexo は 投票数が少ないですが 一応「ヘキソ」ですね.

ヘキソ 6pt 67%
ヘクソ 2pt 22%
エグゾ 1pt 11%
hexo の読み方|YOMIKATA

最後に、Google 先生 は?

ニューラルネットワークの力を手に入れた Google 翻訳 では どうなるか. 教えて Google 先生!

せんせぃ… orz


スパッと決まらなかった感がありますが、私は「ヘキソ」で 行きます. もぅ頭の中は「ヘクソ」に固定化されつつありますが「へっクソ」「へっクソ」「クソ」と、リフレインするのはつらいので、がんばろう…

Hexo の フィード と サイトマップ を 設定

Hexo の トップ画面の右上にはフィードのアイコンとリングが配置されています. インストール直後では、機能しておらずクリックすると ステータスコード “404 Not Found” で “Cannot GET /atom.xml” の 文字列が画面に表示されてしまいます.

カッコ悪いのでフィードが出力されるようにし、合わせてサイトマップも出せるようにしたいと思います.

作業環境

  • Windows 7
  • Hexo 3.2

フィードの出力

Hexo の Plugin リスト から フィード関連 の Plugin を 探すと オフィシャル の hexo-generator-feed が あります. こちらを設定します.

Hexo の ソースがあるフォルダで npm install hexo-generator-feed --save を実行します. (下記例の [username] は 自分の GitHub ユーザ名)
また、実行前にアップデートも行っておくとよいでしょう.

1
2
3
4
5
C:\Develop\repos\[username].github.io> npm update
C:\Develop\repos\[username].github.io> npm install hexo-generator-feed --save
`-- hexo-generator-feed@1.2.0
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.0.15: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

続いて HEXO の 設定ファイルである _config.yml に フィード出力の設定を追加します.
Atom と RSS2 の どちらかが出力できるようで、今回は Atom を 選択しました. また出力数は limit で 設定できます.

1
2
3
4
5
## hexo-generator-feed (https://github.com/hexojs/hexo-generator-feed)
feed:
type: atom
path: atom.xml
limit: 20

設定後 hexo generate すると、無事にフィードが生成されていることが確認できます. 確認できたらデプロイします.

サイトマップの出力

同じく Hexo の Plugin リスト から サイトマップ関連 の Plugin を 探すと オフィシャル の hexo-generator-sitemap が あります. もうひとつ hexo-generator-seo-friendly-sitemap が ありますが、とりあえずオフィシャルのものを設定します.
機会があったら違いなどを調べたいですが、まずは今の環境構築を優先で.

こちらもフィードと同様に Hexo の ソースがあるフォルダで npm install hexo-generator-sitemap --save を実行します.

1
2
3
4
5
C:\Develop\repos\[username].github.io> npm update
C:\Develop\repos\[username].github.io> npm install hexo-generator-sitemap --save
`-- hexo-generator-sitemap@1.1.2
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.0.15: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

_config.yml に サイトマップ出力の設定を追加します.

1
2
3
## hexo-generator-sitemap (https://github.com/hexojs/hexo-generator-sitemap)
sitemap:
path: sitemap.xml

設定後 hexo generate すると、無事にフィードが生成されていることが確認できます. 確認できたらデプロイします.


オフィシャル で Plugin が 用意されており、また Node.js の npm で 簡単に導入することができました.
hexo-generator-feed で PubSubHubbub による通知もできるようなので、こっちも設定しておきたいでが「それはまた、別の話」にて.
Hexo で PubSubHubbub 通知をする の 記事を追加しました. (2017年1月6日追記)

Hexo の 新規投稿テンプレート を カスタマイズ

Hexo で 新しい投稿を作成する際のテンプレートをカスタマイズして記事を書きやすくしたいと思います.

作業環境

  • Windows 7
  • Hexo 3.2

テンプレート の 配置場所

テンプレートは /scaffolds フォルダ に 配置されています. デフォルトで3つファイルが用意されています.

  • draft.md : hexo new draft "記事タイトル" で 作成した場合に使われる、ドラフト投稿用のテンプレート
  • page.md : hexo new page "ページ・タイトル" で 作成した場合に使われる、固定ページ用のテンプレート
  • post.md : hexo new "記事タイトル" で 作成した場合に使われる、投稿用のテンプレート

ちゃんとドラフト機能を使っている場合は、draft.md を カスタマイズして使いますが、post.md とは date: の 行が有るか無いかの違いだけになります.

post.md の 初期状態は以下にです.

1
2
3
4
5
---
title: {{ title }}
date: {{ date }}
tags:
---

テンプレート の カスタマイズ

今回は投稿用のテンプレートをカスタマイズするので draft.md を 修正します.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
---
title: {{ title }}
date: {{ date }}
categories:
tags:
-
---
![](/images/ "")
序文
**作業環境**
- Windows 7
## 章タイトル
コンテンツ
- - - -
まとめ

カテゴリを追加しました. カテゴリの階層は深くしたくないので行内に収めるようにし、タグは1つの場合でも複数指定する書き方で統一するようにしました.

またトップ画像を常に配置するつもりなので、![](/images/ "") を 先頭においています.

ほとんど技術系の記事が占めると思われますので作業環境を明記するようにします.

後は章のタイトルとコンテンツの繰り返しになるので、アウトラインとして1つだけ入れておき、まとめ が 入るようにしました.

ファイル上部の --- に 囲まれている部分は Front-matter と よばれるもので、詳細 は こちらのドキュメント Front-matter | Hexo に なります.


あまり使わないかもしれませんが、date: の 行の違いなので、draft.md も 合わせて修正しました.

アウトラインを決めておくだけでも、だいぶ書きやすくなりますし自然と書き方もそろい記事に集中できるようになりそう.

Hexo と GitHub Pages で ブログ環境の構築

調べものメモや環境構築の記録などを残しておく場所がほしいと考えて調べていたところ、GitHub Pages と Hexo の 組み合わせ が よさそうなので、早速調べつつ記録を残してみたいと思います.

作業環境

  • Windows 7
  • Node.js 6.9.1 LTS
  • Git 2.11.0
  • Hexo 3.2

GitHub Pages とは?

GitHub に、独自のウェブサイトをホスティングするための公式の機能です.

ソースコード管理 の Git ホスティング で 有名な GitHub で、静的なウェブサイトもホスティングできる機能があり、それが GitHub Pages です. 公式ページ に “Websites for you and your projects.” と あるように、GitHub の アカウント、組織、プロジェクト(=リポジトリ) のためのウェブサイトを簡単に持つことができるようになります.

GitHub リポジトリ で 直接管理することができるため、ウェブサイトのバージョン管理を行うこともできますし、Issues や Projects も 使えるので 記事作成 の ToDo 管理 や チームでのウェブサイト管理も行えます. もちろん Pull Request も 使えます. 一方で GitHub Pages は、静的なウェブサイトのホスティングの機能であるため、データベースを使ったり、動的な機能を盛り込むことができません.

今回は調査メモや環境構築の記録なので動的な機能を持たせることは想定しないので、GitHub Pages を 使ってみたいと思います.

GitHub Pages での ウェブサイト公開方法

大きく 2つのタイプでウェブサイトを公開できます.

  1. https:// name.github.io 形式 の ユーザ ウェブサイト・組織(Organization)ウェブサイト
  2. https:// name.github.io/repository 形式 の プロジェクト ウェブサイト

今回は個人ウェブサイトになるためユーザ ウェブサイトを選択しました.
GitHub に [username].github.io の ネーミング・ルールでリポジトリを作成します.
※ username 部分は、自分 の GitHub アカウント名

Hexo とは?

Hexo は Markdown などで書いた記事から、ブログを生成する 静的 ウェブサイト ジェネレータ です. (公式ページ では “A fast, simple & powerful blog framework” と フレームワーク謳っているけど、ジェネレータの方がなんとなくしっくりする)

類似のツールとしては Jekyll や Octopress、Pelican などがあります. GitHub Pages では、Jekyll が 公式ツールとなっています.
いろいろな 静的 ウェブサイト ジェネレータ が ある中で、以下のサイトを参考にさせて頂き Hexo に することにしました. たくさんあるツールを確認し、まとめてくださってて助かりました. 感謝感謝です.

Hexo の インストール

Hexo は Node.js と Git が 必要です. それぞれ以下からダウンロードしてインストールします.

Node.js は 開発用途ではないので LTS(Long Term Support) である v6.9.1 LTS を 入れました.

Git は インストール後にユーザ設定を行います. user.emailuser.name は、それぞれ GitHub に 登録している メールアドレス、ユーザ名 で 良いかと思います.

1
2
c:\> git config --global user.email "you@example.com"
c:\> git config --global user.name "Your Name"

Node.js と Git が 入ったら、コマンド プロンプト から Hexo の モジュールをインストールします.

1
2
3
4
c:\> npm install hexo-cli -g
...(省略)
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\hexo-cli\node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.0.15: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

Hexo で ウェブサイト の ソース生成

Hexo の モジュールがインストールできたら、ウェブサイトのソースを生成します.
今回はソースの場所を C:\Develop\repos とします. また、以降の [username] は 自分の GitHub ユーザ名 に 置き換えてください.

1
2
3
4
5
6
c:\> cd C:\Develop\repos
C:\Develop\repos> hexo init [username].github.io
...(省略)
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.0.15: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
INFO Start blogging with Hexo!

続いて、ウェブサイトのソースに Hexo と Git の デプロイモジュールを追加します.

1
2
3
4
5
6
C:\Develop\repos> cd [username].github.io
C:\Develop\repos\[username].github.io> npm install
C:\Develop\repos\[username].github.io> npm install hexo-deployer-git --save
`-- hexo-deployer-git@0.2.0
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.0.15: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

Hexo に 最小限 の 初期設定

Hexo の 初期設定を行います. Hexo は _config.yml で 設定をします.
テキストエディタなどで C:\Develop\repos\[username].github.io\_config.yml を 開きます. 日本語の入力を行う場合は UTF-8 で 保存する必要があります.
以下に主な設定ヶ所を抜粋します.

1
2
3
4
5
6
7
8
9
10
11
12
13
title: [ブログのタイトル]
subtitle: [ブログのサブタイトル、もし必要あれば]
description: [ブログの説明、もし必要あれば]
author: [著者名]
language: en
timezone: Asia/Tokyo
url: https://[username].github.io
deploy:
type: git
repo: git@github.com:[username]/[username].github.io.git
branch: master

language は 日本語に対応しているテーマを使う場合は ja に しますが、デフォルトテーマは対応していないようなので en に しました.

デフォルトのテーマから利用しない他言語を削除

language: en に しているのですが、たまに異なる言語でブログが生成されるケースがあるので、利用しない他言語を削除します. 特に問題がない場合は削除する必要はありませんが、hexo generate した結果を確認しないでデプロイしたら、ブログ右のタグやカテゴリーが知らない言語になっていたことがあったので、念のため削除することにしました.
/<ブログ・ソース・ルート>/themes/landscape/languages/default.yml を 残して、他の言語のファイルを削除します.

ウェブサイト の 生成 と GitHub Pages へ デプロイ

設定を行ったら、ウェブサイトの生成を行います.
通常は hexo generate だけでよいようですが、記事の削除などを行った場合は hexo clean を しないと消えてくれないことがあるので、ウェブサイト生成をする場合は hexo cleanhexo generate を セットで行うようにしています.

1
2
3
4
5
6
7
8
C:\Develop\repos\[username].github.io> hexo clean
INFO Deleted database.
C:\Develop\repos\[username].github.io> hexo generate
INFO Start processing
INFO Files loaded in 535 ms
...(省略)
INFO 28 files generated in 2.36 s

ウェブサイト生成できたら GitHub へ デプロイします.

1
2
3
4
5
6
7
C:\Develop\repos\[username].github.io> hexo deploy
INFO Deploying: git
INFO Clearing .deploy_git folder...
INFO Copying files from public folder...
...(省略)
* [new branch] HEAD -> master
INFO Deploy done: git

デプロイ完了後、https://[username].github.io で アクセスするとデフォルトの Hello World 記事が見れます.

ウェブサイト の ソース を GitHub で 管理

ここまで作ったウェブサイトのソースを GitHub で 管理できるようにします. 今回は source ブランチで管理することにします.

以下の手順で、ウェブサイトのソースがあるフォルダに Git の リポジトリを作成し、ウェブサイトのある master とは関連の無い source の ブランチを作成してコミット&プッシュします.

1
2
3
4
5
6
7
8
9
C:\Develop\repos\[username].github.io> git init
C:\Develop\repos\[username].github.io> git remote add origin git@github.com:[username]/[username].github.io.git
C:\Develop\repos\[username].github.io> git checkout --orphan source
C:\Develop\repos\[username].github.io> git add .
C:\Develop\repos\[username].github.io> git commit -am "Initial commit for Hexo source files"
C:\Develop\repos\[username].github.io> git push origin source


以上で Hexo と GitHub Pages で ブログ環境が構築できました. 以降は source ブランチで記事のソースを管理し、投稿タイミングで hexo cleanhexo generate -dmaster ブランチ = ウェブサイト を 更新していきます.

基本的に source ブランチしか使わないため GitHub の [Settings] - [Branches] から source ブランチをデフォルトにしておくと便利かもしれません.

手軽に記事のソース管理ができそうなので使っていくのが楽しみ.