僞裝前端工程師（一）Icework + GitHub pages 快速構建與部署可自定義迭代開發的 react 網站

icework + gh-pages 超快部署超多模版頁面

項目地址：github.com/yhyddr/land…
效果地址：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 git@github.com:{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 地址哦。

效果總結

輕鬆擁有了一個本身的網站

同時只須要打開編輯器就能夠很是快速的自定義化。
還有諸多組件任意選擇幫助構建你本身的網站。

還在等什麼！像一個前端工程師同樣構建網站吧。
還一鍵部署哦。

參考

monsoir.github.io/Notes/React…
ice.work/docs/guide/…
pages.github.com/
ice.work/docs/guide/…