icework + gh-pages 超快部署超多模版頁面
項目地址：https://github.com/yhyddr/landingpage
效果地址：https://yhyddr.github.io/landingpage
前言
- GitHub 賬號 與它的 pages 服務
不需要任何準備的東西，服務器？域名？前端工程師？ 都不需要！只需要你有
就能夠享受到建立自己網站的樂趣。
- 飛冰
現在搭配飛冰，還能讓你一鍵生成你喜歡的頁面：最最主要的是，你的這個項目是一個 React App，你可以邊學前端邊改進你的 網站。實時熱更新查看自己的編輯成果。一鍵部署到網站供大家訪問，你值得擁有。
關于飛冰
簡單而友好的前端研發體系
特性
可視化開發：通過 GUI 操作簡化前端工程復雜度，同時通過適配器可接入不同的項目工程進行可視化管理，定制專有的前端工作臺
豐富的物料：基于物料拼裝提高項目開發效率，同時提供豐富的 React/Vue 物料
最佳實踐：結合豐富的經驗沉淀出的項目開發最佳實踐，包括目錄結果、開發調試、路由配置、狀態管理等
自定義物料：通過物料開發者工具快速開發構建私有物料體系
另外，飛冰正確用法我覺得應該是企業搭建自己的物料庫使用。
關于 GitHub Pages
Websites for you and your projects.
Hosted directly from your GitHub repository. Just edit, push, and your changes are live.
非常方便的網站托管，直接使用 你的 GitHub 項目庫構建。
安裝飛冰
首先安裝飛冰
<pre class="cm-s-default" style="color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"># 安裝工具
$ npm install iceworks -g
啟動工作臺
$ iceworks</pre>
創建項目
這里我們選擇基于推薦模板開始創建：
- 選擇你喜歡的一個模版，用于快速部署
新建一個文件夾或者選擇已有的空文件夾（避免覆蓋原有文件）;
給項目起一個項目名，以便后續識別。
Do something
你可以隨意看看控制臺有哪些選項，或者修修改改。
我們在這里主要看部署如何操作，所以直接跳過。
部署
Github
創建一個新的 GitHub 的項目倉庫。
項目
打開剛才創建的目錄，找到 package.json 文件，并添加一下三項
homepage
這里填寫你的賬戶和你的項目地址，如我的地址是 yhyddr/landingpage.
你的應該填寫 https://{{yourGithubName}}.github.io/{{yourProjectName}}
predeploy & deploy
將這兩行加入到 scripts 中
<pre class="cm-s-default" style="color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">"predeploy": "npm run build",
"deploy": "gh-pages -d build"</pre>
終端命令
打開 項目所在文件的終端 執行以下操作
推到遠端倉庫存儲代碼
注意換成你自己的倉庫名字
<pre class="cm-s-default" style="color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">git init
git add README.md
git commit -m "first commit"
git remote add origin git@github.com:{yourName}/{yourProjectName}.git
git push -u origin master</pre>
安裝 gh-pages
<pre class="cm-s-default" style="color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">npm install gh-pages --save-dev</pre>
推送頁面構建文件
<pre class="cm-s-default" style="color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">npm run deploy</pre>
之后如果本地有更改，就可以直接使用這條命令更新你的頁面了。
最后
找到 GitHub 的 setting 頁面
選擇 使用 gh-pages 分支進行網站構建。
然后你的網站就可以在提示的網址進行訪問了。
自定義域名
如果你擁有自己的域名，甚至可以直接設置在這里
不過不要忘記在自己的域名服務商那里解析為 GitHub 的 IP 地址哦。
效果總結
輕松擁有了一個自己的網站
同時只需要打開編輯器就可以非?？焖俚淖远x化。
還有諸多組件任意選擇幫助構建你自己的網站。
還在等什么！像一個前端工程師一樣構建網站吧。
還一鍵部署哦。
參考
https://monsoir.github.io/Notes/React/react/react-github-pages.html
