1. 介绍
在电脑上安装hexo之后,就可以把自己写的博客文章放进hexo项目中,然后再使用特定的主题(theme)来将这些md格式的文章转换为html代码,之后再由hexo上传到某个远程网站上(一般是github.io),就可以打开这个网站看到自己的网页文章了。这样的话,不用写html代码,就可以方便地使用别人的轮子来搭建自己的网页博客。
1.1 github的操作
github提供了可以进行网页显示的仓库:github.io。你在自己的账户下创建一个名为 {your_account_name}.github.io 的仓库,注意:这里的your_account_name必须与你的github账户名字完全一样,比如,我账户名字是 zhouhuahui,所以我创建的仓库是:zhouhuahui.github.io。
把html文档存放在这个仓库中,就可以通过访问 zhouhuahui.github.io 网站来访问我的网页了。
1.2 hexo安装
https://hexo.io/docs/ 有非常详尽的步骤,而且确实比较简单。
1.3 其他教程
参考:https://www.cnblogs.com/liuxianan/p/build-blog-website-by-hexo-github.html
2. hexo基本配置
我们需要配置一下hexo根目录下的 _config.yml 文件。
2.1 修改site url
1  | # URL  | 
2.2 修改作者名字
1  | # Site  | 
2.3 修改deploy
1  | deploy:  | 
3. hexo基本指令
3.1 创建一个post
1  | $ hexo new "My New Post"  | 
3.2 清空public文件夹
在自己的博客根目录下面,有两个重要的文件夹:public, source。source是放自己的文章的地方,public是将要上传到github上,并进行网页显示的内容,public文件夹自己不要动,用指令操作就可以了。
1  | $ hexo clean  | 
3.3 在public下生成静态内容
1  | $ hexo g  | 
3.4 上传到github(部署)
1  | hexo d  | 
在执行上述命令之前,要先用npm安装一个东西:
1  | npm install hexo-deployer-git --save  | 
如果觉得这个慢,可以将源定为淘宝的镜像
1  | npm install -g cnpm -registry=https://registry.npm.taobao.org  | 
可能会出现ssh之类的问题,在另一篇博客中写。
3.5 本地显示
在本地模拟网页的显示,跟访问github.io网站的效果一样。
1  | $ hexo s #在4000端口创建一个服务器  | 
在浏览器中输入:localhost:4000 进行访问
4. yilia主题配置
4.1 修改theme
theme存放在/themes/文件夹中,里面有一个landscape的文件夹,是系统默认主题的文件夹。因此我可以把别人的主题文件夹克隆过来。
https://github.com/litten/hexo-theme-yilia 我使用yilia主题
4.1.1 安装
1  | $ git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia  | 
4.1.2 主题配置
4.1.2.1 修改主题
在hexo根目录下有一个_config.yml,配置theme:theme: yilia
4.1.2.2 解决错误
我在 localhost:4000 里面点击“所有文章”之后,报错,按照它给的解决办法很快解决了,之后就可以查看所有文章了。先输入命令 npm i hexo-generator-json-content --save ,然后在hexo项目的根目录下面的 _config.yml 文件末尾加入:
1  | jsonContent:  | 
4.1.2.3 更改头像
如果想要设置自己的头像,怎么办呢?在themes/yilia/下的_config.yml文件中,修改或增加以下信息:
1  | #你的头像url  | 
4.1.3 更新
1  | $ cd themes/yilia  | 
如果对这个yilia的主题用的不好,可以看看:https://github.com/litten/BlogBackup/tree/master/themes/yilia
4.2 上传图片
如果你想要在文件中加入一些图片,怎么办呢?你需要asset folder
首先更改 _config.yml 文件,找到writing部分,设置post_asset_folder为true,然后,就发生一些变化:如果你 hexo new a,出现的是 a文件夹和 a.md,而不仅仅是a.md。假如 a文件夹 中有一个 a.jpg,如何让它显示出来呢,使用下面的hexo命令:
1  | {% asset_img a.img %} #表示从asset folder中找a.img图片  | 
4.3 无法显示数学公式
https://www.jianshu.com/p/7ab21c7f0674 这是很好的一篇教程
4.3.1 更换markdown渲染引擎
更换Hexo的markdown渲染引擎,hexo-renderer-kramed引擎是在默认的渲染引擎hexo-renderer-marked的基础上修改了一些bug,两者比较接近,也比较轻量级。
在git中执行下述命令
1  | $ npm uninstall hexo-renderer-marked --save  | 
4.3.2 更改配置
在 /themes/yilia/_config.yml 中找到下面的行,然后更改:mathjax: true
1  | 
  | 
4.4 无法显示mermaid
https://github.com/webappdevelp/hexo-filter-mermaid-diagrams
很简单,只需要下载一个插件,然后更改配置。最后
1  | $ hexo clean  | 
4.5 代码行显示错乱
https://blog.csdn.net/weixin_41287260/article/details/103051056
这是由于yilia主题让代码自动换行的结果,可以修改yilia主题下的某个文件,禁止换行。
修改themes/yilia/source/main.0cf68a.css的内容:将white-space:pre-wrap删除。
4.6 修改代码块的样式
直接修改编译好的文件。路径为:theme/yilia/source/main.0cf68a.css:
1  | (1)修改代码背景色,  | 
4.7 trouble
-  
1
 不要使用多级列表
列表后换行,才能写代码区
不要再行的开头写行内代码区,以防万一,直接在开头添加一些无关紧要的字符。我有一次在开头使用行内代码区:
1
```<meta>``` 标签...
上面的写法被hexo/yilia解析错误,导致yilia主题运行出现严重错误。
不要在代码块中使用
tab进行缩进。
		
































