Honkit（git book)を使ってみた
こんにちは！ゆかっしゅ（@kaname_shimizu）です。
今回は業務で使用したHonkitについてまとめたいと思います。
自己紹介
氏名：ゆかっしゅ
年齢：29歳
最終学歴：管理栄養士の専門学校卒（4年制）
職歴：2017年4月 新卒で医療業界の人事部配属（1年半）
2018年11月 ITベンチャーに転職しバックオフィスを担当（3年）
（WEBデザイナーのウの字もない。。。。）
2022年1月からWEBデザイナーデビュー
2023年1月-2023年11月 産休育休
2023年12月 職場復帰
最近のゆかっしゅ：息子の慣らし保育が始まり、
初めての事ばかりでバタバタしてます。
Honkitって何？
HonKit is building beautiful books using GitHub/Git and Markdown.
（訳：HonKit は、GitHub/Git と Markdown を使用して美しいブックを構築しています。）
Honkitはマークダウンで上記のようなドキュメントページが作成できます。
例えば、WordやGoogleドキュメントで作成した文章をWEBサイトで公開したい！という時、0からサイトを作成しなくていいのでとてもおすすめです。
下記はHonkitを使用しているサイトです。
今回私は社内開発しているWEBアプリのヘルプページ作成でHonkitを使用しました。
Honkitの使い方
基本的には上記サイトを見ながら進めていきます。
# まずはHonkitをインストールします
$ npm install honkit --save-dev
# bookの作成
$ npx honkit init
# プレビューするときは下記
＄ npx honkit serveディレクトリ構造
.
├── book.json
├── docs/
| ├──style/
| | └── website.css
| ├──imge/
| | └── image.webp
| ├──README.md
| ├──SUMMARY.md
| ├──page.1.md
└── └──page.2.md
初期設定とは少し異なりますが、上記のようにディレクトリを構成しました。READE.mdでトップページに記載するサイトに関する紹介を記載して、SUMMARY.mdで目次を記載します（左のメニュー）。
page1、page2に記載したい内容を記載してSUMMARY.mdにどんどんpageを追加するイメージです。
画像を貼り付ける
画像を使用したい場合は、
上記で画像を貼り付けられます。
初期設定スタイルを変更したい
初期設定スタイルを変更したい場合は、website.cssに記述します。
今回は空きすぎた余白などを調整するため.markdown-section pにmargin-bottom: 0;を設定しています。
検証ツールなどを利用すると、初期設定でどこにどのスタイルが設定されているか確認できるので便利です。
追加したplugin
Honkitはpluginを追加することで色々な機能を追加できます。
pluginは下記から探すことができます。
今回使用したpluginを下記に紹介します。
expand-active-chapter
左側のメニューを折りたためるpluginです。
back-to-top-button
スクロールするとTopに戻るbuttonが表示されます。
serch-pro-lui
サイト内検索ができるようになります
youtube-placeholder
youtubeを埋め込むことができます。
まとめ
いかがでしたでしょうか。
Honkitは専門知識がなくても簡単に作成できるので、書籍やドキュメントなどをWEBサイトで公開したい場合はとても便利です。
ぜひ使ってみてください！
この記事が気に入ったらサポートをしてみませんか？