Docusaurus でビルドしたドキュメントを GitHub Pages に upload すると、デザインが Chrome だと変わってしまう

[suzuki-shunsuke]

https://docusaurus.io/

背景

tfaction のドキュメントを docusaurus で作成し、 GitHub Pages に upload したものの、見た目が期待通りにならない。

対象

• https://suzuki-shunsuke.github.io/tfaction/docs/
• https://github.com/suzuki-shunsuke/tfaction-docs

問題なし

• npm start + Chrome (PC)
• GitHub Pages + Safari (PC)

問題あり

• GitHub Pages + Chrome (PC)

問題点

• サイドメニューがハンバーガーメニューになってしまう
• フォントがでかいというか、余白がないというか、見た目が微妙になっている

build, upload 方法

• GitHub Actions で main branch に push したら upload https://github.com/suzuki-shunsuke/tfaction-docs/blob/main/.github/workflows/deploy.yaml

補足

aqua でも同様の方法でドキュメントを生成しているが、このような問題は起こっていない。

https://aquaproj.github.io/

一つ aqua と違うところとしては pages を false にしている。

• https://docusaurus.io/docs/docs-introduction#docs-only-mode
• https://github.com/suzuki-shunsuke/tfaction-docs/blob/0c84b79c760b5c27f789b11ab57d3666b4f7d29e/docusaurus.config.js#L28

あとは version が違う。ちょっと aqua にそろえて確認する。

• https://github.com/suzuki-shunsuke/tfaction-docs/blob/0c84b79c760b5c27f789b11ab57d3666b4f7d29e/package.json
• https://github.com/aquaproj/aquaproj.github.io/blob/c861c9b495e6205555ff2490370cdf74b9f8a412/package.json

揃えてみたが、特に何も変わらなかった。

https://github.com/suzuki-shunsuke/tfaction-docs/pull/9

[suzuki-shunsuke]

本家で聞くのが早いのかもしれない。

https://github.com/facebook/docusaurus/discussions

[suzuki-shunsuke]

別の端末 macOS, Chrome で確認したら期待通り表示されている。 Chrome の version を確認したが、特に関係なさそうだった。

https://suzuki-shunsuke.github.io/tfaction/docs/

問題の端末

Chrome を更新しています バージョン: 97.0.4692.99（Official Build） （x86_64）

version 確認したら最新に update された

Chrome は最新の状態です バージョン: 98.0.4758.80（Official Build） （x86_64）

問題なかった端末

version 確認したら最新に update されたが、それでも期待通り表示されている

Chrome を更新しています バージョン: 97.0.4692.99（Official Build） （x86_64）

Chrome は最新の状態です バージョン: 98.0.4758.80（Official Build） （x86_64）

[suzuki-shunsuke]

直らないが、どうも環境依存っぽい。一旦諦める。