やり方は簡単。--draftオプションをつけて起動するだけ。

1
2

// ドラフトの記事も表示する
$ hexo s --draft

んじゃ、なんでこんなことを書いているかって言うと、最初に間違った方法でドラフト記事を表示していたから。

最初にやっていた方法は、_config.ymlにあるrender_drafts: falseをtrueにしていた。この方法でドラフトの記事を表示していて、ぱっと見問題なかったんだけど、いざ$ hexo generateをするとドラフトを含めて静的ファイルが書き出されてしまっていて、あれれ、これでは困るとなってしまった。

困ってから説明書を開く後手な感じでドキュメントを見返したら、ちゃんとHexo - Commands Optionsに書いてあった……

_config.ymlの設定

_config.ymlの中のpost_asset_folderをtrueにする。

1

post_asset_folder: true

記事作成

上の設定がされていると、記事作成時に.mdと同時にフォルダも作成されるので、そこに画像などの静的ファイルを配置する。例えば$ hexo new sample-postをすると、sample-post.mdと同一の階層にsample-postフォルダが作成される。

記事に配置するコード

フォルダを参照するためのコードを記事に設置することで、フォルダ内の静的ファイルを参照できる。Markdownなのでリンクのパス部分のみ置き換えなのかと思ったら、コードの設置のみで良いらしい。

1
2

// これは正しく実行されない
![example image]({% asset_img example.png %})

1
2
3
4
5
6
7
8

// 画像が出力される
{% asset_img example.png %}

// テキストリンクが出力される
{% asset_link example.png 'サンプル' %}

// パスがテキストで出力される
{% asset_link example.pdf 'サンプルpdf' %}

GitHub側での作業

公開用のusername.github.ioリポジトリを作成する。
詳細はGitHub Pagesにある。

Hexo側での設定

Hexo Ver3.0.1で確認しています。

プラグインのインストール

Ver3.0.0から、デプロイには別途npmモジュールのインストールが必要（ref. #1040）になっていて、hexo-deployer-gitをインストールする。

1

$ npm install hexo-deployer-git --save

備考：--saveオプションをつけるとpackage.jsonのdependenciesに、インストールしたnpmモジュールを自動的に記入してくれます。

_config.yml

次に_config.ymlのdeploy部分を編集。

1
2
3
4
5

deploy:
  type: git
  repo: git@github.com:saucer-jp/saucer-jp.github.io.git
  branch: 
  message:

branchとmessageは任意で入力。branchはGitHubを使用していれば自動で検出されます。github.ioを使っていればmasterになるのかな。

messageは何も入れなければ、デフォルトでSite updated: {{ now("YYYY-MM-DD HH:mm:ss") }}が入る。

デプロイとは関係ないけど…

上のコードSite updated: {{ now("YYYY-MM-DD HH:mm:ss") }}を記事に入れたとたんに$ hexo serverが起動しなくなって、え？あれ？壊れた？なんで？ってなって、最初原因がこれだって気づかないで色々とモジュール入れなおしたりとか、もう一個ブログをinitしてみたりと結構遠回りした。

原因はHexoがインラインのコード（ここだとnow()の部分）を実行しようとしてエラーになっていたからで、解決策はHexo - troubleshootingに書いてあって、エスケープ用のタグが用意されていた。

1
2
3

{% raw %}
  実行されてしまうコード
{% endraw %}

上のようにするとHexoに実行されなくなるとのこと。

ふと…

なんだか結局、Hexoのドキュメントをコピーした感じになったので、公式のドキュメントを見るのがよさそう。

ref.

• Hexo - Deployment
• GitHub Pages

これは知らなかっただけなので超簡単だった。やり方は2つあるようで、Front-matterのcategories部分を配列にしたり、リストを重ねれば多段になる。

ただし、Hexo Ver3.0.0にはカテゴリーのバグがあり正しく出力されない。Ver3.0.1にアップデートすることでこのバグは解消される。

1

categories: [foo, bar]

1
2
3

categories:
- foo
- baz

結果はこんな感じになる。

• foo(2)
  • bar(1)
  • baz(1)

Hexoはシンプルなblog frameworkで、node.jsで動いてる。

記事をlocalで書いたあとにgenerateコマンドを実行すると、Hexoが静的ファイルを書き出してくれるので、それをGitHub Pagesなりに配置すれば良いというblogがお手軽に公開できる代物。

使い始めた理由は、じまぐ氏が良いって言っていたのと、導入が楽なこと。それと、postが.mdファイル単位で、なんとなく扱いやすそうだなぁと思ったから。他にもなんかあったような気がするけど忘れた。

ちょこちょことメモ的なものを残して行けたらなーって思う。使い始めたバージョンはHexo 3.0.0

• Hexo: A fast, simple & powerful blog framework