Build Your Own (Hexo) Blog

发表于 2021-05-23 分类于瞎搞本文字数： 2.1k 阅读时长 ≈ 4 分钟

好记性不如烂笔头

某个慵懒的周日，花了半小时建立了一个个人博客。真棒！~~（后续美化花了好几天）~~

坑总结

Hexo init的目录名必须与GitHub repo名一致（即xx.GitHub.io）
所有命令均在站点目录下执行，包括Hexo命令以及npm install等

不太详细的步骤

Step 1: 环境配置

安装Node.js环境，安装git并配置（用户名、邮箱），配置GitHub（配置SSH密钥，新建public repoxx.GitHub.io）。如果你没配置过上述东东，那么完成了上述配置，所有工作可以说是完成了一大半。

Step 2：站点搭建

安装Hexo并初始化。没什么好说的。非要说需要注意什么，那就是把init后面的参数设置为对应的（空）GitHub repo的名字。

npm install hexo-cli -g
hexo init xx.GitHub.io
cd xx.GitHub.io
npm install

执行完毕后，在_config.yml里配置网站的基本属性，如标题，描述等。详细的配置项请参照Hexo官方网站。这个网站也可以用来学习Hexo的其他知识。不过，这个网站提供的一些教程或demo也是粗略得可以（比如，Link并不是默认以新tab打开的，需要在[external]那个placeholder那里放个true。慢慢探索吧！）。执行完这步，你可以通过运行本地服务器hexo server或hexo s来启动位于本机4000端口的站点。

Step 3 发布站点

还是照着官方doc，修改_config.yml中的Deployment节。随后，在站点目录通过hexo deploy或hexo d命令完成向GitHub的推送。访问xx.GitHub.io，全世界的人都会看到你的个人博客了！~~我家也通上信息高速路辣！~~

其他你可能想做的

更改站点外观：安装第三方Hexo主题。本站使用的是NexT
绑定自定义域名：（没钱，懒，所以没经验。想弄自行搜索吧！）
图床：可以建立另一个GitHub repo作为图床，配合PicGo等工具来实现快速上传与链接获取

显示数学公式

As a special reminder, Markdown本身可以通过Tex语法插入公式~~（通过图片来插入公式的都是异端！）~~。在VSCode中，也有很多拓展支持解析、预览公式，甚至配合Tex输出正确嵌入公式的HTML或PDF（推荐拓展：Markdown All in One）。然而，为了让Hexo完美支持Tex公式，需要使用其他基于Web的工具包。其中，最流行的是Mathjax。以NexT主题为例，首先在其_config.yml中打开Mathjax，对应的Section名为math。随后，在文档的导言区加入mathjax: true，即可为当前文档启用相关支持，其他没有公式的页面性能不会被影响。

现在，使用美元/双美元符号括住公式区域，就可以编写公式了。不过，你可能会发现这里对下划线的支持非常不友好，体现在具有嵌套下标、下标内容包含多个字符、具有多个下标等复杂情况。比如下面的公式：

\[\begin{equation}\underset{G}{min}\underset{D}{max}V(D,G)=\mathbb{E}_{x \sim p_\text{data}(x)}[log D(x)]+\mathbb{E}_{z \sim z(z)}\end{equation}\]

如果上面是一坨code（或没有任何显示），那么接下来的方法都是无效的，你可以直接跳过了。如果它可以正常显示（可以通过右键进行其他操作），那么为了让你的博客也可以轻松支持这种鬼畜的公式而不必担心错误，那么还是多花几分钟看一下下面的解决方案吧。

首先，我们需要明确问题。之所以公式环境不会被正常解析，是因为其中的下划线与Markdown默认的下划线（斜体）冲突。为了不影响Tex语法，同时保证更换站点配置后仍能同时正常显示斜体和公式，故首先建议：在Markdown中斜体用星号，不要用下划线！ 那么接下来我们做的，就是要关闭Markdown的渲染引擎对下划线-斜体的支持。

Step 1

更换一下Hexo的渲染引擎：

1 2	npm uninstall hexo-renderer-marked npm install hexo-renderer-kramed --save

Step 2

修改\node_modules\kramed\lib\rules\inline.js的两行（就是改俩正则表达式）：

/*取消对大括号及正斜杠的转义*/
//escape: /^\\([\\`*{}\[\]()#$+\-.!_>])/,
escape: /^\\([`*\[\]()#$+\-.!_>])/,
/*取消对下划线->斜体的支持*/
/*竖线分隔开的两部分，分别匹配下划线和星号包围*/
//em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,

Step 3

重启Hexo（hexo clean && generate）。搞定！你可以尝试通过上面的那坨公式来验证。