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

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

項目地址：https://github.com/yhyddr/landingpage<br />效果地址：https://yhyddr.github.io/landingpage

---

<a name="pORCe"></a>

前言

• GitHub 帳號 與它的 pages 服務

不須要任何準備的東西，服務器？域名？前端工程師？ 都不須要！只須要你有<br />就可以享受到創建本身網站的樂趣。

• 飛冰

如今搭配飛冰，還能讓你一鍵生成你喜歡的頁面：最最主要的是，你的這個項目是一個 React App，你能夠邊學前端邊改進你的 網站。實時熱更新查看本身的編輯成果。一鍵部署到網站供你們訪問，你值得擁有。

<a name="vYgxP"></a>

關於飛冰

簡單而友好的前端研發體系

<a name="vx97L"></a>

特性

• 可視化開發：經過 GUI 操做簡化前端工程複雜度，同時經過適配器可接入不一樣的項目工程進行可視化管理，定製專有的前端工做臺<br />
• 豐富的物料：基於物料拼裝提升項目開發效率，同時提供豐富的 React/Vue 物料<br />
• 最佳實踐：結合豐富的經驗沉澱出的項目開發最佳實踐，包括目錄結果、開發調試、路由配置、狀態管理等<br />
• 自定義物料：經過物料開發者工具快速開發構建私有物料體系<br />

另外，飛冰正確用法我以爲應該是企業搭建本身的物料庫使用。

<a name="n2n4E"></a>

關於 GitHub Pages

Websites for you and your projects.<br />Hosted directly from your GitHub repository. Just edit, push, and your changes are live.

很是方便的網站託管，直接使用 你的 GitHub 項目庫構建。

<a name="bHHIA"></a>

安裝飛冰

首先安裝飛冰

# 安裝工具
$ npm install iceworks -g
# 啓動工做臺
$ iceworks

<a name="kRbnR"></a>

建立項目

這裏咱們選擇基於推薦模板開始建立：

• 選擇你喜歡的一個模版，用於快速部署

• 新建一個文件夾或者選擇已有的空文件夾（避免覆蓋原有文件）;<br />
• 給項目起一個項目名，以便後續識別。

<a name="KIwOR"></a>

Do something

你能夠隨意看看控制檯有哪些選項，或者修修改改。<br />咱們在這裏主要看部署如何操做，因此直接跳過。

<a name="KOUv7"></a>

部署

<a name="oIUiq"></a>

Github

建立一個新的 GitHub 的項目倉庫。

<a name="L4J7T"></a>

項目

打開剛纔建立的目錄，找到 package.json 文件，並添加一下三項<br />

<a name="79GzO"></a>

homepage

<br />這裏填寫你的帳戶和你的項目地址，如個人地址是 yhyddr/landingpage.<br />你的應該填寫  https://{{yourGithubName}}.github.io/{{yourProjectName}}

<a name="8eCpc"></a>

predeploy & deploy

將這兩行加入到 scripts 中

"predeploy": "npm run build", 
"deploy": "gh-pages -d build"

<a name="SwECm"></a>

終端命令

打開 項目所在文件的終端 執行如下操做

<a name="RYA6h"></a>

推到遠端倉庫存儲代碼

注意換成你本身的倉庫名字

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

<a name="3IHKM"></a>

安裝 gh-pages 

npm install gh-pages --save-dev

<a name="GA7eg"></a>

推送頁面構建文件

npm run deploy

以後若是本地有更改，就能夠直接使用這條命令更新你的頁面了。

<a name="6ZL1S"></a>

最後

找到 GitHub 的 setting 頁面<br /><br />選擇 使用 gh-pages 分支進行網站構建。<br /><br />而後你的網站就能夠在提示的網址進行訪問了。

<a name="dtDFs"></a>

自定義域名

若是你擁有本身的域名，甚至能夠直接設置在這裏<br /><br />不過不要忘記在本身的域名服務商那裏解析爲 GitHub 的 IP 地址哦。

<a name="smtZQ"></a>

效果總結

輕鬆擁有了一個本身的網站<br />

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

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

<a name="hHk6g"></a>

參考

https://monsoir.github.io/Notes/React/react/react-github-pages.html<br />https://ice.work/docs/guide/about<br />https://pages.github.com/<br />https://ice.work/docs/guide/start