使用Hexo+Github搭建博客与优化扩展

本文最后更新于：2021年2月20日下午

博客搭建好也有三个月了，踩过一些坑，一步步达到了现在的博客。因为网络上关于 Hexo+Github 搭建博客的教程太多了，也没有必要重写一份新的教程，😜。我就收集一下我搭建博客过程中遇到了一些好的教程，供大家参考。遇到困难百度就能解决大部分的问题哦。

搭建教程

@拒绝芒果工作室 ：一小时快速搭建个人静态博客（👈本博客搭建的所有流程均参看自这篇博客）。

@张小花 ：hexo从零开始到搭建完整

@小茗同学 ：使用hexo+github搭建免费个人博客详细教程（👈非常详细的一篇博客，有提到原理，可以去看看）。

主题选择+优化

本站选择的是NexT主题，这也应该是最流行的一款主题，越流行的主题遇到问题越容易百度的到，你懂的😀。

NexT官方文档

@Alvabill ：hexo搭建个人博客–NexT主题优化（👈本博客优化内容参看了这篇博客）。

@**Moorez**：hexo的next主题个性化教程:打造炫酷网站（👈本博客优化内容参看了这篇博客）。

@wangwlj ：hexo搭建的Github博客之优化

@lizhen：Hexo站点、NexT主题修改全记录

添加评论

也百度到过各种网站添加评论功能，结果总是有问题，其中一个网站连注册功能都出现错误，一直无法注册。在得知 NexT 主题里支持 Valine 评论之后果断就采用了这个评论，虽然说有些局限，但对于这个简单博客来说够用了。😁

@**blue_zy**：为你的Hexo加上评论系统-Valine （👈本博客添加参看了这篇博客）。

@**桃源阡墨，Bigwin**：在Hexo博客的next主题中启用Valine评论

插入图片

Hexo添加本地图片（👈本博客插入图片功能采用了这篇博客的第一种方法）。

添加live2d看板娘

掘金文章： https://juejin.im/post/5bebfe51e51d45332a456de0#heading-27 （👈很长的一篇文章，添加方法在60%左右）。

但是移除这个东西没有什么好的办法，惨~~。

书写博客

写博客采用的是 Markdown 来进行书写，hexo会转换成为 HTML 页面。至于 Markdown 语法非常的简单，仿照一篇文章写一遍就非常的清楚了。以下链接有Markdown语法介绍，还有一个在线版的书写Markdown 的网站，时时渲染转换，非常的清晰。另外还有一款软件叫做 MarkdownPad2 ，大家也可以去下载哦，非常的好用。

在线文档：Markdown 语法

Markdown 语法大全包括设置字体颜色

在线网站：Cmd Markdown 编辑阅读器

电脑软件：MarkdownPad2

目前就这儿多了，后期继续补充！

现在我主要使用的是Typora，非常好用哦~推荐使用。

2019.07.16增加功能

增加打赏功能：hexo-next 添加酷炫打赏二维码

增加文章置顶功能：hexo-next 添加文章置顶功能和评分功能等
1
2
$ npm uninstall hexo-generator-index --save
$ npm install hexo-generator-index-pin-top --save
文章指定使用：在文章头部添加top: true。

Connection reset by 13.250.177.223 port 22

电脑重装之后重新建立博客，提交仓库时出错。

解决方法：在host文件里添加下面两行。

1 2	`192.30.255.112 github.com git 185.31.16.184 github.global.ssl.fastly.net`

git push时出现ssh_dispatch_run_fatal

要是这样也没用的话，尝试是否可以在浏览器上访问Github，或者Ping一下github.com。如果无法访问，那就搭梯子科学上网吧。

2020年2月7日，上传博客时再次出现了类似的问题，但是修改host文件也没有用了，不搭梯子的话，无法用浏览器打开github，使用梯子之后可以打开，但是本地PING github时还是连接超时，太诡异了。

这次搭上梯子都不管用了。

参考链接：git报错ssh: connect to host github.com port 22: Connection timed out

