Honkitで静的サイト生成してみました

Honkitでホムペつくってみました

いままで、どこかで拾ってきたCSSファイルとタグのベタうちでホムペソースを
かいてました。

数年間ほったらかしてました。アップデートしてませんでした。

そのあいだ、GitHubつかうようになったり、文書もMarkdownで執筆する
ことがおおくなりました。

このたびホムペを全面改装することに

一念発起して、ぜんめんてきに改装することとしました。せっかくだからMarkdownで
かいて、静的サイト生成できればいいなぁ思いました。

GitBookに興味があったのですが、ふるいバージョンはDeprecatedだし、
どうもウェブサービスとなってるようなので、そこからフォークされた
HonKitにしてみました。

HonKitのドキュメントをみながら

ドキュメントのサイトがあるので、それをみながら、やってみました。

Node.jsのインストールなどおこないました。

いい感じ

いい感じのサイトができました。

追記させてください

MermaidのマインドマップってGitHubのUIだとレンダリングされるのだが、プラグインだと非対応
なのです。そこで追加しました↓

Pluginつかってみた

４種類ほどプラグインをつかってみました。ひとつはplugin-search-pro-kui
plugin-katex, honkit-plugin-mermaid, simple-mind-mapです。

前者が検索性能をあげるもの、あとのは、数式表示のためのものです。

plugin installの方法

npm i honkit-plugin-katex
npm i gitbook-plugin-search-pro-kui
npm i npm i honkit-plugin-mermaid
npm i gitbook-plugin-simple-mind-map

そのあと、book.jsonのなかにこれらを書き加える

  "plugins": [
      "-lunr", "-search", "search-pro-kui","katex","mermaid", "simple-mind-map"
    ]

そのあと通常どおりにつぎのコマンドを実行

npx honkit init
npx honkit serve

この段階で、 http://localhost:4000で生成した静的サイトを閲覧できるようになります

本ばんは ビルドです。

npx honkit build . ./docs

このように生成される静的サイトのPathを指定しておけば、GitHubPagesやVercelで公開するときに便利です。

mindmapのこと

{% simplemindmap %}

* simplemindmap
    * config book.json
        * plugins
            * others
            * simple-mind-map
        * pluginsConfig
            * others
            * simple-mind-map
                * type
                * preset
                * linkShape
                * autoFit
                * style
    * custom file.md
        * markdown
            * type
            * preset
            * linkShape
            * autoFit
            * style
        * txtmap
        * json
        * mindmup

{% endsimplemindmap %}

のようにしてください。この時点でGitHub上でのレンダリングは、あきらめましょう。

Hokitのドキュメント