制作流动特效个人主页
![](/2023/08/22/%E5%88%B6%E4%BD%9C%E6%B5%81%E5%8A%A8%E7%89%B9%E6%95%88%E4%B8%AA%E4%BA%BA%E4%B8%BB%E9%A1%B5/0.jpg)
制作流动特效个人主页
然项目地址:https://github.com/Tomotoes/HomePage
访问GitHub项目预览
预览主页或是通过iframe
预览:
教程
安装所需环境
项目所需环境为Nodejs 6.0以上版本
,Git
;
- 安装
Nodejs
:https://nodejs.org/en - 安装
Git
:https://git.p2hp.com/
一路傻瓜式的安装,一直点确定就可以了。
安装cnpm
cnpm
是国内npm
的镜像包。在这个项目中,用npm
会出现奇奇怪怪的问题,所以这里我们选择用cnpm
:
在桌面上右键,选择git bash here
,执行命令:
1 | npm install cnpm -g --registry=https://registry.npm.taobao.org |
即可完成安装。如在过程中遇到问题,参见:
- https://www.jianshu.com/p/fbd87ad45631
- https://www.oschina.net/p/cnpm?hmsr=aladdin1e1
- https://npmmirror.com/
安装项目
在合适的地方(这里以桌面为例)。右键,选择git bash here
,执行命令:
1 | git clone https://github.com/Tomotoes/HomePage.git |
这时桌面上会出现一个名为HomePage的文件夹。
修改错误并安装
项目有些地方有出错,接下来需要我们手动修改:
进入HomePage文件夹,找到package.json
文件,将其中的node-sass
和gulp-sass
所在行全部删掉。
回到HomePage文件夹,右键选择git bash here
,分别执行命令:
1 | cnpm install node-sass --save-dev |
1 | cnpm install gulp-sass --save-dev |
再找到gulpfile.js
文件,将第12行改成这个:
1 | const sass = require('gulp-sass')(require('sass')) |
然后回到HomePage文件夹,右键选择git bash here
,执行命令:
1 | cnpm install sass --save-dev |
1 | cnpm install |
至此,项目安装完成。
启动、预览和部署
在HomePage文件夹下执行以下命令以启动预览:
1 | cnpm run dev |
在HomePage文件夹下执行以下命令以启动构建:
1 | cnpm run build |
构建完之后dist
文件夹里的静态文件,即可上传至服务器完成部署。
配置
修改HomePage文件夹下的config.json
文件来完成个人信息定制。
更多信息请参见项目文档:https://github.com/Tomotoes/HomePage
评论
匿名评论隐私政策
✅ 你无需删除空行,直接评论以获取最佳展示效果