参照这篇博客，先在命令行输入了ssh -T git@github.com命令来检查，如果出现了ssh: connect to host github.com port 22: Connection timed out的话就找到当初搭建博客时存放ssh目录的地方，我的存放于C:\Users\colou\.ssh。colou是电脑的用户名。

在那里新建一个文件config，然后输入下面的内容。

Host github.com
User YourEmail@163.com
Hostname ssh.github.com
PreferredAuthentications publickey
IdentityFile ~/.ssh/id_rsa
Port 443

记得把邮箱替换成你的github的邮箱，然后重新上传博客，就会弹出相关的问题，输入yes就好了。

2020.01.28增加功能

增加折叠代码块的功能： Hexo next博客添加折叠块功能添加折叠代码块

不过因为增加之后不太明显，我就额外增加了一点颜色加以区分。

位置在：themes/next/source/css/_custom/custom.styl

.hider_title{
    cursor: pointer;
	color:#87CEEB;
	font-weight:bold;
}
.close:after{
    content: "▼";
	color:#00EE00;
}
.open:after{
    content: "▲";
	color:#FF11FF;
}

2020.02.27更换主题

新主题：Fluid

链接：https://github.com/fluid-dev/hexo-theme-fluid

参考文档：https://hexo.fluid-dev.com/docs/

更换主题后遇到的一些问题

由于我是重装了系统，所以博客重新配置了一遍。在配置完成之后，生成本地预览的时候，发现无法加载出图片，（我的图片是放在本地的，只有几张使用的图床），查看源码可以发现图片的链接异常，我这里出现了\.com\\1.png这样的图片链接，百度到了一些问题，有的说是Hexo3以上的版本使用Markdown的图片语法![]()会出现问题，解决方法是更换图片的文章链接方式，有的说是更新插件。

参考链接：hexo引用本地图片无法显示

参考上面的链接，我发现是我配置文件_config.yml中的url那一栏填写错误导致的，最后改成我的博客的地址http://colourso.github.io，然后hexo clean之后重新生成预览，就正常了。

第二次遇到这个问题——这次忘记装插件了

现在本地博客根目录执行下面语句

1	`npm install hexo-asset-image --save`

修改hexo配置文件_config.yml，找到post_asset_folder修改为true.

打开/node_modules/hexo-asset-image/index.js将整个文件用下面的代码替换：

'use strict';
var cheerio = require('cheerio');

// http://stackoverflow.com/questions/14480345/how-to-get-the-nth-occurrence-in-a-string
function getPosition(str, m, i) {
  return str.split(m, i).join(m).length;
}

var version = String(hexo.version).split('.');
hexo.extend.filter.register('after_post_render', function(data){
  var config = hexo.config;
  if(config.post_asset_folder){
    	var link = data.permalink;
	if(version.length > 0 && Number(version[0]) == 3)
	   var beginPos = getPosition(link, '/', 1) + 1;
	else
	   var beginPos = getPosition(link, '/', 3) + 1;
	// In hexo 3.1.1, the permalink of "about" page is like ".../about/index.html".
	var endPos = link.lastIndexOf('/') + 1;
    link = link.substring(beginPos, endPos);

    var toprocess = ['excerpt', 'more', 'content'];
    for(var i = 0; i < toprocess.length; i++){
      var key = toprocess[i];
 
      var $ = cheerio.load(data[key], {
        ignoreWhitespace: false,
        xmlMode: false,
        lowerCaseTags: false,
        decodeEntities: false
      });

      $('img').each(function(){
		if ($(this).attr('src')){
			// For windows style path, we replace '\' to '/'.
			var src = $(this).attr('src').replace('\\', '/');
			if(!/http[s]*.*|\/\/.*/.test(src) &&
			   !/^\s*\//.test(src)) {
			  // For "about" page, the first part of "src" can't be removed.
			  // In addition, to support multi-level local directory.
			  var linkArray = link.split('/').filter(function(elem){
				return elem != '';
			  });
			  var srcArray = src.split('/').filter(function(elem){
				return elem != '' && elem != '.';
			  });
			  if(srcArray.length > 1)
				srcArray.shift();
			  src = srcArray.join('/');
			  $(this).attr('src', config.root + link + src);
			  console.info&&console.info("update link as:-->"+config.root + link + src);
			}
		}else{
			console.info&&console.info("no src attr, skipped...");
			console.info&&console.info($(this));
		}
      });
      data[key] = $.html();
    }
  }
});

