常連

### 実現したいこと
Github Pagesに動画ファイルをアップロードしたい
### 前提
Github Pagesにてパララックスとして動画を組み込んだ静的サイトを公開したのですが動画ファイルだけがうまくアップロードできません。
videoという名前のフォルダーにmp4形式の動画ファイルを1つを入れたものです。
他のhtml・cssファイルや画像の入ったimgフォルダーなどは普通にアップロードできました。

最初は「25MB以上なのでアップロードできない」というメッセージが出たので動画ファイルを圧縮し小さくしたのですが失敗。
エラーメッセージを検索すると10MB以下にする必要があるという記事を見つけ7MBほどに小さくしましたがこれも失敗しました。
どうしたら解決できるでしょうか？

### 該当のエラーメッセージ
Something went really wrong, and we can’t process that file.

### 試したこと

ファイルの容量を圧縮して小さくする

### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。


Github Pagesに動画ファイルをアップロードしたい

## 知りたいこと

今個人開発で簡単なToDoリストを作っています。

フロント：GitHubPages(React)
バックエンド：Render（Flask+SQlite)

フロントとバックエンド間はAPIで繋げています。

この場合に、フロント⇔バックエンド間においてセキュリティ面など気を付けることなどはありますでしょうか？
特に、気になるのはGitHubPagesだと環境変数の設定などが出来ないのでAPIのURLが丸裸になってしまっていることです。

## 背景、状況
質問するに至った経緯と致しましては、当方開発を始めたばかりの初心者であり、APIに関してもあまり知識がない状態です。
なんとかデプロイをしたい！と辿り着いた先がこの構成でした。
そのため、これよりも簡単な方法があるよ！などありましたら知りたいです。

よろしくお願い致します。

GitHubPagesをフロントに使うときのWebAPIについて

### 質問・疑問

超・初歩的な質問になります．

現在，WSL上でVue.jsを利用したWebアプリを開発しており，最終的にはGithub Pagesで公開したいと思っています．
また，WebアプリにはMySQLなどのデータベースを利用してデータを管理したいと思っています．（データは取得のみ）

1. まずそもそも，データベースを利用したWebアプリを作成するためには，有料のVPSなどを借りて開発するしかないのでしょうか．（なんでも無料で容量が使えるとは思うなということですかね・・？）
1. WSL上にMySQLをインストールしてデータベースを用意し，それを参照するWebアプリを作成した場合，Github Pages上に公開したときは動作しないと思うのですが，どうでしょうか．
2. Github Pages上でもデータベースを動作させたいときは，自分のVPSにあるMySQLなどでデータを管理し，それにアクセスする方法しかないのでしょうか．
3. そもそも，最終的に公開したいと思うWebアプリを開発するときは，最初からWSL上で開発し始めてはダメということでしょうか．表示だけのWebアプリならば問題ないと思いますが，データベースが絡んでくる時点でVPS上で直接開発した方がいいのかと思いまして．

最後に，Vue.jsとデータベースを利用したWebアプリケーションをデプロイして公開するまでを，丁寧に解説する本やWebサイトをご教授願いたいです．かれこれ，VueやMySQLやデプロイについて十何時間も調べてますが，一向に全体像がつかめず，何度も挫折しかけています・・



データベースを利用したWebアプリを公開したい

### 実現したいこと
Github Pagesで公開したサイトを正常に表示させたい

### 前提
Github Pagesにアップロードした静的サイトが404エラーで表示されません
手順は
リポジトリを作成→フォルダやファイルをアップロード→settings→Pages→sourceをdeploy from a branch、branchをmain、rootに設定しsave→URLが出て公開済み→URLをクリック→404エラー

Pugを使いコーディングしたのは関係あるでしょうか？
Gulp関係のファイルはアップロードしていません
### 発生している問題・エラーメッセージ

404　File not found

The site configured at this address does not contain the requested file.

