---
# System prepended metadata

title: github webpage 部屬網頁流程
tags: [規格書]

---

# GitHub 部署網頁流程

## GitHub 部署流程

### 創建一個公開專案
![創建專案](https://hackmd.io/_uploads/HkKc60ae0.jpg)

### 新增或上傳網頁原始碼
![上傳原始碼](https://hackmd.io/_uploads/rk0TTCTeR.jpg)

### 到設定頁面
![設定頁面](https://hackmd.io/_uploads/B1YZCR6lC.jpg)

### 選擇Pages
![選擇Pages](https://hackmd.io/_uploads/rJlN0ApgA.jpg)

### 選擇發布分支
![選擇發布分支](https://hackmd.io/_uploads/ryBUR0TxA.jpg)

### 回到專案頁面點Deployments
![點擊Deployments](https://hackmd.io/_uploads/SJI20RpeR.jpg)

### 取得網頁發布網址
![取得網址](https://hackmd.io/_uploads/rJyJJkAlA.jpg)

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

### 問題描述
在嘗試將 `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開發環境啟動方式

### 選擇要編輯的檔案
![選擇檔案](https://hackmd.io/_uploads/BJjdd0KWA.jpg)

### 點選編輯按鈕旁的下拉式選單
![下拉式選單](https://hackmd.io/_uploads/HkMcuAFZ0.jpg)

### 點選 github.dev
![點擊github.dev](https://hackmd.io/_uploads/Hk7TuAY-A.jpg)

### 之後就能用GitHub的線上編輯器了
![線上編輯器](https://hackmd.io/_uploads/HJletRtZR.jpg)

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

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