AsciiDoc と PlantUML で Blog が書きたい

## 何使う？

- 静的サイトジェネレーターの nodejs 実装の [Hexo](https://hexo.io/) で試す。

## Hexo でブログを作成

```bash
npm install hexo-cli -g
hexo init blog
cd blog
npm install
hexo generate
hexo server
```

- http://localhost:4000

![hexo.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201797/fd7eb3a9-256c-3212-6fa6-0f136601ea0a.png)


## AsciiDoc 対応

- 基本的にはこちらの記事の通り。ありがとうございます。
    - 参照 [hexoとasciidocでブログ構築 | blah blah blah](https://sukehisa.github.io/2018/08/23/Hexo%E3%81%A8Asciidoc%E3%81%A7%E3%83%96%E3%83%AD%E3%82%B0%E6%A7%8B%E7%AF%89/#_hexo%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%AE%E3%83%96%E3%83%AD%E3%82%B0%E6%A7%8B%E7%AF%89)
- AsciiDoc 描画用のプラグイン？をインストール

```bash
npm install hexo-renderer-asciidoc --save
```

```bash
hexo clean
hexo new example
```

- 拡張子のデフォルトとか変えられるのかな。 `.md` を `.adoc` に変更して編集。

```bash
mv source/_posts/example.md source/_posts/example.adoc
vim source/_posts/example.adoc
```

- 例えば、こんな AciiDoc。

```
---
title: example
date: 2019-08-30 21:15:40
tags:
---

= Title

== SubTitle

* abc
** def
*** ghi

[source,js]
----
var express = require('express')
var app = express()

// respond with "hello world" when a GET request is made to the homepage
app.get('/', function (req, res) {
  res.send('hello world')
})
----
```

```bash
hexo generate
hexo server
```

- http://localhost:4000

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201797/25833de9-5cb6-1f7b-736d-af4a3988c6e4.png)


## テーマの変更

```bash
git clone https://github.com/HoverBaum/meilidu-hexo.git themes/meilidu
```

- `_config.yml` ファイルの編集

```diff
- theme: landscape
+ theme: meilidu
```

```bash
hexo generate
hexo server
```

![hexo-meilidu.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201797/3f24e118-4af6-e2a0-793d-b9e238a6ca16.png)

## PlantUML 対応

```bash
npm install --save hexo-filter-plantuml
```

- モジュール `hexo-filter-plantuml` の編集
    - ちゃんとやるなら fork して、commit して、 npm publish するのが良い？、今回は簡易に。

```bash
vim node_modules/hexo-filter-plantuml/lib/renderer.js
```

- Markdown 記法によるものだったので、 AsciiDoc 記法を認識し(AsciiDoc 記法から抽出し)、AsciiDoc 記法にて出力されるよう編集。

```js

const plantuml = require('./plantuml');

//var reg = /(\s*)(```) *(puml|plantuml) *\n?([\s\S]+?)\s*(\2)(\n+|$)/g;
var reg = /(\s*)\[(source),(plantuml)\] *\n---- *\n([\s\S]+?)\s*\n(----)(\n+|$)/g;

function ignore(data) {
  var source = data.source;
  var ext = source.substring(source.lastIndexOf('.')).toLowerCase();
  return ['.js', '.css', '.html', '.htm'].indexOf(ext) > -1;
}

exports.before = function (data) {
  if (!ignore(data)) {
    data.content = data.content
      .replace(reg, function (raw, start, startQuote, lang, content, endQuote, end) {
        var compress_content = plantuml.compress(content);
        //return start + '<img src="' + compress_content + '" />' + end;
        return start + 'image::' + compress_content + '[width="640"]';
      });
  }
};
```

```bash
hexo generate
hexo server
```

- 出た！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201797/e557da81-419e-86d2-f422-0e4daeb1d1f6.png)

## まとめ

- 一応できた。hexo 悪くない。
- hexo には気に入った theme が無かった。また、blog engine 探しの旅にでる。
- dark で simple で cool な、テーマが欲しい！(自分の手を動かさずに)