伪装前端工程师（一）Icework + GitHub pages 快速构建与部署可自定义迭代开发的 react 网站

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

项目地址：https://github.com/yhyddr/landingpage
效果地址：https://yhyddr.github.io/landingpage

---

前言

• GitHub 帐号 与它的 pages 服务

不须要任何准备的东西，服务器？域名？前端工程师？ 都不须要！只须要你有
就可以享受到创建本身网站的乐趣。

• 飞冰

如今搭配飞冰，还能让你一键生成你喜欢的页面：最最主要的是，你的这个项目是一个 React App，你能够边学前端边改进你的 网站。实时热更新查看本身的编辑成果。一键部署到网站供你们访问，你值得拥有。

关于飞冰[](https://github.com/alibaba/ic...

简单而友好的前端研发体系

特性

• 可视化开发：经过 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 地址哦。

效果总结

轻松拥有了一个本身的网站

同时只须要打开编辑器就能够很是快速的自定义化。
还有诸多组件任意选择帮助构建你本身的网站。

还在等什么！像一个前端工程师同样构建网站吧。
还一键部署哦。

参考

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/start