假裝前端工程師（一）Icework + GitHub pages 快速構建可自定義迭代開發的 react 網站
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 專案庫構建。
安裝飛冰
首先安裝飛冰
# 安裝工具
$ npm install iceworks -g
# 啟動工作臺
$ iceworks建立專案
這裡我們選擇基於推薦模板開始建立：
- 選擇你喜歡的一個模版，用於快速部署
- 新建一個資料夾或者選擇已有的空資料夾（避免覆蓋原有檔案）;
- 給專案起一個專案名，以便後續識別。
Do something
你可以隨意看看控制檯有哪些選項，或者修修改改。
我們在這裡主要看部署如何操作，所以直接跳過。
部署
Github
建立一個新的 GitHub 的專案倉庫。
專案
開啟剛才建立的目錄，找到 package.json 檔案，並新增一下三項
homepage
這裡填寫你的賬戶和你的專案地址，如我的地址是 yhyddr/landingpage.
你的應該填寫 https://{{yourGithubName}}.github.io/{{yourProjectName}}
predeploy & deploy
將這兩行加入到 scripts 中
"predeploy": "npm run build",
"deploy": "gh-pages -d build"終端命令
開啟 專案所在檔案的終端 執行以下操作
推到遠端倉庫儲存程式碼
注意換成你自己的倉庫名字
git init
git add README.md
git commit -m "first commit"
git remote add origin [email protected]:{yourName}/{yourProjectName}.git
git push -u origin master安裝 gh-pages
npm install gh-pages --save-dev推送頁面構建檔案
npm run deploy之後如果本地有更改，就可以直接使用這條命令更新你的頁面了。
最後
找到 GitHub 的 setting 頁面
選擇 使用 gh-pages 分支進行網站構建。
然後你的網站就可以在提示的網址進行訪問了。
自定義域名
如果你擁有自己的域名，甚至可以直接設定在這裡
不過不要忘記在自己的域名服務商那裡解析為 GitHub 的 IP 地址哦。
效果總結
輕鬆擁有了一個自己的網站
同時只需要開啟編輯器就可以非常快速的自定義化。
還有諸多元件任意選擇幫助構建你自己的網站。
還在等什麼！像一個前端工程師一樣構建網站吧。
還一鍵部署哦。
參考
https://monsoir.github.io/Notes/React/react/react-github-pages.html
https://ice.work/docs/guide/about
https://pages.github.com/
https://ice.work/docs/guide/st