vs GitHub Pages でギリ勝てた話

久しくWebページを公開していなかったのですが、静的なものでよければ簡単に無料でできると聞いたのでやってみました。･･･んですけど、詰まったので書きます。忙しい方は下の４行だけ読んでください

①そもそも404
→ GitHub->Setting->pagesから参照ブランチをgh-pagesに変更する

②index.htmlは参照できてそうなのに、画面に何も表示されない
→ Pathを/reponame/に変更する

とりあえずcreate-react-app

npx create-react-app my-app
cd my-app
npm start

しました。

とりあえずgit remote add

git remote add reponame
git add .
git commit -m "init"
git push origin main

しました。

reponameはリポジトリの名前です。れぽなめ

ページ作る

今回は簡単な作りたいものがあったので、MUIってなんでもきれいにできるなあなどと考えながらTabpanel.jsxでタブパネルをいじいじしました。

この時点でのファイル構造はこんな感じです（みんなもっとこれ載せてくれたら世界平和になる説あるよね）

いざ、GitHub pages

やんぞ。

ここら辺を参考にしました。とってもわかりやすい。感謝

やったことはパッケージのインストールふたつと、package.jsonの書き換えです。

インストールたち

npm install gh-pages --save-dev
npm install cross-env --save-dev

package.jsonかきかえ

  "homepage": "https://ユーザー名.github.io/reponame",
  "scripts": {
    "start": "react-scripts start",
    "build": "cross-env PUBLIC_URL=/reponame react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "deploy": "npm run build && gh-pages -d build"
  },

ユーザー名はGitHubのユーザー名、reponameはリポジトリ名です。れぽなめ

これでできるはず！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！

npm run deploy

出来なかったんだよな

ので、わたしとGitHub pages君の戦いの記録を書こうかなと思います。

先鋒戦

そもそも404が表示されていて、読んでみるとindex.htmlがないみたいでした。npm run deployするとbuildフォルダが作成されるんですけど、そこ見るとちゃんといるんですよね、index.html。カ～～～～ッ！？！？

キレたので参照ブランチをgh-pagesというbuildフォルダがpushされているブランチに変えました。ゴリ押し

WINWIN！！！！ Saveボタン押すの忘れないようにね

（このタイミングでpackage.jsonをごにょごにょしたりしましたが、なにもうまくいきませんでした。もっといい解決方法があれば知りたいです）

中堅戦

index.htmlが見つかったみたいで、タブのところでは”React App”の表示･･･だけど画面真っ白なんすよね？？？

フーン････････

いろいろ調べてページ遷移は実装しないのにBrowserRouterを導入したり、basenameを書いたりしましたが結局

const App = () => (
    <BrowserRouter>
      <Routes>
        <Route exact path="/reponame/" element={<Home />} />
      </Routes>
    </BrowserRouter>
);

で解決できました。

これなんでbasenameの記述で解決できないんだろうな。きっとできるんだと思います、うまくやれなかっただけで…