寫好了功能/專案不知道怎么展示？手把手帶你白嫖 Git Pages 部署自己的專案去驚艷面試官

很多同學剛剛畢業在準備面試的時候，經常會碰到一些問題：

• 明明已經準備好了腹稿，但是面試的時候卻想不起來提起自己完成的一些炫酷功能；
• 想讓面試官看到自己實作的功能，卻不知道應該怎么部署；
• 用 CSS 寫了一些很炫酷的功能，但是卻因為不是一個完整的專案不知道怎么展現給面試官看；
• 做專案的時候買了云服務器，找作業續費的時候發現太貴了，有點超出預算；

如果你也有這樣的煩惱，不妨考慮白嫖 Git Pages 去渲染自己的頁面，然后將 url 放到簡歷，讓面試官看看你究竟有多優秀，

本篇會帶你將兩種型別的專案部署到 Git Pages 上，一種是 HTML+CSS+JavaScript 的專案，另外一種是使用框架——這里用 React——寫出來的專案，

下面是已經部署的練手專案：

• 已經成功部署的 HTML+CSS 的學成在線：

  在線地址為：https://goldenaarcher.com/study-proj/學成在線v2/

  頁面預覽：

  

• 之前部分實作，用 React 重寫學成在線的專案：

  在線地址為：https://goldenaarcher.com/xczx-react/#/

  頁面預覽：

  

GitHub

如果已經知道 GitHub 的同學可以跳過這部分，直接到部署階段，

什么是 GitHub

GitHub 是一個面向開源及私有軟體專案的托管平臺，因為只支持 Git 作為唯一的版本庫格式進行托管，故名 GitHub，

關于 Git 的用法可以變得非常復雜，下文的步驟詳解會將用到的所有 git 命令列列舉出來，但是具體的細節不會有太多贅述，

為什么用 GitHub

GitHub 是全球最大的開源代碼托管系統，這點也能證明它的可靠性，從另外的角度來說，其他很多大平臺也在用 GitHub 托管他們的代碼：

• 微軟家的 TypeScript

  TS 的檔案都是托管在 GitHub 上的，這也是為什么 TS 的檔案更新頻率還挺快的——一旦有 pull request 通過了，網站就會自動更新，

• electron

• React

• Vue

• mybatis

• sprint

• …

GitHub 確確實實是收到了各大開源軟體的親睞，在過去很多年里一直托管著這些開源專案，

另外，如果 GitHub 的賬號有很多的 fork 和 star，對之后的找作業也是很有幫助的，

Git 的安裝

對 Windows 來說，Git 的安裝是非常簡單的，到官方網站上：Downloading Git 下載 Git 的安裝包，運行完畢即可，

判斷 Git 是否成功安裝可以用 git --version 來判斷

PersonalProgress> git --version
git version 2.31.1.windows.1

專案準備

在正式開始部署專案之前，需要有這么幾個先決條件：

1. 注冊一個賬戶

   這一步酒不多贅述了

2. 新建一個倉庫

   這可以在點擊左側用戶資訊這個 new 按鈕：

   

   或是通過這個鏈接新建一個倉庫：https://github.com/new

新建倉庫

這里帶你一步一步創建一個新的倉庫，

1. 準備新倉庫

   也就是打開 https://github.com/new 這個網址后會出現的頁面，如下：

   

   • Repository name

     指的是這個倉庫的名稱，它具有唯一性，也就意味著一個賬戶下面不會存在多個名字相同的倉庫，例如說我之前已經寫過了一個名為 Chess 的專案，再去新建一個名為 Chess 的專案，它就會報錯：

     

     這是這個頁面唯一一個必選項，

     這只是一個例子，所以會以 sample 作為專案的名稱，但是在大多數情況下，倉庫的名稱必須要有意義，

   • 其余的都是可選項

   這里為了方便展示就略過所有的可選項，直接選擇新建倉庫(Create Repository)，

2. 新建一個專案

   當新創建了一個專案的時候，新的頁面會是下面這樣的：

   

   這是當專案為空白專案時顯示的默認頁面，

   這里會以新建一個專案為例，也就是使用第一個 or 中的代碼塊：

   # 這里會在命令列創建一個新的名為 README.md 的檔案
   echo "# test" >> README.md
   

   如：

   

   我這里就在 C:\assignment\front 這個路徑下面新建了一個名為 test 的檔案夾，

   最好來說檔案夾的名稱與專案的名稱是一致的，這樣比較好記憶，

   隨后我再敲入上面的命令，命令列就會生成一個內容為 # test 的 markdown 檔案，

   # 初始化 git 目錄
   git init
   # 將 README.md 代碼加入作業區
   # 只有作業區的內容會被提交
   git add README.md
   # 添加注釋
   git commit -m "first commit"
   # 設定分支
   git branch -M main
   # 將遠程倉庫和本地倉庫掛鉤
   git remote add origin https://github.com/GoldenaArcher/test.git
   # 將代碼提交到遠程倉庫
   git push -u origin main
   

   命令列截圖：

   

   現在的頁面截圖：

   

