前回のブログ問題について。MarkdownからHTMLを作成するツールHexoを試してみた。

環境

Windows XP Pro SP3 32bit

参考

http://wassan128.github.io/blog/2015/09/10/
http://liginc.co.jp/web/programming/server/104594

GitHub Pagesでサイトを作れるらしい
HexoというツールでMarkdownから静的なHTMLを生成できるらしい
Hexoの動作にはnode.jsが必要らしい

環境構築

必要なものは以下の2つ。

node.js
Hexo

node.js

ダウンロード

node.jsをダウンロードする。

今回はnode-v4.5.0-x86.msi(9.6MB)のファイルを落とした。

インストール

node.jsをインストールする。

C:\Program Files\nodejsにインストールされる。(21.7MB)

手順1 手順2 手順3 手順4 手順5 手順6 手順7

動作確認

コマンドプロンプトを起動し、以下のコマンドを叩いてみた。OK。

>node -v
v4.5.0

>npm -v
2.15.9

npm

npmはnode.jsをインストールしたときについてきたパッケージマネージャ。 Hexoなどアプリをインストールするときに使うコマンド。いちいちサイトからバイナリ選んでダウンロードしてパス決めて解凍とかしなくていいからすごく便利。

以下のサイトが公式？

https://www.npmjs.com/
https://docs.npmjs.com/

たぶんググれば誰かが日本語でわかりやすく解説してくれているだろう。

Hexo

インストール

Hexoをダウンロード＆インストールする。

コマンドプロンプトを起動し、以下のコマンドを叩く。なんかWARNとか警告でてる？まあいいや。

npm install -g hexo-cli


npm WARN optional dep failed, continuing fsevents@1.0.14
-
> dtrace-provider@0.6.0 install C:\Documents and Settings\Administrator\Applicat
ion Data\npm\node_modules\hexo-cli\node_modules\hexo-log\node_modules\bunyan\nod
e_modules\dtrace-provider
> node scripts/install.js


> hexo-util@0.6.0 postinstall C:\Documents and Settings\Administrator\Applicatio
n Data\npm\node_modules\hexo-cli\node_modules\hexo-util
> npm run build:highlight


> hexo-util@0.6.0 build:highlight C:\Documents and Settings\Administrator\Applic
ation Data\npm\node_modules\hexo-cli\node_modules\hexo-util
> node scripts/build_highlight_alias.js > highlight_alias.json

C:\Documents and Settings\Administrator\Application Data\npm\hexo -> C:\Document
s and Settings\Administrator\Application Data\npm\node_modules\hexo-cli\bin\hexo

hexo-cli@1.0.2 C:\Documents and Settings\Administrator\Application Data\npm\node
_modules\hexo-cli
├── abbrev@1.0.9
├── object-assign@4.1.0
├── minimist@1.2.0
├── tildify@1.2.0 (os-homedir@1.0.1)
├── chalk@1.1.3 (ansi-styles@2.2.1, escape-string-regexp@1.0.5, supports-colo
r@2.0.0, has-ansi@2.0.0, strip-ansi@3.0.1)
├── bluebird@3.4.3
├── hexo-fs@0.1.6 (escape-string-regexp@1.0.5, graceful-fs@4.1.6, chokidar@1.
6.0)
├── hexo-log@0.1.2 (bunyan@1.8.1)
└── hexo-util@0.6.0 (html-entities@1.2.0, striptags@2.1.1, camel-case@3.0.0,
cross-spawn@4.0.0, highlight.js@9.6.0)

npmコマンドでインストールしたパッケージは以下のパスに配置されるみたい。

C:\Documents and Settings\Administrator\Application Data\npm\node_modules

使ってみる

init

Hexoを使ってみる。

コマンドプロンプトで以下のコマンドを打つ。ブログの雛形ができる。

> hexo init TestHexoBlog

TestHexoBlogの部分は任意。フォルダ名になるらしいからフォルダ名として使える文字にする。

カレントディレクトリに作成される。cdコマンドで任意のところに移動してから実行するといい。たとえば、C:\blog\配下にTestHexoBlogブログを作成したいなら、以下のようにすればいい。

C:\>cd "C:\blog\"
C:\blog\> hexo init TestHexoBlog

今回はC:\root\pj\GitHubPages\配下にTestHexoBlogという名前のブログを作成する。

実行すると、以下のログが出た。

できたフォルダ一式は30MBにもなった。結構時間がかかった。おそらく4～5分くらい。

