这又是一篇如何使用github pages和hexo搭建个人博客的文章,是的,网络上已经有无数这类文章,所以我不准备详细记录每一个步骤,对于网络上已经有的,我只列出参考的文章。本文着重选择建立一个个人博客最实用,最需要的配置修改,hexo的扩展性是非常出色的,完全可以定制出非常酷炫的各种效果,这类修改本文并不涉及。另外网络上的一些文章已经比较陈旧,完全参照可能会遇到一些问题,本文进行了一些补充。如果你正在准备搭建一个个人博客,本文应该可以帮助你,不需要在网络上各种文章中苦苦寻找验证。当然,主要还是要感谢网络上乐于分享的人们,正是在他们的成果之上,才能有本博客,也欢迎大家常来逛逛:http://zhongpan.tech。
使用github pages建立个人博客
github为开发者提供了基于git版本管理的代码和内容的托管服务,他同时提供了github pages功能,允许开发者建立个人网页,并提供了一系列建站模板,以及形如xxx.github.io的二级域名,其中xxx为github账号名,建立github pages的过程和建立仓库的过程类似,只是仓库名总是xxx.github.io,这样就启用github pages了。具体可参考[1],关于git ssh key配置可参考[2],关于如何绑定自己的域名参考[3],其中提到主机记录@的记录值后要加一个.,经过验证其实是不需要的,我是使用的阿里云域名服务。
github pages也是有限制的,只能托管静态页面,无法运行后端服务,也就不能进行服务端渲染和路由。对于建立复杂的个人网站还是最好使用云主机,对于建立相对简单的个人博客,使用github pages还是不错的选择,对页面的管理和管理git代码类似,开发者会非常亲切。
使用hexo管理博客
前面已经提到github pages只能托管静态页面,一般的个人博客需要提供标签、分类等功能,通过手工去编辑静态页面是非常不方便的。因此就产生了hexo这样的项目,hexo是使用node.js编写的,用于将用户编写的页面转换成网站静态页面,不仅如此,它还提供了丰富的插件和主题,实现各种客服端网页功能,比如评论、分享等等。本博客使用了Hexo v3.9.0进行管理,具体安装步骤参考[1]。hexo初次使用可能会遇到如下问题:
- 通过git上传,除了修改站点的_config.yml的deploy属性,注意还需要安装hexo-deployer-git插件:
1 | npm i hexo-deployer-git --save |
-
每次重新上传后会删掉github pages上的CNAME、README.md文件:可参考[4]解决。
-
如何使用图片:可参考[5]。
-
注意图片名中不能包含空格,否则图片无法显示
-
注意如果使用了hexo-image-assert插件,就不要用asset_img标签,总是用markdown语法,否则图片显示不了,转换生成的html中的image路径似乎进行了两次转换,导致路径不对
-
-
如何添加阅读全文:可参考[6]。
简单总结一下hexo的功能:
-
页面分post、page和draft三种,hexo中称为layout,post就是博客文章,位于source/_posts目录下,page是独立的页面,位于source目录下同名目录,draft是博客草稿,位于source/_drafts目录下,草稿完成后通过
hexo publish
命令自动发布到post中。hexo内置支持一些特殊用途页面,如标签、分类、存档,对post进行归类,如标签页面,在Front-matter中定义type属性为tags:1
2
3
4
5
6
title: tags
date: 2019-06-21 10:15:51
type: "tags"
comments: false然后在post中使用上述type,例如:
1
2
3
4
5
6
title: 使用github page和hexo搭建个人博客问题总结
date: 2019-06-01 11:03:06
tags:
- hexo -
页面都是使用markdown编写,执行
hexo g
后会转换成html,放到public目录下,最后上传到github的就是public目录下的内容。 -
对于上述标签、分类等页面,hexo会自动生成静态页面,其中包含相应的博客文章链接,观察一下public下的目录结构就会发现这一点。这是通过
hexo-generator-tag
、hexo-generator-category
等插件实现的。 -
网站的最终呈现效果都是通过主题实现的,hexo默认的主题是landscape,还有众多的第三方主题,主题主要使用模板技术生成最终的静态页面,如swig、ejs、jade等,相应的需要安装对应的插件,如
hexo-renderer-jade
,ejs是默认的。
配置Hexo-NexT主题
hexo默认的主题landscape难以完全满足个人博客需求,试用了几款主题之后,最终我选择了NexT.Mist v7.1.2,它的功能非常丰富,安装配置可参考[7],参考上述文章,本博客主要做了如下修改,修改过程中发现上述文章有些内容已经过时:
-
修改底部标签样式:不需要修改
Blog\themes\next\layout\_macro\post.swig
了,修改主题配置文件_config.yml即可;1
tag_icon: true
-
启用canvas_nest动画:注意首先需要参照https://github.com/theme-next/theme-next-canvas-nest中说明安装canvas-nest库;
-
增加分类和标签页面
-
主页文章添加阴影效果
-
增加字数和阅读时长统计:注意先参照https://github.com/theme-next/hexo-symbols-count-time中说明安装symbols-count-time库,然后修改站点的_config.yml(注意不是主题的),增加:
1
2
3
4
5
6symbols_count_time:
symbols: true
time: true
total_symbols: true
total_time: true
exclude_codeblock: false -
增加访客数和访问量统计:next主题已经支持busuanzi,直接开启即可;
-
增加评论功能
-
增加分享功能:next已经不支持jiathis,本博客选择了needmoreshare2,直接开启即可;
-
增加站内搜索功能
-
在文章末尾添加“文章结束”标记:图标换了一下
-
侧边栏社交小图标设置
-
底部隐藏由Hexo强力驱动、主题–NexT.Mist
-
底部用户图标换成桃心
-
设置头像:没有设置动画效果
-
添加版权信息:next已经支持,在creative_commons这个部分,选择合适的license即可。
-
添加网页顶部进度加载条
另外还增加了:
-
开启阅读进度:参照https://github.com/theme-next/theme-next-reading-progress安装theme-next-reading-progress;修改主题的_config.yml,将reading_progress的enable置为true;
1
2
3
4reading_progress:
enable: true
color: "#37c6c0"
height: 2px其效果是在文章顶部增加一个进度条显示阅读进度。
-
开启书签:参照https://github.com/theme-next/theme-next-bookmark安装theme-next-bookmark;修改主题的_config.yml,将bookmark的enable置为true;
1
2
3
4
5bookmark:
enable: true
# If auto, save the reading position when closing the page or clicking the bookmark-icon.
# If manual, only save it by clicking the bookmark-icon.
save: auto
在使用hext主题时遇到一个问题:
-
post中标题级别必须连续,否则post的toc出现奇怪的错乱问题:
例如post中第一层用h1,第二层用h3,toc就会这样:
改为第一层用h1,第二层用h2,保持连续,toc就正常了:
markdown编辑工具
最后建议找一款合适的markdown编辑工具,我是使用的Typora,至此建立博客的各项准备完全就绪了,接下来就可以愉快的书写了,Typora和hexo配合使用会遇到如下问题:
-
图片在typora中显示问题
前面介绍过在hexo插入图片推荐使用hexo-asset-image插件的方法,这时图片是放在post同名的目录中,而hexo的markdown中引用图片并没有加上目录名,这样在typora中就显示不了图片。解决方法参考[8],经过我的验证,可行方法如下,其中xxxxxx为post名:
-
在Front-matter中加入typora-copy-images-to或者在typora全局偏好设置中设置,其中xxxxxx为post名
1
typora-copy-images-to: xxxxxx
或者如下图在typora设置:
-
在Front-matter中加入typora-root-url,否则markdown中会带有目录名xxxxxx,这时在typora中可以显示图片,但是hexo中不能
1
typora-root-url: xxxxxx
-
进行上述修改后,在typora中复制粘贴或插入本地图片后,typora会自动放到xxxxxx目录下,并生成markdown如下:
1
![name](/name.png)
这里还是有一点问题,就是路径前面有一个/,在typora中显示是正常的,但是在hexo中无法显示图片,需要删除/。
-
-
hexo转换后的显示效果并非和typora一样,目前碰到的一个问题是对Reference-style links转换后,引用的链接列表并没有显示,而在typora中是显示的。所以后来只有换成了Footnotes。typora中对引用的链接列表显示效果如下;
支持emoji表情
hexo默认的markdown渲染器是不支持emoji的,可以使用emoji相关插件或者更换markdown转换器,我是选择的更换markdown转换器,具体可参考[9]。除了emoji,我还用到了它的Footnote功能,所以我还安装了 footnote插件,如需其他插件,同样需要先安装:
1 | npm un hexo-renderer-marked --save |
另外其配置文件,我将permalink置为false了:
1 | markdown: |