設計師如何自己搭建網站——在GitHub Page上部署網頁

摘要： 本篇記錄瞭如何通過GitHub Page釋出個人網頁，所以適合以下設計師閱讀： 有一定前端知識或者會使用Markdown語法； 想在網頁上顯示點什麼又不想麻煩去折騰域名和伺服器； 有Mac電腦，我還沒研究Windows。相關文章有很多，官網也寫得很詳細，我寫得有點...

本篇記錄瞭如何通過GitHub Page釋出個人網頁，所以適合以下設計師閱讀：

1. 有一定前端知識或者會使用Markdown語法；
2. 想在網頁上顯示點什麼又不想麻煩去折騰域名和伺服器；
3. 有Mac電腦，我還沒研究Windows。
   相關文章有很多，官網也寫得很詳細，我寫得有點囉嗦了，因為是第一篇關於GitHub的文章所以儘量介紹詳細點，避免日後查。之後還會寫一篇用GitHub搭建靜態部落格，也就是CMS(內容管理系統)的文章。
   以下正文：

1.起源

最早學習前端的時候就寫過一些頁面，也想自己部署到伺服器上，但是又不想折騰域名和伺服器（域名要購買還要備案，伺服器也需要購買）。所以一直沒有做這件事，準備簡歷的時候放的也是本地的程式碼。

直到前兩天，因為公司官網下線無法訪問（公司官網是我寫的一個靜態頁面），所以才想是否還有別的方式可以展示，於是找到這麼個神器GitHub Page。GitHub都不陌生，畢竟

全球最大男性交友網站

世界上最大的程式碼存放網站和開源社群 ofollow,noindex" target="_blank">1 。它旗下GitHub Page更是可以免費託管你的靜態頁面，雖說空間不限，但據說體積要控制在1G以下 2 。

折騰了半天總算是成功釋出了頁面， 官方文件

介紹得也非常詳細，以下是我操作過後的具體步驟。

2.註冊GitHub賬號

註冊地址： https://github.com/join?source=login

自行註冊。

3.建立Git倉庫（Repository）

• Description——倉庫描述，選填；
• Public，Private——GitHub限制免費使用者只能建立公開倉庫；
• Initialize this repository with a README——初始化倉庫時新增README，readme是一個說明檔案，用markdown語法編寫，打上勾的話就預設添加了這個檔案，如果不打勾後期也可以自己新增；
  

  3.本地配置Git

  建立好倉庫後顯示下圖頁面，點選紅框標記按鈕複製倉庫地址。
  這時候需要用到Git命令了 ，Git是一個分散式版本控制軟體 3 ，我們就通過Git命令來同步和管理程式碼。
  Git的安裝參考這篇文章： 安裝Git
  安裝好之後初次執行Git需要做一些配置：

1. 開啟系統自帶的Terminal；
   
2. 設定username和email，github每次commit（提交程式碼）都會記錄他們，在Terminal中分別輸入以下程式碼；

   git config --global user.name "你的使用者名稱"
   git config --global user.email "你的郵箱"

• 

1. 一般來說這樣就可以了，如果考慮到傳輸安全的問題，可以考慮加上SSH協議，具體操作可以搜尋“SSH keys Git”關鍵詞。

   4.克隆雲端倉庫到本地

   配置完Git之後，選擇一個本地資料夾來存放你的雲端倉庫，回頭要把雲端的倉庫克隆到這裡。比如下圖我選擇了 Front 這個資料夾。
   輸入以下命令，其中cd（Change directory）意為切換目錄到…：

   cd 資料夾地址

   其中資料夾地址不一定要手輸，直接把資料夾拖到Terminal裡面也行，按下回車。
   再輸入以下程式碼把雲端倉庫克隆下來，倉庫地址為之前第3步複製下來的地址。

   git clone 倉庫地址

   此時你的倉庫根目錄下應該已經有克隆下來的倉庫了，倉庫裡什麼也沒有。
   

   5.上傳檔案到雲端倉庫

   到這步，我們需要在本地庫中新增些東西，官方文件中是直接用命令把檔案寫進去：
2. 首先切換本地目錄到克隆下來的庫；

   cd 庫標題

   
3. 新建一個index.html檔案，並在裡面寫入Hello World。

   echo "Hello World" > index.html

   當然我們也可以直接把檔案拷到到本地庫資料夾下，或者在裡面建立。注意這個資料夾下一定要有一個index.html檔案，這裡預設讀者會點html，不解釋了。
   接下來就可以把檔案上傳到雲端倉庫了，在Terminal中輸入以下命令：
4. 把該資料夾下所有檔案納入版本管理；

   git add .

   
5. commit程式碼，把程式碼的一個版本提交到本地；

   git commit -m "版本日誌"

   
6. push程式碼，把程式碼推（上傳）到雲端倉庫，稍等一會兒就好了。

   git push -u origin master

   

   6.設定GitHub Pages

   這時我們已經成功將index.html檔案推到雲端倉庫了，再一步就能大功告成，點選下圖紅框標記進入Setting頁面：
   拉到下面的GitHub Pages部分，按下圖所示選擇master branch（主分支），點選save。
   重新整理頁面之後再回到GitHub Pages部分，可以看到頁面已經發布，點選連結進入就大功告成啦！
   

   7.結尾

   後續的修改只需要重複第5步就可以了，程式碼如下：

   cd 本地庫目錄
   git add .
   git commit -m "版本日誌"
   git push -u origin master

   GitHub還有很多好功能有待開發，善於利用搜索引擎，have fun~