Customize hexo blog

关于blog很久没有更新的问题

之前update blog都是在虚拟机的ubuntu上进行的操作,又一次意外把虚拟机重置了,导致之前的信息都没了,幸好github上还有blog的页面,但都是渲染过后的资源,需要一段时间把上面的文章都迁移下来,上面多多少少有一些还不错的内容,迁移的过程设计到各种排版,想想都是泪。

充分说明了备份的重要性,现在就是定期把一些重要的文件在disk上备份一下。

周末有时间,索性一股脑把之前的内容都迁移过来,这样又可以定期更新了。迁移的过程中发现好多文章的质量还是不太高。把一个文章改的让别人和自己满意总是很难,比如弄了很长时间的文章还是有很多语法和拼写以及细节内容的错误,每次这些错误让别人反复指出来真的是不太好。

How to Customize the hexo style

本质上就是调整各种css的label,小的地方比如一些代码highlight style以及table style都可以具体调整,有一种所见即所得的感觉。

比如当前所用的template,代码style的文件在这个地方: themes/cafe/source/css/_partial.

Adding image folder and other folders into blog

For hexo, just add what you need under source direactory, it then will be uploaded into the github repo. The contents under _posts are rendered by hexo template style automatically.

根据这个文档在hexo中使用image直接放在source/images目录下面就行,之前有几次把image放在了_posts目录下面,这个_posts目录中的文件看起来是在暂时的文件,每次更新generate所有的blog之后里面的image就被删除了。

Hexo adding google analytics and goodle adds

One important lesson about this is that update the content at the right theme topic. Under the theme topic, there might multiple one, make sure the theme you updated is the one that you adopted. You might update the partial dir to apply the customized code for analytics or google adds

Hexo show equations

After configuring the equation, it is easy to write some blog that use a lot math:

$$ e^{ix}=\cos x + i\sin x $$

This is an example to write things in multiple lines

$$\begin{split}
\frac{\partial{\mathcal{E}}}{\partial{x_l}} & = \frac{\partial{\mathcal{E}}}{\partial{x_L}}\frac{\partial{x_L}}{\partial{x_l}}\\
& = \frac{\partial{\mathcal{E}}}{\partial{x_L}}\Big(1+\frac{\partial{}}{\partial{x_l}}\sum_{i=l}^{L-1}\mathcal{F}(x_i,\mathcal{W}_i)\Big)
\end{split}$$

$$\begin{split}
\frac{\partial{\mathcal{E}}}{\partial{x_l}} & = \frac{\partial{\mathcal{E}}}{\partial{x_L}}\frac{\partial{x_L}}{\partial{x_l}}\\\\
& = \frac{\partial{\mathcal{E}}}{\partial{x_L}}\Big(1+\frac{\partial{}}{\partial{x_l}}\sum_{i=l}^{L-1}\mathcal{F}(x_i,\mathcal{W}_i)\Big)
\end{split}$$

It is easy to do this thing in hexo, I use the MathJax, there are lots of blogs explain how to add it, such as this.

Hexo debug

主要是一些hexo使用过程中的一些debug记录

hexo deploy的时候ENOSPC

INFO  Start processing
FATAL Something's wrong. Maybe you can find the solution here: http://hexo.io/docs/troubleshooting.html
Error: watch /home/parallels/Documents/hexoblog/themes/cafe/ ENOSPC
at exports._errnoException (util.js:873:11)
at FSWatcher.start (fs.js:1234:19)
at Object.fs.watch (fs.js:1262:11)
at createFsWatchInstance (/home/parallels/Documents/hexoblog/node_modules/chokidar/lib/nodefs-handler.js:37:15)
at setFsWatchListener (/home/parallels/Documents/hexoblog/node_modules/chokidar/lib/nodefs-handler.js:80:15)
at FSWatcher.NodeFsHandler._watchWithNodeFs (/home/parallels/Documents/hexoblog/node_modules/chokidar/lib/nodefs-handler.js:228:14)
at FSWatcher.NodeFsHandler._handleDir (/home/parallels/Documents/hexoblog/node_modules/chokidar/lib/nodefs-handler.js:407:19)
at FSWatcher.<anonymous> (/home/parallels/Documents/hexoblog/node_modules/chokidar/lib/nodefs-handler.js:455:19)
at FSWatcher.<anonymous> (/home/parallels/Documents/hexoblog/node_modules/chokidar/lib/nodefs-handler.js:460:16)
at FSReqWrap.oncomplete (fs.js:82:15)
FATAL watch /home/parallels/Documents/hexoblog/themes/cafe/ ENOSPC
Error: watch /home/parallels/Documents/hexoblog/themes/cafe/ ENOSPC
at exports._errnoException (util.js:873:11)
at FSWatcher.start (fs.js:1234:19)
at Object.fs.watch (fs.js:1262:11)
at createFsWatchInstance (/home/parallels/Documents/hexoblog/node_modules/chokidar/lib/nodefs-handler.js:37:15)
at setFsWatchListener (/home/parallels/Documents/hexoblog/node_modules/chokidar/lib/nodefs-handler.js:80:15)
at FSWatcher.NodeFsHandler._watchWithNodeFs (/home/parallels/Documents/hexoblog/node_modules/chokidar/lib/nodefs-handler.js:228:14)
at FSWatcher.NodeFsHandler._handleDir (/home/parallels/Documents/hexoblog/node_modules/chokidar/lib/nodefs-handler.js:407:19)
at FSWatcher.<anonymous> (/home/parallels/Documents/hexoblog/node_modules/chokidar/lib/nodefs-handler.js:455:19)
at FSWatcher.<anonymous> (/home/parallels/Documents/hexoblog/node_modules/chokidar/lib/nodefs-handler.js:460:16)
at FSReqWrap.oncomplete (fs.js:82:15)

