トマシープが学ぶ

Unity/VR/AR/デザイン好きのミーハー 記事内容は自分用のメモです

MkDocsを使ってみる。開発ドキュメント

今まで開発ドキュメントをまとめるのにGithubのWikiを使っていたが、別のツールを使いたい。

いままで

ちなみにWikiはローカルでmarkdownで書いて、プッシュする方式。画像もローカルのリポジトリに置いて、markdownにそのパスを書く方式

![](Images/Image11.png)

f:id:bibinbaleo:20201116140225p:plain

同じような感じでいいけどGithubのWikiではなくhtmlに変換して、最終的に一般の人にも公開できたり、お互いのページのリンクを貼ったりしたい。

記述方式はMarkdownでローカルで管理・移植できるといいので、ふつうのweb上のwikiサイトを使うのは違う

他社

vrmはgithub pages。ページ自体は何で書いているんだろう?

vrm.dev

clusterはzendesk (Wikiというレベルではない)

clusterhelp.zendesk.com

ナレッジベース・FAQ構築ツール | Zendesk

MkDocs

ぴったり!

qiita.com

でも黒い画面を使う;;

とりあえずやってみる。完全に上の記事をなぞっているだけです。

pythonを入れる

MkDocs supports Python versions 3.5, 3.6, 3.7, 3.8, and pypy3.

と書いてたので最新は3.9だけど一応3.8入れた

Python Release Python 3.8.6 | Python.org

インストーラーで入れた。pathにチェック入れるのを忘れずに!

まずはここから!Pythonのインストール方法【初心者向け】|現役エンジニアが解説 | TechAcademyマガジン

mkdocsインストール

pip install mkdocs

でmkdocs入れる

f:id:bibinbaleo:20201116143727p:plain

中身作成

作りたいディレクトリに移動して、

mkdocs new XXX

でその名前のフォルダができる。中身も生成される

f:id:bibinbaleo:20201116145813p:plain

docsの中のindex.mdなどが中身のページになる。

f:id:bibinbaleo:20201116150454p:plain

ブラウザ確認

プロジェクトの中に移動して、mkdocs serveと書く

f:id:bibinbaleo:20201116150345p:plain

これでhttp://localhost:8000にアクセスすると

おおーできてる!

f:id:bibinbaleo:20201116150711p:plain

しかもローカルで変更したらすぐにwebに反映される!Ctrl+S押さなくても反映される。そんなことできるんだ~

htmlに書き出し

上のはローカルで、mdをhtmlに変換して表示してくれているみたいだけど、ちゃんとhtmlに書き出す

プロジェクトで、mkdocs build

f:id:bibinbaleo:20201116151537p:plain

これでhtmlが生成される。

f:id:bibinbaleo:20201116151534p:plain

デザイン変更

テンプレートをインストールして、mkdocs.ymlを変えると良いそうです。

 

インストール

pip install mkdocs-material

mkdocs.yml

site_nameトマシープのWiki

theme:
  name'material'
  language'ja'
extra:
  search:
    language'ja'

ここでサイト名も変えられるのか

変わった!マテリアルデザイン

f:id:bibinbaleo:20201116153530p:plain

他のデザイン

github.com

その他の書き方はこちらが詳しかったです

dev.classmethod.jp

GithubPagesへのアップ

書き出したhtmlをリポジトリ管理してGithubPagesとかで表示したらいいのか~

mdごと管理しつつそのリポジトリでGithubPagesにもしたい

https://bibinba.github.io/MkDocsTest/

htmlなどが入っているのはsiteフォルダのほう

f:id:bibinbaleo:20201116163713p:plain

なのにGithubPagesのSourceでなぜかdocsしか選べない。docsはmdファイルが入っているのに!

f:id:bibinbaleo:20201116163604p:plain

そういうものらしい。

今まではProject Pagesで公開するサイトのソースはgh-pagesという名のブランチに置く必要があったが、ソース設定によりmasterブランチのルートに置いたりmasterブランチの/docsフォルダに置いたりもできるようになった。

GitHub Pagesの新機能、ソース設定が地味にいい | To Be Decided

今回たまたまリポジトリ内にdocsフォルダがあったけど、もともとGithubPagesのソースは、ルートかdocsという名前のフォルダしか選べない

 

指定ディレクトリだけプッシュする方法などもある模様

nekonenene.hatenablog.com

コマンド

他の人はどうしているんだろうと思ったら、GithubPagesへのコマンドがMKDocs公式で用意されている!

mkdocs gh-deploy

これで gh-deployブランチができてそこにhtmlが置かれる。

・・・はずだけど失敗した。

f:id:bibinbaleo:20201116170057p:plain

gh-pagesブランチがGithub上にできてない。

f:id:bibinbaleo:20201116171020p:plain

ERROR - Failed to deploy to GitHub with error:
fatal: 'origin' does not appear to be a git repository
fatal: Could not read from remote repository.

SourceTreeでやってるから権利がないの???いろいろやったけどうまくいかなかった

qiita.com

GithubAction

GithubActionも組み合わせたら、mdをプッシュしたらhtmlも自動で更新される。

この方法使ったほうが良いかな~楽だし

roy-n-roy.github.io

こちらの方はhtmlとmdは別のリポジトリを使っている。

futureys.tokyo

GithubActionの公式サンプルにMKDocsが載ってるんだね~そんな有名だったんだ。

github.com

GithubActionやったことない。別途やってみた。

bibinbaleo.hatenablog.com

失敗してた。

f:id:bibinbaleo:20201116173753p:plain

ここら辺をどう置き換えたらいいんだろう;;パッケージ管理なんてしてない

      # Pipenv でパッケージ管理している場合を想定しています。
      - runpython -m pip install pipenv
      # Pipfile.lock を Git 管理に含めている場合を想定しています。
      - runpython -m pipenv sync --dev

元のテンプレに一部置き換えたけど、ここで失敗してた

nameInstall dependencies
          runpython3 -m pip install -r ./requirements.txt

最後に

内輪向けに使う分にはWikiのほうが便利な気もするけど、デザイン性とか公開するときのことを考えたらこっちのほうが良いのかな~?

というか普段はWikiで書いておいて公開するときにこれを使えばいいのかな?