C:\root\pj\GitHubPages>hexo init TestHexoBlog
INFO  Cloning hexo-starter to C:\root\pj\GitHubPages\TestHexoBlog
Cloning into 'C:\root\pj\GitHubPages\TestHexoBlog'...
remote: Counting objects: 53, done.
remote: Total 53 (delta 0), reused 0 (delta 0), pack-reused 53
Unpacking objects: 100% (53/53), done.
Checking connectivity... done.
Submodule 'themes/landscape' (https://github.com/hexojs/hexo-theme-landscape.git
) registered for path 'themes/landscape'
Cloning into 'themes/landscape'...
remote: Counting objects: 746, done.
remote: Total 746 (delta 0), reused 0 (delta 0), pack-reused 746
Receiving objects: 100% (746/746), 2.53 MiB | 54.00 KiB/s, done.
Resolving deltas: 100% (384/384), done.
Checking connectivity... done.
Submodule path 'themes/landscape': checked out 'decdc2d9956776cbe95420ae94bac87e
22468d38'
INFO  Install dependencies
npm WARN deprecated minimatch@0.3.0: Please update to minimatch 3.0.2 or higher
to avoid a RegExp DoS issue
npm WARN optional dep failed, continuing fsevents@1.0.14
npm WARN optional dep failed, continuing fsevents@1.0.14
|
> hexo-util@0.6.0 postinstall C:\root\pj\GitHubPages\TestHexoBlog\node_modules\h
exo-renderer-marked\node_modules\hexo-util
> npm run build:highlight

/
> hexo-util@0.6.0 build:highlight C:\root\pj\GitHubPages\TestHexoBlog\node_modul
es\hexo-renderer-marked\node_modules\hexo-util
> node scripts/build_highlight_alias.js > highlight_alias.json

|
> dtrace-provider@0.6.0 install C:\root\pj\GitHubPages\TestHexoBlog\node_modules
\hexo\node_modules\hexo-log\node_modules\bunyan\node_modules\dtrace-provider
> node scripts/install.js


> hexo-util@0.6.0 postinstall C:\root\pj\GitHubPages\TestHexoBlog\node_modules\h
exo\node_modules\hexo-util
> npm run build:highlight


> hexo-util@0.6.0 build:highlight C:\root\pj\GitHubPages\TestHexoBlog\node_modul
es\hexo\node_modules\hexo-util
> node scripts/build_highlight_alias.js > highlight_alias.json

hexo-generator-archive@0.1.4 node_modules\hexo-generator-archive
├── object-assign@2.1.1
└── hexo-pagination@0.0.2 (utils-merge@1.0.0)

hexo-generator-index@0.2.0 node_modules\hexo-generator-index
├── object-assign@4.1.0
└── hexo-pagination@0.0.2 (utils-merge@1.0.0)

hexo-generator-tag@0.2.0 node_modules\hexo-generator-tag
├── object-assign@4.1.0
└── hexo-pagination@0.0.2 (utils-merge@1.0.0)

hexo-generator-category@0.1.3 node_modules\hexo-generator-category
├── object-assign@2.1.1
└── hexo-pagination@0.0.2 (utils-merge@1.0.0)

hexo-renderer-ejs@0.2.0 node_modules\hexo-renderer-ejs
├── object-assign@4.1.0
└── ejs@1.0.0

hexo-server@0.2.0 node_modules\hexo-server
├── object-assign@4.1.0
├── mime@1.3.4
├── chalk@1.1.3 (ansi-styles@2.2.1, supports-color@2.0.0, escape-string-regex
p@1.0.5, has-ansi@2.0.0, strip-ansi@3.0.1)
├── opn@4.0.2 (pinkie-promise@2.0.1)
├── morgan@1.7.0 (on-headers@1.0.1, basic-auth@1.0.4, depd@1.1.0, on-finished
@2.3.0, debug@2.2.0)
├── connect@3.4.1 (utils-merge@1.0.0, parseurl@1.3.1, debug@2.2.0, finalhandl
er@0.4.1)
├── bluebird@3.4.3
├── compression@1.6.2 (on-headers@1.0.1, vary@1.1.0, bytes@2.3.0, compressibl
e@2.0.8, debug@2.2.0, accepts@1.3.3)
└── serve-static@1.11.1 (escape-html@1.0.3, parseurl@1.3.1, encodeurl@1.0.1,
send@0.14.1)

hexo-renderer-stylus@0.3.1 node_modules\hexo-renderer-stylus
├── stylus@0.53.0 (css-parse@1.7.0, debug@2.2.0, mkdirp@0.5.1, source-map@0.1
.43, sax@0.5.8, glob@3.2.11)
└── nib@1.1.2 (stylus@0.54.5)

hexo-renderer-marked@0.2.11 node_modules\hexo-renderer-marked
├── object-assign@4.1.0
├── marked@0.3.6
├── strip-indent@1.0.1 (get-stdin@4.0.1)
└── hexo-util@0.6.0 (striptags@2.1.1, html-entities@1.2.0, camel-case@3.0.0,
bluebird@3.4.3, cross-spawn@4.0.0, highlight.js@9.6.0)