If this is your site, make sure that the filename case matches the URL as well as any file permissions.
For root URLs (like http://example.com/) you must provide an index.html file.

Read the full documentation for more information about using GitHub Pages.

### 試したこと
■確認事項
・index.htmlを配置しているか→publicフォルダの中にindex.htmlが入っていることを確認

・index.htmlのタイプミスの確認

・プッシュしてから5分以上経ってから確認

・index.htmlを少し編集し再コミット

・アクセスしているURLは間違えていないか

・ソースリポジトリは1GBを超えていないか→3.4MB

・リポジトリごと削除して作り直す


### 補足情報（FW/ツールのバージョンなど） 

参考にしたサイト
https://qiita.com/yuta_sawamura/items/6b05c2173a48e13a1373

Github Pagesで公開したサイトを開くと404エラーが出てしまう

### 実現したいこと  

- [ ] React+Viteで作成したサイトの下層ページを直接URL指定した際に発生する404エラーの解消  
  
### 前提  
- [ ] React+Viteでjsx言語を用いてSPAサイトを作成しています。  
  
- [ ] GitHub Pagesに、Custom GitHub Actions Workflowsを使用する設定でデプロイしています。  
  
- [ ] /ページを表示してからのページ遷移には成功しています。  
  
- [ ] パッケージ管理にはnpmを使用しています。  
  
- [ ] ルーティングにはreact router domを使用しています。  
  

### 発生している問題・エラーメッセージ

下層のページを直接URL指定(または更新)した時にのみ404エラーが発生しています。

### 改善に繋がりそうなソースコード

```src/App.jsx
import './style.css' 
 import {Header} from "./components/Header"; 
 import {Dev} from "./components/Dev"; 
 import {Skill} from "./components/Skill"; 
 import {Profile} from "./components/Profile"; 
 import {MiniMemo} from "./components/MiniMemo"; 
 import {Tobaccost} from "./components/Tobaccost"; 
 import {Footer} from "./components/Footer"; 
 import {Bottom} from "./components/Bottom"; 
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; 
  
  
 export const App = () => { 
  
   return ( 
     <Router> 
       <div className="container"> 
  
         <Header /> 
  
         <Routes> 
           <Route path='/WorksTest/' element={<Dev />} /> 
           <Route path='/WorksTest/Skill' element={<Skill />} /> 
           <Route path='/WorksTest/Profile' element={<Profile />} /> 
           <Route path='/WorksTest/MiniMemo' element={<MiniMemo />} /> 
           <Route path='/WorksTest/Tobaccost' element={<Tobaccost />} /> 
         </Routes> 
  
         <Footer /> 
  
         <Bottom /> 
       </div> 
     </Router> 
   ) 
  
 }
```


```vite.config.js
import { defineConfig } from 'vite' 
 import react from '@vitejs/plugin-react-swc' 
  
 // https://vitejs.dev/config/ 
 export default defineConfig({ 
   base: '/WorksTest/', 
   plugins: [react()], 
 })
```

```package.json
{ 
   "name": "test", 
   "private": true, 
   "version": "0.0.0", 
   "type": "module", 
   "scripts": { 
     "dev": "vite", 
     "build": "vite build", 
     "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", 
     "preview": "vite preview" 
   }, 
   "dependencies": { 
     "cross-env": "^7.0.3", 
     "react": "^18.2.0", 
     "react-burger-menu": "^3.0.9", 
     "react-dom": "^18.2.0", 
     "react-scroll": "^1.8.9" 
   }, 
   "devDependencies": { 
     "@types/react": "^18.2.15", 
     "@types/react-dom": "^18.2.7", 
     "@vitejs/plugin-react-swc": "^3.3.2", 
     "autoprefixer": "^10.4.14", 
     "eslint": "^8.45.0", 
     "eslint-plugin-react": "^7.32.2", 
     "eslint-plugin-react-hooks": "^4.6.0", 
     "eslint-plugin-react-refresh": "^0.4.3", 
     "gh-pages": "^6.0.0", 
     "postcss": "^8.4.27", 
     "react-router-dom": "^6.15.0", 
     "tailwindcss": "^3.3.3", 
     "vite": "^4.4.5" 
   } 
 }
```

### 試したこと1

1. index.html をコピーして 404.htmlを作成

2.  package.jsonに下記を追記
```package.json
 "scripts": {
    "postbuild": "cp build/index.html build/404.html",
 }
```
### 試したこと2

1. 404.htmlを作成(空のパターンとindex.htmlの内容をコピーするパターンを試行)

2. vite.config.jsに下記を追記

```vite.config.js
  build: {
    rollupOptions: {
      input: {
        main: resolve(__dirname, 'index.html'),
        404: resolve(__dirname, '404.html'),
      }
    }
  }
```


### 補足情報

恐らく404ページが表示される場合にindex.htmlを参照するようにビルドを行う、ということだと思うのですが、現在の知識では改善することが出来ず、ご教授をおねがいしたいです。

### バージョン

- [ ] Node.js16.17.1
- [ ] React.js:18.2.0
- [ ] Vite:4.4.9
- [ ] react router v6

React+Viteで作成してGitHub Pagesにデプロイしたサイトの下層ページが404エラー

### 実現したいこと

https://github.com/Hyuto/yolov5-tfjs
このコードを自分のGithub Pagesで動作させたいです。
最終的にはコードを改良して動作させるつもりですが、一旦そのままで試しています。

### 発生している問題・エラーメッセージ
Githubからローカルに持ってきて、ローカルでnpm等を使って実行すると正常に動作します。
その後、自分のリポジトリにpush(?)してGithub Pagesにアクセスすると画面には何も出ません。コンソールを確認するとエラーが出ています。
```
Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/jsx". Strict MIME type checking is enforced for module scripts per HTML spec.
index.jsx:1
```
自分なりに調べましたがGithub Pagesに詳しくなく、Reactも触ったことがないため躓いている状況です。
些細なことでも構いませんのでどなたか原因やアドバイス等を頂けたら幸いです。

ReactをGithub Pagesで動作させたい

### 実現したいこと
GitHub Pagesでページを公開したい

### 発生している問題・エラーメッセージ
リポジトリを作成して中身のファイルも入れて、さあ公開しようとしたところ、参考サイトのキャプチャと実際の表示が異なり先に進めなくなりました。
リンク先へ行ってみてもアップグレード(有料)の案内に行ってしまい、何をすれば公開できるのかがわかりません...。
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-04-30/cb2678a6-0fce-4231-93e3-95464247526c.png)
翻訳
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-04-30/c6763995-e8ac-4ae1-a3fd-aff30b03a819.png)

