文章目录

1. 框架选择
2. 关于系统环境
3. 安装Hexo
4. 基本配置
5. 第一篇博文
6. 预览与发布
7. 更改与重发布
8. 疑难杂症

作为一个工科生而不是程序员，对于这些操作还真是不太熟悉……折腾了半天，这个博客算是建起来了。

框架选择

以前看过一些博客，新浪和博客园的风格太丑了，而那些大牛们自己建站的技术一时半会学不来，看了一圈最后决定采用Hexo的框架，把博客托管在github上。

于是我找来了一些教程：Hexo的官方文档，还有dimsky的小白向教程 5分钟搭建免费个人博客。

关于系统环境

看了看教程，果然……coder们一般是不用Windows系统工作的，毕竟终端太难用了，以前我用python的时候也是深有体会，很多东西即使凑活着能用，也会在你意想不到的地方出现bug。之前我安装过Ubuntu的虚拟机，不过由于自己不常用，常年放在电脑里吃灰，直到硬盘空间不足，手一滑就把虚拟硬盘删掉了〒▽〒（在我理解起来是这样）。

不过，既然想起来建博客，我自然也做了准备。之前看到Windows周年更新加入了一项有趣的功能：在Windows下安装一个Ubuntu子系统。这种结合比虚拟机更加紧密高效：Ubuntu相当于一个应用程序，占用系统资源很少；而Windows下的所有存储资源都可以被Ubuntu简单引用（/mnt路径下的e,f,g,h就对应着各个磁盘分区）。这样既可以享受优秀的终端应用，又可以在熟悉的Windows环境中进行其他操作。于是就按照这份教程试了试。在片刻的等待（+数次重启+两小时的颜色调整+数小时配置各种应用+玩一会CLI中的贪吃蛇）之后，得到了这个Ubuntu环境。

Ubuntu子系统的界面

不过其实还没那么简单，比如说图中的中文就需要另外的配置。这个子系统和正常的Ubuntu环境还是有一些差别的，我在另一篇博文有详细介绍。

关于Ubuntu的终端操作，我也不太熟悉……毕竟是Windows娇生惯养的孩子。这里有一份很好的入门教程。反正最基本的就是命令名 -选项参数这样，至少要了解cd,apt-get,sudo 的用法，git也最好了解一下。

安装Hexo

总之，一番操作过后，Ubuntu环境算是搭建起来了。之后就是根据教程的内容安装所需的软件。GitHub的账号我已经有了（为了托管复习笔记），git也是Ubuntu系统的预装应用，那么接下来要安装Node.js。其实我完全不了解这个大名鼎鼎的体系，在这里就把它当成是Hexo的依赖程序吧。在我的Ubuntu环境下，使用下面的命令：

1 2	curl -sL https://deb.nodesource.com/setup_8.x \| sudo -E bash - sudo apt-get install -y nodejs

Node.js应该包含了npm包管理器，可以用npm命令试试。没有问题的话，不用去管什么nvm了，可以直接安装Hexo，使用下面的命令：

1	sudo npm install hexo-cli -g

中间出了几个WARN，不过在使用中没发现什么影响。可以用man hexo查看Hexo的文档。

基本配置

先到GitHub创建一个仓库username.github.io （把username替换成自己的用户名）。之后回到Ubuntu bash，cd到自己想要的路径，使用：

1	hexo init username.github.io

然后泡一杯茶……文件夹初始化成功！现在来为你的博客捏个脸吧，Hexo的主题目录在这里，我比较喜欢其中的Jacman主题，这是它的Demo。

关于主题的下载、配置，Demo上有详细的指导。配置文件采用简明的YAML语法，看看阮一峰的介绍很快能懂。注意博客配置的./_config.yml和主题配置的./theme/jacman/_config.yml不是一个文件。一定要注意配置前者的repo项；后者的默认内容跟Demo的介绍有区别，建议在默认的基础上，参照Demo进行修改，比较稳妥。

第一篇博文

其实，，，就是这篇。在博客根目录下，新建一篇博文：

1	hexo new [layout] File_name

其中[layout]先不用管，直接忽视，File_name自然还是替换成想要的名字。然后让我们回到熟悉的Windows的怀抱，用你喜欢的编辑器打开./source/_post/File_name.md（我用的typora），映入眼帘的是这么几行字

File_name.md的默认内容

这些--------------之上的部分被称为Front_matter，是用于控制文档属性的扩展内容，不会显示在博文里。具体用法还是参见Hexo的官方文档。之后是博文的主体部分，使用大家喜闻乐见的Markdown语法（如果不知道的话，随意搜索一下就能得到海量的介绍与教程，例如这篇），如果你使用typora之类的即时预览的编辑器，写作过程会愉快很多。

不过……Markdown也有个问题，就是方言比较多。我经过仔(胡)细(乱)研(尝)究(试)，大概总结了一下Hexo的渲染规则：