hexo@3.2.2 node_modules\hexo
├── abbrev@1.0.9
├── pretty-hrtime@1.0.2
├── hexo-front-matter@0.2.3
├── archy@1.0.0
├── titlecase@1.1.2
├── text-table@0.2.0
├── tildify@1.2.0 (os-homedir@1.0.1)
├── strip-indent@1.0.1 (get-stdin@4.0.1)
├── hexo-i18n@0.2.1 (sprintf-js@1.0.3)
├── chalk@1.1.3 (escape-string-regexp@1.0.5, ansi-styles@2.2.1, supports-colo
r@2.0.0, has-ansi@2.0.0, strip-ansi@3.0.1)
├── minimatch@3.0.3 (brace-expansion@1.1.6)
├── bluebird@3.4.3
├── moment-timezone@0.5.5
├── swig-extras@0.0.1 (markdown@0.5.0)
├── js-yaml@3.6.1 (esprima@2.7.3, argparse@1.0.7)
├── hexo-fs@0.1.6 (escape-string-regexp@1.0.5, graceful-fs@4.1.6, chokidar@1.
6.0)
├── swig@1.4.2 (optimist@0.6.1, uglify-js@2.4.24)
├── hexo-cli@1.0.2 (object-assign@4.1.0, minimist@1.2.0)
├── nunjucks@2.4.2 (asap@2.0.4, yargs@3.32.0, chokidar@1.6.0)
├── moment@2.13.0
├── hexo-log@0.1.2 (bunyan@1.8.1)
├── cheerio@0.20.0 (entities@1.1.1, dom-serializer@0.1.0, css-select@1.2.0, h
tmlparser2@3.8.3, jsdom@7.2.2)
├── warehouse@2.2.0 (graceful-fs@4.1.6, is-plain-object@2.0.1, JSONStream@1.1
.4, cuid@1.3.8)
├── lodash@4.15.0
└── hexo-util@0.6.0 (striptags@2.1.1, html-entities@1.2.0, camel-case@3.0.0,
cross-spawn@4.0.0, highlight.js@9.6.0)
INFO  Start blogging with Hexo!

install

作成したブログをnpmでインストールするみたい。そういうものなの？npm自体よくわからんが参考にしたサイト様にはそう書いてある。とりあえず真似しよう。

まずはカレントディレクトリを作成したブログにする。

>cd "C:\root\pj\GitHubPages\TestHexoBlog"

つぎにインストールする。

>npm install

数秒で完了。ログはなにも出なかった。成功なのだろう。

hexo s

実行。

> hexo s

以下のようなメッセージがでる。

INFO  Start processing
INFO  Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

終了したいときはコマンドプロンプトで Ctrl+C キーを押下する。「バッチジョブを終了しますか (Y/N)?」と表示されるので「y」を入力してEnterキーを押下する。

ファイアウォールが出たっぽいが、タイピングの途中だったので一瞬で消えてしまった。再度コマンドを打ったときはもう出なかった。ま、いいや。

hexo sはローカルサーバ（http://localhost:4000/）を起動するコマンドらしい。

さっそくブラウザのURLロケールバーに「http://localhost:4000/」を入力してアクセス。

以下のようなページが見えた。

表示結果

おお、これはすごい！

bashコードの表示もいい感じ。C++コード表示もいい感じにできたらいいな。

記事のURL

HelloWorldのタイトルをクリックすると、以下のURLになった。たぶん記事固有のURL。

http://localhost:4000/2016/08/26/hello-world/

日付フォルダ配下に、タイトル名で作成される。日本語タイトルの場合でも大丈夫なのだろうか？文字コード問題とか。

Markdownの内容をのぞいてみる

HelloWorldの記事はどんなMarkdownでできているのか見てみた。

C:\root\pj\GitHubPages\TestHexoBlog\source\_posts配下にあるhello-world.mdファイルを見る。

文字コードはUTF-8(BOM無し)、改行コードはCR+LFだった。

内容は以下のとおり。

---
title: Hello World
---
Welcome to [Hexo](https://hexo.io/)! This is your very first post. Check [documentation](https://hexo.io/docs/) for more info. If you get any problems when using Hexo, you can find the answer in [troubleshooting](https://hexo.io/docs/troubleshooting.html) or you can ask me on [GitHub](https://github.com/hexojs/hexo/issues).

## Quick Start

### Create a new post

``` bash
$ hexo new "My New Post"
```

More info: [Writing](https://hexo.io/docs/writing.html)

### Run server

``` bash
$ hexo server
```

More info: [Server](https://hexo.io/docs/server.html)

### Generate static files

``` bash
$ hexo generate
```

More info: [Generating](https://hexo.io/docs/generating.html)

### Deploy to remote sites

``` bash
$ hexo deploy
```

More info: [Deployment](https://hexo.io/docs/deployment.html)

こまかいことは後回し

細かいことはHexoのドキュメントを読めば何とかなるだろう。たぶん。

デプロイ

ローカルだけならこれだけでつくれる。ひとりWikiならぬひとりブログになるが。

次は公開するためにGitHubサーバへアップロードしたい。

長くなったから次回に持ち越す。

やってみる

アウトプットすべく己を導くためのブログ。その試行錯誤すらたれ流す。

Hexoでローカルブログを構築してみた

環境

参考

環境構築

node.js

ダウンロード

インストール

動作確認

npm

Hexo

インストール

使ってみる

init

install

hexo s

記事のURL

Markdownの内容をのぞいてみる

こまかいことは後回し

デプロイ