然后clean之后再次生成就好了。

2020.05.27更新主题

更新的是1.8.0版本之后的一次develop分支的内容，主要新功能是支持LeanCloud的计数功能。

主题文件中主要修改替换一下layout\_partial\footer.ejs中的内容，用于修改底部显示内容。

后期准备更新数学公式渲染。

2020.07.31引入B站视频

原因是做了贪吃蛇小游戏，录制GIF展示文件太大，加上Github对图片的加载本来就不好，很容易加载不出来。于是模仿廖雪峰大神的网站，演示视频放在B站，然后本地博客引入链接就好了。

插入代码：

<iframe src="//player.bilibili.com/player.html?aid=371573766&bvid=BV1fZ4y1T7xo&cid=218646009&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"    width="100%" style="height: 430px; max-width: 100%"> </iframe>

src里面的内容来自于B站网页视频底部的“分享”，然后“嵌入代码”，其他的细节还是按照上述的设定吧，勉强能用。

未用到但是效果很好的链接：https://oneboke.com/3045.html

2020.08.31增加数学公式渲染

主题版本没有更换。

LaTeX 数学公式
当需要使用 LaTeX 语法的数学公式时，可手动开启本功能，需要完成三步操作：

设置主题配置

post:
math:
enable: true
specific: false
engine: mathjax
specific: 建议开启。当为 true 时，只有在文章 Front-matter 里指定 math: true 才会在文章页启动公式转换，以便在页面不包含公式时提高加载速度。

engine: 公式渲染引擎，目前支持 mathjax 或 katex。

更换 Markdown 渲染器

由于 Hexo 默认的 Markdown 渲染器不支持复杂公式，所以必须更换渲染器。

先卸载原有渲染器：

npm uninstall hexo-renderer-marked –save

然后根据上方配置不同的 engine，推荐更换如下渲染器：

mathjax: npm install hexo-renderer-kramed –save

katex: npm install @upupming/hexo-renderer-markdown-it-plus –save

安装完成后执行 hexo clean

链接：https://hexo.fluid-dev.com/docs/guide/#latex-%E6%95%B0%E5%AD%A6%E5%85%AC%E5%BC%8F

引擎选用了mathjax，但是不得不说有的渲染错误……

渲染错误原因是这个引擎对换行的Latex公式支持的不好，于是我就把我博客中的Latex拆分成了一行一行的……

2021.02.20 博客主题Fluid升级

博客主题Fluid升级到了1.8.7版本，着实佩服几位更新博客的大佬，尤其是强哥，太厉害了。

虽然本次主要升级博客的原因是显式代码行号，但确实感觉这个主题越来越强大。

2021.02.20 代码折叠 details

在网上搜到了教程都是基于一个插件，然后修改主题文件等，但是他们都是基于Next主题的修改，在Fluid中不一定可以使用。

本来想给主题的作者提一个issues，结果恰好在作者的回复中看到了代码折叠的方法。

方法就是使用HTML5自带的标签details来实现代码折叠的功能。

链接：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/details

使用方法：

<details>
    <summary>Details</summary>
    Something small enough to escape casual notice.
</details>

summary标签中包含的是概要内容。
详细效果可以参看上面的链接来查看。

注意：使用TyporaMD编辑器的时候，会渲染失败，但是在实际的网页中确实可以将代码包含其中。

Other

SOP 博客

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议，转载请注明出处！

C语言内存四区模型详解(未完成) 上一篇

数据结构课课设———四维数组下一篇