空格敏感性混乱，这个比较麻烦。目前发现，bala*point*bala会显示成balapointbala，而bala *point* bala就会变成bala point bala。另一方面，#AAA却不能正常显示成标题，必须要用# AAA 。（后来发觉这些问题与 hexo 默认的 markdown 渲染器有关，见后文）
标题层级。因为已经在Front_matter确定了标题，各种标题就顺延的降级了。# AAA会变成节标题，## BBB就是小节标题。
把图片单独存储是良好的习惯。如果你把图片存在./source/images，你会发现在typora中，要把路径写成../images/File_name才能正常预览，但对于Hexo来说，根目录是./source，所以还是写成/images/File_name吧。

预览与发布

写作完成之后，使用：

hexo s

就能在本地建立起一个服务器（默认是http://localhost:4000/），然后……不要幻想终端中的浏览器了，乖乖回到Windows，用浏览器打开这个网址，就可以看到效果了。

为了发布，我们还要安装一个应用hexo-deployer-git，使用：

1	npm install hexo-deployer-git --save

如果你之前的配置没问题，那么这时候就可以成功发布了（不放心的话，也可以将博文提前备份）。使用：

1
2
3

hexo clean
hexo g
hexo d

激动人心的时刻到了，请放下手中的茶，在浏览器打开http://username.github.io，欣赏自己的成果吧！

更改与重发布

我一点也不想写这一节的，因为上一节的结尾明摆着就是“从此王子与公主过上了幸福的日子”。

没办法，第一次结婚，吵架是难免的……可日子还得过。我之前太着急了，写完没有检查（真是个坏习惯），发布了之后才发现章节乱套了。可以参照我之前提到的Markdown注意事项修改，之后还是用这一套指令发布：

1
2
3

hexo clean
hexo g
hexo d

不过似乎这个网页并不会立刻更新，可能要等待几分钟。

疑难杂症

https安全性

问题：12月17日发现，在Chrome浏览器上打开博客，会在地址栏显示小盾牌，提示“该网页试图加载不安全的脚本”，这看起来非常恼人。
原因：google一番之后发现是主题较老，里面的一些链接写死成了"http://xxxx"，导致网页只能通过http地址加载脚本。
解决：打开./themes/jacman/layout/_partial，把所有.ejs文件中出现的所有http:删掉。（建议保存副本，可以用“替换”实现，注意查找关键字不是http，那样会把https:也毁掉）

MD 控制字符与公式冲突

问题：3月31日发现，公式中的_等字符也会被当成 MD 中的控制字符，因而 $x_i,y_i$ 等等就无法正常显示，必须加\转义，既麻烦，又违背了latex的语法。
原因：hexo 默认的 markdown 渲染器设置有问题。
解决：参考了一些教程，看到大佬们推荐使用另一个渲染器 hexo-renderer-pandoc，步骤如下：
1. 删除或者禁用原有的 hexo-renderer-marked。如果删除，使用：
  1
  npm uninstall hexo-renderer-marked --save
  但是更推荐禁用，这样可以避免其他重要包被一起删除。方法是编辑根目录下的 package.json，删除关于hexo-renderer-marked的内容。
2. 安装 pandoc ，很简单 apt-get install
3. 安装新的渲染器：
  1
  npm install hexo-renderer-pandoc --save
要注意的是，这个渲染器对于 markdown 语法的要求更严格奇怪。一是语法空行有时候会影响输出效果；二是列表等环境中，不同层级间的缩进必须达到四个空格。

还有一个问题是这个渲染器会把图片标题重复两遍，~~比较影响美观，勉强……可以接受。目前的解决方法是把图片写成[title]的形式。~~ 已经解决，见后文

开启评论功能！

问题：真是寂寞啊 (☄⊙ω⊙)☄
原因：闲的
解决：目前还健在的可免费使用的评论系统，最火的就是 Disqus。虽然在墙内不是很稳，但是功能无疑是最好的。我使用的 Jacman 主题已经内置了对它的支持。只要在 Disqus 官网上注册一下，把注册时填写的“网址名”复制到 themes/jacman/_config.yml 中的 disqus_shortname: 后面就行了。然后在 Disqus 官网一路确定，重新上传博客，搞定。

图片标题重复

原因：使用了 hexo-renderer-pandoc 之后就和主题冲突，出现了这个问题。经过一番苦找，终于发现是在 themes/jacman/layout/_partial/after_footer.ejs （这个文件名怎么看都只是用来控制文末的嘛！）219行开始：

$('.article-content').each(function(i){
$(this).find('img').each(function(){
  if ($(this).parent().hasClass('fancybox')) return;
  var alt = this.alt;
  if (alt) $(this).after('<span class="caption">' + alt + '</span>');    //删除此行
  $(this).wrap('<a href="' + this.src + '" title="' + alt + '" class="fancybox"></a>');
});
$(this).find('.fancybox').each(function(){
  $(this).attr('rel', 'article' + i);
});

如果图片只有 alt 属性，就在后面加一行 '<span class="caption">' + alt + '</span>'，并且转换成fancybox。

解决：虽不知道具体是什么情况，但是只要删掉这一行就好了。

埃雅仁迪尔之星

Luke的个人博客

Hello, World! 博客的诞生