GitHub+Hexo+NexT博客搭建及优化

准备工作

下载安装git

安装Node.js

托管到Github

安装Hexo

参见这里总之就是各种下载安装,遇到问题是Node.js需要手动添加环境变量,在Window命令行下测试以下命令

1
2
3
git  --version
node -v
npm -v

成功安装则会显示版本信息。

优化(NexT主题)

分类、标签、文章阴影、统计信息、打赏、分享等

设置太多没有记录,推荐几个链接吧

修改侧栏为左侧

优化

文章宽度调整

在D:\Hexo\blog\themes\next\source\css_custom\custom.styl添加了

1
2
3
//文章宽度

.main-inner {width: 880px;}

增加评论功能(Gitment)

  • 从Next主题配置文件中可以看出已经集成了很多第三方应用,只需要去掉注释#号并填入相应参数即可使用。最初使用了友言(youyan)部署后并没有成功,最后使用了Gitment,Google一下会有很多教程,但其中很多是老旧的版本需要添加第三方应用的代码就不用看了。教程看这里。部署完成需要等待一会儿,登录github账号,点击初始化评论。

  • 踩坑出错看这里。其中自己遇到Error:validation failed,在blog\themes\next\layout_third-party\comments

    1
    2
    3
    4
    var gitment = new {{CommentsClass}}({
    id: '<%= page.title %>', //修改后
    owner: '{{ theme.gitment.github_user }}',
    repo: '{{ theme.gitment.github_repo }}',

关于Mist主题居中问题

Mist主题下文章标题和阅读全文等均默认居左,修改居中参见这里。其中Read more修改方法提到的.post-more-link并未找到,猜想.post-button,尝试修改

1
2
3
.post-button {
margin-top: 20px;
text-align: left;//修改此处为right

成功将Read more更改至右侧。

Donate comment here