总结一下，Tomotoes大佬的homepage使用事项。
先贴上大佬的仓库地址： https://github.com/Tomotoes/HomePage
1、养成良好习惯，先star 
2、将项目clone至本地，并预装nodejs（windows msi包含了npm），保证版本6以上， 这里我12.16.3。
3、在homepage项目目录下，运行npm install，如果运行过程中出现错误“MSBUILD : error MSB3428: 未能加载 Visual C++ 组件“VCBuild.exe”，请尝试npm install --global --production windows-build-tools（按照提示的方案，安装 .NET Framework 2.0 SDK去解决，很麻烦，反正搞了半天，通过上面命令一键解决），再次npm install。如果没问题的话，将会在homepage目录下，生成一个“node_modules”目录，包含了项目所需的依赖包。因为非全局install，所以会在当前目录下生成node_modules模块。
4、继续homepage目录下，运行npm run dev。该命令会去执行package.json中配置的脚本。
执行成功结果：
会开启一个监听进程，并自启一个容器，我们直接localhost:8080可访问你的首页。如果你修改了静态文件，则他会热部署。
5、Tomotoes大佬的模板，多少与自身的需求不太一样，我们可修改，自定义自己的内容。具体参照readme。
- config.json：主页的基础信息，页面title，icon，个人信息等等。
- src/css/common/icon.scs：选项图标的样式，如下图。
这里icon库，引用的阿里的icon。具体做法，将自己需要的icon，添加至个人项目中（注意：图标修改为白色），然后复制 font-face。 替换文件中的font-face。
其中的.icon选择器代码必须保留。
.icon-blog -后的 blog 就是config.json中“icon”的值，content内容就是你阿里矢量图项目中具体某个图标的值，如
- src/css/main/main.css：首页图标的样式。
如果你需要修改，鼠标放置在某一图标上的背景色，需要修改这里。
具体颜色值，可以通过f12工具栏完成取色。
6、npm run dev 中的gulp build会对项目编译，生成一个dist 目录，这个目录包含的就是我们最终的首页静态资源。可以直接将这个目录扔到你的容器中，如nginx，即可访问。
当然，如果您没有一个国内主机或者合法备案的话，推荐您github.io，毕竟免费，0部署，不香吗？具体请看这里：https://blog.humh.cn/?p=519
当然，同种的静态服务还有gitee（一年要99RMB。。。），coding（个人免费，只不过依然大陆访问较慢）。
至此，首页就算大功告成了。具体效果如下：
发表评论