先看看演示效果吧：http://www.zhuimeng.online(已换域名)
周末放假回家，给自己的Hexo博客自定义了一个首页，看起来炫酷多了。实现简单，操作步骤稍微繁琐了一点，因为涉及到要修改的东西太多了。需要一点HTML和css基础，主要就是。。。算了，干啥都要时间，直接进入正题！
首先，我们看到博客名字后面的渐变色块，就是用的最基础的css渐变动画做的效果。其实我本来想用Google的Material Design做一个响应式的，奈何水平不够，设计这一块儿，真玩不来。
头像本来是个方块图，用PPT修成圆形的，然后放了上去。下面的四个图标，用的是阿里巴巴矢量图标库—Iconfont的图标，侵权请联系我删除！然后最下面就是固定的版权信息，最后就是背景动画！
背景用的是已经造好的轮子，基于JavaScript开发的。原作者在👍GitHub开源了，大家喜欢可以star支持一下！这里我就想吐槽一下了，国内很多模板资源站之类的网站，拿人家辛辛苦苦写的代码，假装是自己的卖钱。知道最可耻的是什么吗？这种人还好意思说请尊重劳动成果！！！
我基于现成的轮子，成功的让车驱动起来了，感兴趣的大家可以看看！我也放到GitHub上去了！你可以直接去下载，或者用一下指令clone到本地。
gitclonehttps://github.com/bessyjl/bessyjl.github.io.git
如果你觉得不错的话，可以按照我的模板修改成你自己的并使用它，我没啥要求，给个Star可以吗😘
1.先去GitHub创建一个repo，名字就用blog就行。
2.要修改hexo博客的生成目录信息，打开根目录下的配置文件：
文件位置:\_config.yml
-url: http://www.zhuimeng.online
-root: /
+url: http://www.zhuimeng.online/blog # url后需要加：/刚才创建的仓库名
+root: /blog/ # root修改为：/刚才创建的仓库名/
**********
**********
deploy:
type: git
- repo: git@github.com:bessyjl/bessyjl.github.io
+ repo: git@github.com:bessyjl/blog.git # 修改为新建的仓库地址
barnch: master
3.重新部署
这个时候，删掉原来的CNAME文件，不然会解析失败，记得在别的地方备份一份，等会还要用。然后：
hexo clean&& hexo g && hexo deploy
这时候我们去刚才创建的repo去看，已经好了:
4.上传自定义首页
这时候，我们先clone一份原来的repo的代码：
gitclonehttps://github.com/bessyjl/bessyjl.github.io.git
然后删除所有的文件，只留下CNAME文件，当然README.md文件也可以留下。复制我们已经写好的自定义首页的相关文件到这个本地仓库的文件夹，然后老规矩：
gitadd .
gitcommit -m"update index"
gitpush origin master
然后再访问我们原来的域名http://www.zhuimeng.online，发现已经成功了。然后博客地址变成了http://www.zhuimeng.online/blog。
在博客自定义首页文件index.html中，我们需要把跳转链接到http://www.zhuimeng.online/blog，不然就没地方访问你的博客了，因为别人并不知道要访问/blog路径。
我用的如下方法：
<!--标题-->
Bess's Blog
<!--社交图标-->
<!--博客-->
你以为这样就结束了？你难道没发现访问自己的博客，一大堆的报错？
你需要把hexo调用的每一个资源文件的路径前面加上/blog，否则就会导致无法调用，然后很多效果加载不出来。
重点不是这，是你根本不知道是哪些，在哪里。只能跟着报错信息去找，我大部分已经找到了，并改正了路径，但是还是有部分找不到了(懒癌)，反正已经不影响博客体验，我也就不管它了，哈哈哈😂
微信公众号:爪哇派生
QQ群:821557332
个人网站（博客）：https://www.52bess.com
GitHub：https://github.com/besscroft
如果您想支持和鼓励我一下，欢迎打赏哦！
*版权声明：版权归作者本人所有，尊重原创，推送文章除非无法确认，都会注明作者和来源。如果出处有误或侵犯到原作者权益，实属无心之举，请务必与我联系删除或授权事宜。本简书号所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明出处
网友评论