序言
該系列文章將跟隨作者的開發進度持續更新。
預計內容如下：
構建自己的React UI元件庫：
（一）：從v0.0.0到 v0.0.1
（二）：構建首頁 （本文）
（三）：文件編寫
（四）：擦乾淨細節
（五）：推廣、宣傳、迭代
<= to be continue =
在這裡可以訪問到我的元件庫： BB-color
以及npm地址: BB-color
約定
- 本系列文章儘可能多的涉及到每個步驟、每個檔案和每個更新。
- 本系列文章中，整個專案的開始基於官方提供的
creat-react-app進行react構建，所有內容將使用最新的庫版本進行開發。
- create-react-app v2.1.1
- react v16.7.0
- webpack v4.19.1
- babel 7+
- node v10.15.0
必備知識
- 基本掌握 React
- 會使用 Git
- JavaScript、CSS等基礎知識
正文開始
起點
通過第一章的學習，你已經建立出了自己的React UI 元件庫，也許你並不滿足文中的Button 元件，並且新增了屬於你自己獨有的元件，但是這不影響之後的學習。本章將以上一章的結尾作為開始，繼續補充知識點。如果你還沒有看過第一章，可以在序言中看見相關的跳轉連線。
通過GitHub Pages建立首頁
我們的首頁以及之後的文件都屬於靜態頁面，那麼我們就不需要再去申請伺服器、申請域名。github 已經給我們提供了我們所需的所有內容：我們可以通過GitHub Pages建立首頁。
這是github Pages的介紹頁: pages.github.com/
你可以按照介紹頁上的步驟建立你自己的靜態主頁，但是我們已經建立好了我們的檔案倉庫，何不直接利用它？
在github上開啟你的UI元件庫 倉庫，點選 Setting
然後滾到頁面下方，依次點選
注1 & 知識點A：
第二行 master branch /docs folder 無法選中，原因是我們的專案程式碼裡沒有 docs 資料夾。這個選項的意思是 github page 可以識別我們專案中的 docs 資料夾, 並在這個資料夾中尋找 index 檔案進行部署
我們現在先選第一行的master branch，在建立docs之後再更改
隨後github給你的倉庫建立了一個可訪問站點。
現在點進去預設進入了根目錄的readme.md檔案
編寫首頁
在做主頁的時候，可以參考參考以上或者更多UI元件庫的首頁，然後創作出自己的首頁。 你可以用純粹靜態的html檔案，也可以進行精細開發，但最終都請生成相應的靜態檔案。
我在這裡就以最簡單的形式開發：只使用一個html和css檔案。
在根目錄建立docs檔案 在 知識點A 中已提到為何要建立這個資料夾
然後我在這裡編寫出我的靜態主頁
下一步，提交到Github
git tag -a 'v0.0.2' -m '首頁建立'
git push origin v0.0.2
git add .
git commit -m '首頁建立'
git push -u origin master
複製程式碼修改github pages主頁路徑
回到我們在github上 UI庫的倉庫，進入setting，移動到之前建立github pages的位置。
修改設定，選擇第二項，儲存
現在再讓我們點選上面的地址。
讓我們一起驕傲吧，我們成功了，我們的藝術品有自己的首頁了！
收尾
最後讓我們修改一下檔案的描述
加上我們的主頁地址。
尾聲
這是一次令人激動的過程，我在製作這個主頁時，彷彿找到了才學前端時的那種純粹感，看見自己編寫的主頁顯示出來時的快樂，將自己的主頁分享給他人時的自豪。
在下一章中，我們將會學習整個UI元件庫中，第二重要的內容：文件編寫。
如果有任何不當或缺失的地方，希望能在評論區指出，理性交流。
如需轉載請註明作者與原文地址
作者：ParaSLee