假装前端工程师（一）Icework + GitHub pages

2019-08-11 本文已影响2人阿碎Abser

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 项目库构建。

安装飞冰

首先安装飞冰

<pre class="cm-s-default" style="color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"># 安装工具
$ npm install iceworks -g

启动工作台

$ iceworks</pre>

创建项目

这里我们选择基于推荐模板开始创建：

选择你喜欢的一个模版，用于快速部署

image.png

新建一个文件夹或者选择已有的空文件夹（避免覆盖原有文件）;
给项目起一个项目名，以便后续识别。

image.png

Do something

你可以随意看看控制台有哪些选项，或者修修改改。

我们在这里主要看部署如何操作，所以直接跳过。

部署

Github

创建一个新的 GitHub 的项目仓库。

项目

打开刚才创建的目录，找到 package.json 文件，并添加一下三项

image.png

homepage

image.png

这里填写你的账户和你的项目地址，如我的地址是 yhyddr/landingpage.

你的应该填写 https://{{yourGithubName}}.github.io/{{yourProjectName}}

predeploy & deploy

将这两行加入到 scripts 中

<pre class="cm-s-default" style="color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">"predeploy": "npm run build",
"deploy": "gh-pages -d build"</pre>

终端命令

打开项目所在文件的终端执行以下操作

推到远端仓库存储代码

注意换成你自己的仓库名字

<pre class="cm-s-default" style="color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">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</pre>

安装 gh-pages

<pre class="cm-s-default" style="color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">npm install gh-pages --save-dev</pre>

推送页面构建文件

<pre class="cm-s-default" style="color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">npm run deploy</pre>

之后如果本地有更改，就可以直接使用这条命令更新你的页面了。