阿毛
It's me !
想你所想
个人站点主页Tomotoes Homepage的使用

总结一下,Tomotoes大佬的homepage使用事项。

先贴上大佬的仓库地址: https://github.com/Tomotoes/HomePage

1、养成良好习惯,先star :oops: 

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中配置的脚本。

https://file.blog.humh.cn/2020/05/图片-11.png

执行成功结果:

https://file.blog.humh.cn/2020/05/图片-12.png

会开启一个监听进程,并自启一个容器,我们直接localhost:8080可访问你的首页。如果你修改了静态文件,则他会热部署。

5、Tomotoes大佬的模板,多少与自身的需求不太一样,我们可修改,自定义自己的内容。具体参照readme。

  • config.json:主页的基础信息,页面title,icon,个人信息等等。
  • src/css/common/icon.scs:选项图标的样式,如下图。
https://file.blog.humh.cn/2020/05/图片-13.png

这里icon库,引用的阿里的icon。具体做法,将自己需要的icon,添加至个人项目中(注意:图标修改为白色),然后复制 font-face。 替换文件中的font-face。

https://file.blog.humh.cn/2020/05/图片-14.png

其中的.icon选择器代码必须保留。

https://file.blog.humh.cn/2020/05/图片-15.png

.icon-blog -后的 blog 就是config.json中“icon”的值,content内容就是你阿里矢量图项目中具体某个图标的值,如

https://file.blog.humh.cn/2020/05/图片-16.png

  • src/css/main/main.css:首页图标的样式。
https://file.blog.humh.cn/2020/05/图片-17.png

如果你需要修改,鼠标放置在某一图标上的背景色,需要修改这里。

https://file.blog.humh.cn/2020/05/图片-18.png

具体颜色值,可以通过f12工具栏完成取色。

https://file.blog.humh.cn/2020/05/图片-19.png
https://file.blog.humh.cn/2020/05/图片-20.png

6、npm run dev 中的gulp build会对项目编译,生成一个dist 目录,这个目录包含的就是我们最终的首页静态资源。可以直接将这个目录扔到你的容器中,如nginx,即可访问。
当然,如果您没有一个国内主机或者合法备案的话,推荐您github.io,毕竟免费,0部署,不香吗?具体请看这里:https://blog.humh.cn/?p=519
当然,同种的静态服务还有gitee(一年要99RMB。。。),coding(个人免费,只不过依然大陆访问较慢)。

至此,首页就算大功告成了。具体效果如下:

https://humh.cn

发表评论

textsms
account_circle
email

想你所想

个人站点主页Tomotoes Homepage的使用
总结一下,Tomotoes大佬的homepage使用事项。 先贴上大佬的仓库地址: https://github.com/Tomotoes/HomePage 1、养成良好习惯,先star :oops:  2、将项目clone至本…
扫描二维码继续阅读
2020-05-22