https://stackshare.io/stackups/docsify-vs-docusaurus

Customization: Docusaurus provides a theme-based approach to customization. It offers a variety of themes that can be further customized using CSS and React components. Docsify, on the other hand, provides fewer customization options compared to Docusaurus. It has a minimalistic design and offers limited customization features.

Docsifyはシンプル、Docsaurusは結構ちゃんと作れる感じなのかな？
検索はDocsaurusが強そう

In summary, Docsify excels in simplicity and ease of setup, while Docusaurus provides more features, better search functionality, and a structured navigational structure.

すぐにサクッとならDocsify、わりとちゃんとつくるならDocsaurusって感じか？
正直そんな作り込む必要はないのだが、ちょっとDocsaurus気になってきた。
Github pagesに公開さえできればDocsaurusにしよう

https://dev.to/nafis/5-free-static-documentation-generators-you-must-check-out-5ged

1. Docsify
   a. 社内実績も多いし、基本はこれの路線
   b. プラグインとかも豊富そう
2. Docusaurus
   a. Reactなのね…？（どゆこと？）
   b. Search強いのか？
3. VuePress
   a. SPAなんだ。github pagesってどういう仕組なんだろ…いけるのか？
4. Slate
   a. APIドキュメントって書いてあるぞ？Swagger的なやつか？
5. Docute
   a. SPAベース

"documentation site generator"でmkdocsってのも上位にいた→なんかちょっと古い？感じがする

まあそんな時間かけて考えるほどの差はないな。
飛行機、スポーツ案件では一緒にしたので、次は分けてみるか。

一緒にしても特に困ったと思ったことはなかった

分けたら視点がばらついてめんどいかなくらい。
分けたほうがマージが雑にできていいかも

tutorial

npm init docusaurus@latest my-website classic
cd my-website
npm run start

Add Markdown or React files to src/pages to create a standalone page:

reactのページもmdのページも作れる。便利。

Documents are groups of pages connected through:
a sidebar
previous/next navigation
versioning

docs配下でも作れる。src/pagesとの違いがいまいちわからん。

• URLはdocs/xxxになる。
• docs配下のものはサイドバーが自動で作られる（sidebars.jsでカスタムすることも可能）
  • これどういう順番になってる…？あーsidebar_position: 3でいじってるのか。入力しない場合は指定されたものより後ろで、アルファベット順かな？

pages/docs/blogの3つがある…ちょっとよくわからんな。
開発ドキュメントでいうと、blogはいらない。
pages/docsの使い分けはどうする？

画像
/static/img内に入れて、![Docusaurus logo](/img/docusaurus.png)
いや、相対の方がわかりやすいか![Docusaurus logo](./img/docusaurus.png)

• /blog/ - Contains the blog Markdown files. You can delete the directory if you've disabled the blog plugin, or you can change its name after setting the path option. More details can be found in the blog guide
• /docs/ - Contains the Markdown files for the docs. Customize the order of the docs sidebar in sidebars.js. You can delete the directory if you've disabled the docs plugin, or you can change its name after setting the path option. More details can be found in the docs guide
• /src/ - Non-documentation files like pages or custom React components. You don't have to strictly put your non-documentation files here, but putting them under a centralized directory makes it easier to specify in case you need to do some sort of linting/processing
• /src/pages - Any JSX/TSX/MDX file within this directory will be converted into a website page. More details can be found in the pages guide
• /static/ - Static directory. Any contents inside here will be copied into the root of the final build directory
• /docusaurus.config.js - A config file containing the site configuration. This is the equivalent of siteConfig.js in Docusaurus v1
• /package.json - A Docusaurus website is a React app. You can install and use any npm packages you like in them
• /sidebars.js - Used by the documentation to specify the order of documents in the sidebar

お、docs内ではフォルダ名がURLになるが、フォルダ名を01_xxみたいにしても数字部分は無視される。エディタ内で整列しつつ、そこが修正されてもURLが変わらない。よき

github pagesにデプロイ

configファイルに下記設定

• organizationName The GitHub user or organization that owns the deployment repository.
• projectName The name of the deployment repository.
• deploymentBranch The name of the deployment branch. It defaults to 'gh-pages' for non-organization GitHub Pages repos (projectName not ending in .github.io). Otherwise, it needs to be explicit as a config field or environment variable.

うわ、CIの設定いるやん。めんど。docsifyでよかったな…余計なことした。早くつくるなら断然docsifyですかね…

theme
https://jhildenbiddle.github.io/docsify-themeable/#/

deploy

https://docsify.js.org/#/deploy?id=github-pages

github でpagesの設定でブランチとフォルダを選ぶだけでいける。

む…うまくいかないので最小構成で試す→これテンプレにしたい気持ちあるな
https://github.com/kzk4043/docsify-test

いけてるなあ…
あ、時間が経ったらいけてた。キャッシュかなあ…

やっぱdocsify簡単すぎるな

あれ、mermaid動いてないやば。
https://docsify.js.org/#/markdown?id=supports-mermaid

これにしてみる
https://github.com/Leward/mermaid-docsify

READMEに書いてある設定とプラスで下記やったらできた。

      var num = 0; // 追加
      mermaid.initialize({ startOnLoad: false }); // 追加

     window.$docsify = { その他の設定

うわ、でもthemeとなんかバッティングしてる？Themeが崩れた。
これでなんとかした
https://stackoverflow.com/questions/76530311/mermaid-in-docsify-return-object-promise

https://scrapbox.io/teamlab-frontend/Docsifyの便利なところ