需要修改一个系统参数:

echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
hexo deploy的时候permission denied(public key)
https://www.zhihu.com/question/21402411
+
https://stackoverflow.com/questions/17846529/could-not-open-a-connection-to-your-authentication-agen

有几次 报了下面的错误

jekyll 2.5.3 | Error: Pygments can’t parse unknown language: class.

主要是因为代码块引入的问题,注意代码块和文字之间都留好空格,还有 如果用 三个单引号 表示代码块不行的话,就换成

< pre >< code > 。。。< /code >< /pre >的表示试试看。

还有一个挺郁闷的地方就是,每次从编辑器中拷过来的代码,都被弄成了一行,感觉有什么显示不出来的奇怪字符在后面,也可能是从虚拟机里面拷出来的原因,格式不对。还得放到txt中把没用的东西都过滤掉。手工重新调整一次,比较麻烦。

hexo部署blog的一些资源

定制hexo的一个教程(从源码的角度分析 比较有参考价值)
https://segmentfault.com/a/1190000006057336

hexo官方文档(吐槽下bd)

https://hexo.io/

通过在hexo中添加一些关键代码来控制文章是否在主页面上显示

https://github.com/giscafer/hexo-theme-cafe/issues/8

在_partial/archive.ejs中加简单的判断
<% if ( post.visible!==false){ %>
<%- partial('article', {post: post, index: true}) %>
<% } %>
除非文章加visible:false,不然都会默认显示

使用mac部署的时候,会遇到dtrace的依赖无法安装的问题,这个依赖mac是不支持的,相关的解决方案:

1
rm -rf node_modules/ && npm install –no-optional
还可以参考这个issue:

https://github.com/trentm/node-bunyan/issues/216

npm 命令的 no-optional的含义,可以参考:

http://unix.stackexchange.com/questions/168034/is-there-an-option-to-install-an-npm-package-without-dependencies

没有dtrace的时候,在一些主题上,使用是不影响的,但是有些主题的布局还是会采用dtrace的依赖包的,比如我使用的这个shihuangse主题(前端的问题真是解决起来很麻烦啊,Docker的优势又一次显现了)。后来使用linux部署,奇怪的问题才没有再出现,目前我也没有找到一个比较完美的方案。

octopress使用的一些资源

看到大波哥用Octopress搭建的博客还挺不错的,于是也跟风搞了一个。还有一个原因是原来在cnblog上面的旧博客对markdown编辑方式的支持简直是丑cry,默认的时候,字太小,都挤在中间的匡匡中,有的时候自己都不想看,抽时间把旧的还蛮有价值的文章一点一点搬过来。

Octopress摸索了一下,勉强可以做一些简单的操作了,再搞一搞语法高亮,加上一些定制的组件,就更好了。

把一些octpress使用时候的参考资料也记录在下面:

基本的使用命令:

http://octopress.org/docs/blogging/

vim设置编码格式:

:set fileencoding=utf-8

vim设置无bomb:

:set nobomb
http://segmentfault.com/q/1010000000256502

相关的定制可以参考看这个blog:

http://www.cnblogs.com/oec2003/archive/2013/05/31/3109577.html

这个定制教程也不错:

http://foggry.com/blog/2014/04/28/custom-your-octopress-blog/

更换主题教程

http://blog.flatironschool.com/how-to-install-a-custom-theme-on-octopress/

每次编辑好之后可以 rake preview 命令在本地看一下效果

具体部署的时候,可以参考这个:http://www.tuicool.com/articles/jYZ7jy

主要是 rake generate 、 rake preiew 、 rake deploy 几个命令的使用。

在首页显示摘要,默认的情况下,显示的是文章所有的内容,如果只想显示摘要部分,可以用这个标记:

<!中划线中划线more中划线中划线> , 后面部分就会自动被隐藏起来。

注意代码块是三个反引号 或者直接用标签 pre code 的标签

推荐文章