Babylon.jsのプロジェクトをGithub Pagesで動かす
こんにちは。Vtuberの彩です。
はじめに
本記事はやまゆさん（@akai_inu）のBabylon.js Advent Calendar 2022の企画に参加し、書かせていただいています。Babylon.jsに関する面白い記事がたくさんあるので、ぜひ他の記事も読んでほしいです！
本記事について
Babylon.jsのプロジェクトを作ったら、せっかく作ったものは公開したい！となるかと思います。
一方でGithub Pagesを使うとネットに公開できるのですが、その公開の仕方がいまいちわからない…。そういうい方向けの記事となっております。ご参考ください！
作成したプロジェクト
用意するもの
- Githubのアカウント
- 作ったBabylon.jsのプロジェクト
Babylon.jsの開発環境
- vite banilla js or vite banilla ts
↓ここからアップロードの手順です↓
リポジトリの作成
Githubにてリポジトリを新規作成します。
以下の赤線の通りにして、ページ下部のCreate repositoryボタンを押す
リポジトリの完成
リポジトリをローカルにCloneする
リポジトリにて画像の通り、Codeボタン押す→HTTPS状態でコピーアイコンを押す
Gitが使える任意のローカルフォルダにClone
Cloneされたフォルダに移動しmainリポジトリであることを確認。
（今回はGitの良さげな使い方の話ではないので直接mainをいじります）
アップロードしたいファイルを該当フォルダにコピペ
ローカルリポジトリの中身をいじる
vite.config.jsのbase項目を'/リポジトリ名/'に変更
（昔のファイルを使っているため私の環境だとtsファイルだが、おそらく重要じゃないので割愛…）
さらに同じくvite.config.jsに、以下の通りbuildの項目を追加。
buildの直前に「,」を入れ忘れるケアレスミスが無いよう注意。
build: {
target: 'esnext'
}
yarn build実施。間に注意のような文言が出るが特に動くので今回は無視。
distフォルダが作成される
distフォルダに.nojekyllファイルを作成。空のファイルでOK。
distからdocsにフォルダ名を変更。
よしなにリモートリポジトリにPush。
mainリポジトリに直にPushしていることについては特に今は気にしない。
git add .
git commit -a -m "yoshinani_comment"
git push origin main
Githubのリポジトリにファイルが反映されていればOK
Github Pagesを作成
画像の通りSettings→Pagesを開き、main、/docsを選択（本ページの通りに作成している場合です）。その後、Saveボタンを押す。
完成！
リポジトリのCodeのページにあるEnvironmentsのgithub-pagesを押します。Deployments/Historyのページに移るので、一番右上のView deploymentを押します。
動いてる！嬉しい！
おわりに
これで以上です。
本記事作成に手間取ったりした部分（詰んだ部分）があったのですが、にー兄さん（@ninisan_drumath）に助けてもらいました。にー兄さんありがとうございました！
Discussion