利用hexo+github搭建个人博客

发表于 | 分类于 |

讲道理，现在搭建个人博客不是一件很难的事情，网上教程一堆。不过实践起来还是发现有许多雷坑要踩。

这里我利用hexo搭配github搭建自己的个人博客，再使用Yelee作为博客的主题。

安装Node.JS

Node.JS

安装hexo

1
2
npm install hexo-cli -g
npm install hexo --save

配置hexo

建立博客目录，并在目录内执行：

1
hexo init

安装相应插件：

1
2
3
4
# git部署
npm install hexo-deployer-git --save
# markdown渲染
npm install hexo-renderer-marked --save

配置github

在博客根目录下找到_config.yml文件，打开并在文件最后找到deploy并修改（若没有则自行添加）：

1
2
3
4
5
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: https://github.com/lc1995/lc1995.github.io.git  # Here is your github page

使用hexo

1
2
3
4
5
6
7
8
9
10
# 新建文章
hexo new article_name
# 清空，重新生成，并且发布
hexo clean && hexo generate
hexo deploy
# 启用本地服务器
# 默认端口：4000
hexo server

详细的使用方法参考官方文档：https://hexo.io/zh-cn/docs/

在hexo中使用数学公式

原生hexo自带的主题并没有提供对数学公式的支持。这里有两个方法来使用数学公式：

  1. 使用jacman主题

    Jacman 是为 Hexo 设计的一款清新且具有响应式的主题，拥有更丰富的特性并支持了很多的国内服务。Jacman 始于 Pacman 修改而来。

jacman

安装方法

在根目录下

1
$ git clone https://github.com/wuchong/jacman.git themes/jacman

然后修改根目录下的_config.yml文件，找到theme，修改为

1
theme: jacman

最后配置jacman对mathjax的支持，在..\themes\jacman文件夹中找到_config.yml文件，找到mathjax，修改为

1
mathjax: true

完成修改后，便能在hexo中使用latex对数学公式进行编辑。

PS：若要在新的post中使用数学公式，需要在文章的frontmatter中（即每一篇post的最上方）添加

1
mathjax: true

  1. 使用hexo-math插件

    A hexo plugin that uses MathJax/KaTeX to render math equations.

hexo-math

安装方法

1
npm install hexo-math --save

Typora下标显示问题：

这里我使用typora作为markdown编辑器。其中存在一个问题在于typora的下标转义符~和markdown默认的下标转义符\并不兼容。个人没有去修改markdown解析文件的能力=。=</sub>

最后找到一个插件hexo-filter-sub，完美解决了这个问题。

hexo-filter-sub

安装方法

1
npm install hexo-filter-sub --save

Yelee主题

Theme Yelee relies on Hexo-Theme-Yilia, thanks for the author Litten. Fix some bugs, change lots of styles, add several features. And then I made the theme. Yelee is mainly designed for fluent text reading. I change styles and add functions, meanwhile, try hard to keep this theme simple, stupid and clear. Theme DEMO: MOxFIVE’s Blog

安装方法

1
git clone https://github.com/MOxFIVE/hexo-theme-yelee.git themes/yelee

然后找到更目录下的_config.yml，找到theme，修改为：

1
theme: yelee

详细的配置方法可参考：http://moxfive.coding.me/yelee/