質問失礼いたします。
前提としまして、知識ほぼ0の初心者がbolt.newなどを使用してwebサイト制作を行いました。
本職の方々からすると、至らぬ点多くございますが何卒ご理解いただけますと幸いです。
現在の状況
bolt.newでwebサイトを制作。
⇒商用目的不可ということが分かり、素人ながらgithubへの移行を試みる。
Gitbash を使用して、githubのページにアップロード。
なんとかdeployに成功するものの画面が真っ白。
色々試したものの、専門知識がなく八方ふさがりとなりました。
https://github.com/kiisu123/elandk123
↑githubのページになります
今後どのように進めていくべきか有識者の方、ご教授くださいませ。
.github/workflows/pages.yml の中で GitHub Pages にデプロイするジョブを書いたようですが、 Vite によるビルドステップがなく、ビルド前のソースを単に丸ごとアップロードしてしまっています。結果をブラウザで開くとビルド前の index.html が表示されるので、真っ白になります。
解決するにはビルドステップを記述してください。以下の記事が参考になると思います。
@kiisu123
Questioner
ご回答ありがとうございます。
送っていただきましたURLから指示通り変更を加えましたが、deployに失敗しました。
知識不足でわからないことばかりで、申し訳ないです、、
指の絵文字以降は記事筆者の補足説明であり、正しいコードではないので書くと壊れます。消してください。またブランチ指定などはご自分の環境に合わせて変えてください。6行目は branches: ['main'] でいいと思います。
@kiisu123
Questioner
サイトが表示されました！！
ありがとうございます。
ですが、画像が反映されておらず、app.tsxの中を修正する必要がありますか？
以下の行を src={import.meta.env.BASE_URL + slide.imageUrl} に変えてください。
また src/components/Hero/SlideData.ts 内のすべての imageUrl について、値の先頭のスラッシュを消してください。
src/components/Testimonials/Testimonals.tsx の以下の部分と src/components/Testimonials/SlideData.tsx も同様の修正が必要です。
@kiisu123
Questioner
できました！！！！
uasi様の回答がなければ、詰んでいました。
本当にありがとうございました！！
@kiisu123
Questioner
度々申し訳ございません。
ドメインを設定したところ、また真っ白になってしまいました。。。
原因を追究しましたが、なかなかうまくいかずご協力をお願いいたします
https://elandk.jp/
スクリーンショット1枚目では www.elandk.jp を kiisu123. の別名とする設定しかされていませんね。2枚目にあるカスタムドメイン設定の説明のリンク先をよく読んでから改めて質問してください。
気になったので見てみると、質問にある「商用利用」がどのような内容なのかよくわかりませんが、GitHub Pagesも商用利用はしないほうがよさそうですよ。
@kiisu123
Questioner
ご回答ありがとうございます。商用目的と表現しましたが、会社の事業内容などを掲載するのみですので、誰かとお金のやり取りが発生するわけではありません。記載方法がややこしく、申し訳ございません。 ちなみに、動作しない理由などはわかりますでしょうか？
https://zenn.dev/numagotatu/articles/2024-01-07-deploy-github-pages
デプロイ結果である distフォルダがアップロードされていません
githubでバージョン管理したいのではなくgithub.ioでのreactアプリの公開だけを目的にする場合は distフォルダの中身だけを githubリポジトリにアップロードすべきです
その記事はソースコードを隠したいがために private リポジトリでビルドした dist を public リポジトリにコピーするという回りくどい手順を踏んでいますが、今回そのような要求はなさそうなので、もっとシンプルにできると思いますよ。
点が漏れているでしょう。以下のように修正してみたらと思います。
<script type="module" src="./src/main.tsx"></script>
@kiisu123
Questioner
ご助言いただき、ありがとうございます。
ファイルから変更を加え、gitbashからgithubに変更を加えましたが解決しません。。。
./src/main.tsx は TypeScript+JSX で書かれているので、パスを直したとしてもビルドしないことには表示できません。