伪装前端工程师（一）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