### 知りたいこと
・何をすれば公開できるのか
・なぜこの表示なのか

調べてもこれといった情報が見つけ出せず...ご教示いただきたいです。
初歩的な質問ですみません。どうぞよろしくお願い致します。


GitHub Pagesでページを公開したい

### Vercelではきちんと表示されるので、Githubでも表示したい

ここに実現したいことを箇条書きで書いてください。
- [ ] Vercelでの表示を確認する
- [ ] Githubの表示を確認する
- [ ] 上の２つのサイトは同期しているので同じ画面が見れると思っていた（初心者）
- [ ] Github PagesにアクセスしたらVercelサイトのような表示にしたい


### 前提

ここに質問の内容を詳しく書いてください。
（例）
Next.jsのチュートリアルを作成してGituhubにデプロイし、pagesを確認。READMEがWindowに表示されていました。同期しているVercelのサイトにアクセスすると、Windowではきちんと意図するビューが表示されていました。
### 発生している問題

GithubのREADMEが占領している問題を解決したい

### 該当のページ
GithubPages---------- https://lumijoe.github.io/nextjs_blog/
Githubのコード-------- https://github.com/lumijoe/nextjs_blog
同期しているVercel---- https://nextjs-blog-five-beta-88.vercel.app/


### 試したこと
Reactプロジェクトを４つぐらいGithubにデプロイしてみました。
どのプロジェクトもREADMEが初期表示されているので、Reactプロジェクト特有の事象だと考えています。
検索でもチェック、スクールメンター（バックエンドさん）にも聞きましたがフロントとは違うのでわからないとのこと。まだ情報が少ないのもあり、解決できてません。

READMEファイルを.gitignoreに入れ込む情報があったので試しましたが、技術が追いついてないのか完全に実現できませんでした。

そもそも、Reactプロジェクトの場合は、Github PagesではREADME以外の表示はできないのか？？などよくわからないままです。

### 補足情報（FW/ツールのバージョンなど）
package.json
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-10-17/50ec934d-43e8-4a66-941f-594ddae7fee0.png)

iMac
OS Ventura 
git version 2.33.0
next@13.5.4

ご教示いただきたくよろしくお願いいたします！