部署靜態頁面和不熟動態頁面的配置是不一樣的，所以接下來，可以準備內容，隨后再進行頁面部署了，

部署專案

純 HTML+CSS 與 使用框架的方法 會有些不太一樣，這里會帶著都過一遍，

純 HTML+CSS 的效果是立竿見影的，使用框架的話，之前也有博文講述怎么用 React 實作專案（連載中），感興趣的可以看看，

HTML+CSS

準備作業

1. 先準備一個 index.html，每個專案的默認路口都是 index.html，這是必須的頁面，

   為了方便，這里的 html 代碼只有一個 h1 標簽，標簽中是萬能的 Hello World：

   

2. 使用 git 上傳代碼

   test> git add .
   test> git commit -m "add index.html"
   [main c12f565] add index.html
   1 file changed, 12 insertions(+)
   create mode 100644 index.html
   test> git push
   Enumerating objects: 4, done.
   Counting objects: 100% (4/4), done.
   Delta compression using up to 8 threads
   Compressing objects: 100% (3/3), done.
   Writing objects: 100% (3/3), 481 bytes | 481.00 KiB/s, done.
   Total 3 (delta 0), reused 0 (delta 0), pack-reused 0
   To https://github.com/GoldenaArcher/test.git
   07f4f7c..c12f565  main -> main
   

   效果截圖：

   

   現在的 Git 頁面看起來如下：

   

準備作業到這里就做好了

部署 HTML+CSS

1. 點擊 Settings

   Settings 在這里：

   

2. 點擊 Pages

   Pages 在這里：

   

   這時候的 Git Pages 默認的 resources 為 None：

   

3. 修改 Sources，改為 main branch

   如下：

   

   這一步是將 Git Pages 的路勁引到 main 這個分支下，index.html 作為默認的路徑，就會被渲染到提供的 url 下

4. 這就完成了

   此時 http://goldenaarcher.com/test/ 的展示效果是這樣的：

   

   就是萬能的 Hello World 頁面，除了路徑不一樣之外，和本地渲染的頁面長的一模一樣，

純粹的 HTML+CSS+JavaScript 的頁面部署就是這么的簡單，只要參考路徑正確，那么 Git Pages 就會從當前目錄下尋找對應的檔案，進行操作，

使用框架

使用框架會稍微麻煩一點，以 React 專案為例，如果執行一樣的操作，即新建一個 Git Pages，將路徑引到 main 分支，那么這就是會被渲染出來的頁面：

以 CRA 創建出來的學習專案為例，正確的操作步驟為：

1. 在 package.json 中加入 home 這一屬性，home 對應的路徑就是 git pages 創建的 URL

   如，之前創立的學習專案的路徑為 http://goldenaarcher.com/xczx-react/：

   

   package.json 中對應的屬性就為：

   {
     "name": "xczx-react",
     "version": "0.1.0",
     // 加入 homepage 和對應 url
     "homepage": "https://goldenaarcher.com/study-proj/xczx-react/"
     // 其他屬性暫時先不動
   }
   

2. 安裝 gh-pages 依賴包

   gh-pages 是用來協助將專案部署到 GitHub Pages 上必要的依賴包，安裝方式是在終端使用 npm 或 yarn：

   npm install --save gh-pages
   # 或者 yarn
   yarn add gh-pages
   

3. 添加部署命令

   將下列屬性添加到 package.json 中：

   {
     "scripts": {
       // 新增的 命令列屬性
       "predeploy": "npm run build",
       "deploy": "gh-pages -d build"
     }
   }
   

4. 部署專案

   最后，在命令列運行 deploy 去部署專案：

   npm run deploy
   

5. 確認部署正確的分支

   gh-pages 會自動添加一個新的分支，這個分支才是用來部署專案的分支，所以，如果頁面無法正確被渲染的話，一定要查看 git pages 上，選擇的 sources 是否是 gh-pages 分支：

   

6. 成功完成部署

最后

提出幾個建議：

1. 你寫的專案，對實作的功能一定是要有所了解的，仿寫的也好，原創的也好，心里要有數，不要一問三不知，

2. 如果是線上面試，那么對方應該是可以直接打開 URL 的，

   如果是線下面試，如果實作了移動端適配，可以在手機上直接打開給面試官看，但是如果沒有做移動適配，一定要用平板或是電腦給面試官看，

3. 面試官一定會看你的專案嗎？

   我在面試別人的時候是會看簡歷的，之前協助面試的時候發現，5 人團隊中，至少會有 2-3 個人是會比較細致的掃一遍簡歷的，

   并不是說所有的面試官都會打開你的專案，但是當打開你的專案的面試官被吸引了，那么恭喜你，你就成功了，

最后，祝所有正在找作業或是打算找作業的同學早日識訓心儀的 offer，未來可期，