--- tags: 軟體工程師體驗營 - 2024 --- # 🏅 JS 任務 Day27 - Hexo 部署至 Github Pages 今天我們要實作將 Hexo 部署至 Github Pages,可以從「Hexo 部落格架站任務」章節先觀看課程影音「註冊 GitHub 服務」了解如何註冊 GitHub 帳戶並建立儲存庫 ### Github Pages 部署 #### 安裝部署套件 在終端機輸入以下程式碼安裝套件 ``` npm install hexo-deployer-git --save ``` #### 調整 _config.yml 設定 接著要調整部署設定,在 `_config.yml` 最後方有 `# Deployment` 之區塊,針對 deploy 的內容作修改 ``` deploy: type: git repo: https://github.com/<username>/<project> branch: gh-pages ``` >要注意 Repo 的部分要修改為你的 username 與 project(建立的 Repo 名稱) 在第 16 行的部分也要將 url 名稱修改, ``` https://<你的使用者名稱>.github.io/<你建立 Repo 的名稱> ``` 以上修改完成後就能開始執行部屬的指令 #### 一鍵部屬程式碼 依序執行 `hexo clean` 與 `hexo deploy` #### 完成 Github Pages 設定 接下來要透過 GitHub 設定將 Pages 的分支調整為 gh-pages `Settings > Pages` ![](https://imgur.com/DVssm2j.png) >若沒有上傳其他分支,紅框的部分會預設 gh-pages ,但若有載入兩支以上的分支,這邊就要注意要選擇正確的分支才能呈現喔~ 此時上方就會呈現我們部署好的 Github Pages 網址 ``` https://<你的使用者名稱>.github.io/<你建立 Repo 的名稱> ``` > 會需要等個幾分鐘,才會呈現出正確頁面 ### 補充:原始碼上傳 我們可以上傳本地尚未編譯的原始碼至 Github,當需要還原或使用不同電腦修改程式碼時都可以方便我們調整與管理 >可以與 Github Pages 共同部屬在同一個 Repo 中(分為 main 與 gh-pages 兩個分支),或者額外使用一個儲存庫來存放也可以。 以下提供 Git 指令,可以在終端機依序輸入以下指令上傳至 Github。 ``` git init (初始化 git) git add . (將當前資料添加到暫存區) git commit -m "..." (提交這次的更新訊息) git remote add origin https://github.com/[username]/[repositories] (加入遠端儲存庫) git branch -M main (將當前檔案分支命名為 main) git push -u origin main (將檔案推送至遠端分支 main) ``` ## 回報流程 將作業部署到 GitHub Pages 並複製連結貼至「回報區」回報 ![](https://i.imgur.com/vftL5i0.png) 回報區 --- | 報數 | Discord 名字 | Codepen/其他回饋 | |:----:|:-------------------:|:---------------------------------------------------------------------------------------------------------------------------------:| | 01 | 毛巾 | ![penguin-32](https://hackmd.io/_uploads/ry-9tjLVC.png)[Github_Pages ](https://maojin-juan.github.io/Maojinjuan/) ![Github](https://hackmd.io/_uploads/H1_RDoLV0.png =7%x)[Github_Repo](https://github.com/Maojin-juan/Maojinjuan) | | 2 | JY |[GitHub Page](https://jylee0805.github.io/JiaYing/) / [GitHub Repo](https://github.com/jylee0805/JiaYing) | | 3 | Michelle0417 | [Github Page](https://xiaojia0623.github.io/2024_day_mission27/) / [Github Repo](https://github.com/xiaojia0623/2024_day_mission27/tree/main) | | 4 | Chia Pin | [repo](https://github.com/joker-cat/everyday-hexo-demo)/[page](https://joker-cat.github.io/everyday-hexo-demo/) | | 5 | Ariel | [Github Page](https://ariel0508.github.io/firstBlog) / [Github Repo](https://github.com/Ariel0508/firstBlog) | 06 | Tough life | [Github Pages](https://hakuei0115.github.io/Blog/) / [Github Repo](https://github.com/hakuei0115/Blog) | | 7 | macihuang | [Github Page](https://macy1215.github.io/macyblog/) / [Github Repo](https://github.com/macy1215/macyblog) | 8 | Antonio | [Github Page](https://ling-jun-hao.github.io/hexo-template/) / [Github Repo](https://github.com/LING-JUN-HAO/hexo-template) | 9 | 小白 | [Github Page](https://shiro-li.github.io/studynote/index.html) / [Github Repo](https://github.com/Shiro-li/studynote) | 10 | maruko1105 | [Github Page](https://marukox1105.github.io/UIUX/) | 17 | Anais77 | [Repo](https://github.com/Anais7775/studyShop)/[Pages](https://anais7775.github.io/studyShop/)| | 12 | Sammy | [Pages](https://sammyhuang12.github.io/myBlog/)| <!-- | num | user | [Github Pages]() / [Github Repo]() | -->