# GitHub 部署網頁流程

## GitHub 部署流程

### 創建一個公開專案

### 新增或上傳網頁原始碼

### 到設定頁面

### 選擇Pages

### 選擇發布分支

### 回到專案頁面點Deployments

### 取得網頁發布網址

## 網站樣式問題排查及解決

### 問題描述
在嘗試將 `style.css` 樣式表應用到 `index.html` 時，樣式沒有正確顯示。

### 排查步驟
1. 確認路徑設定 - 確保 `style.css` 與 `index.html` 在同一目錄下，並且在HTML文件中正確引用CSS文件。
2. 檢查 GitHub Pages 設定 - 查看是否從正確的分支部署，並且目錄設置無誤。
3. 瀏覽器快取問題 - 嘗試清除瀏覽器快取或使用無痕模式訪問頁面。
4. GitHub 部署狀態 - 檢查 GitHub Actions 的部署日誌，確認部署成功。
5. 文件內容驗證 - 確保 CSS 文件內容格式正確，沒有語法錯誤。

### 解決方案
去除了 HTML 文件中 `<style>` 標籤與 `<link>` 標籤的衝突，使用相對路徑引用 `style.css` 文件，確保 GitHub Pages 正確部署，以及瀏覽器快取清除後，問題得以解決。

## Web開發環境啟動方式

### 選擇要編輯的檔案

### 點選編輯按鈕旁的下拉式選單

### 點選 github.dev

### 之後就能用GitHub的線上編輯器了

### GitHub.dev 優缺點
#### 優點
1. 不用重新設定推送帳密。
2. 不用在推送時特別設定分支。
3. 可以省略大量推送下載的繁瑣步驟

#### 缺點
1. 切換分支時需要回到GitHub頁面才能切換分支。
2. 再檔案結構比較複雜時