用github+hexo+mathjax 部署个人博客

Contents

1. 搭建环境准备

2. 安装和配置Hexo

3. 建立hexo 与github page 的联系

本文主要解决如下问题：

搭建环境准备（包括node.js和git 环境，github账户的配置）
安装和配置Hexo
建立Hexo 与 github page 的联系
把本地网站部署到github
安装配置主题

搭建环境准备

安装git

可以到以下官方网站下载最新版本，下载git
注意把Git Bash here和Git Gui Here以及 Add to PATH 勾选上。可以通过以下
命令看看是否安装正确

git –version
如果能正确显示版本号，则表示安装成功。

配置Curl脚本：在Windows下还需要建立一个Curl脚本用于Vundle的远程链接（vim 插件
管理需要用到），在Git的路径下新建一个空文本文件，改名为curl.cmd,编辑内容为：

   @rem Do not use "echo off" to not affect any child calls.
 @setlocal
@rem Get the abolute path to the parent directory, which is assumed to be the 
@rem Git installation root.
@for /F "delims=" %%I in ("%~dp0..") do @set git_install_root=%%~fI
@set PATH=%git_install_root%\bin;%git_install_root%\mingw64\bin;%PATH%
@if not exist "%HOME%" @set HOME=%HOMEDRIVE%%HOMEPATH%    
@if not exist "%HOME%" @set HOME=%USERPROFILE%
@curl.exe %*

Node.js 的安装和装备

下载Node.js 安装文件，推荐使用淘宝NPM 镜像
可以使用定制的cnpm 代替默认的npm
1
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
之后要安装模式就可以用下面的命令
1
$ cnpm install [name]
可以通过以下命令查看是否安装成功
1
2
node -v
npm -v

github 账号的注册和配置

打开github主页, 分别输入自己的用户名和邮箱和密码，然后
去自己刚才填写的邮箱，点开Github发给您的注册确认信，确认注册。

创建代码库
登录之后，选择New repository 新建代码库，进入代码库创建页面，
在Repository name下填写yourname.github.io，Description (optional)下填写一些简单
的描述（不写也没有关系），其它可以不动。

注意：比如我的github 名称是weylmann，这里你的代码库就必须是 weylmann.github.io
代码库yourname.github.io就能支持页面功能，点开yourname.github.io代码库，找到
setting 随便选择一个主题即可。

安装和配置Hexo

在合适的位置创建一个Hexo 文件夹，进入该目录，例如我是在D:\hexo 下完成
在Git bash 运行（最好全部命令都在Git bash下操作）
1
2
3
cnpm install hexo-cli -g
cnpm install hexo --save
hexo -v
能查看到版本号就说明安装成功了。
hexo 的初始化
1
hexo init
下面命令如果不能执行，就就上述命令再执行一次，下面命令是安装需要的组件。
1
cnpm install
本地体验Hexo
继续在git bash中输入
1
2
hexo g
hexo s
如果能出现提示：
1
INFO Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.
那么在浏览器中输入：http://localhost:4000/ 能能看到Hexo 的简单的Hello World 页面

建立hexo 与github page 的联系

配置Git 个人信息，Git的user name 和email:

1 2	git config --global user.name "weylmann" git confgi --global user.email "weylmann@163.com"

生成密钥并联系
1
ssh-keygen -t rsa -C "weylmann@163.com"
连续三次回车即可，然后把产生的SSH 密钥添加到github即可，可以参考github设置添加SSH
测试该SSH key 是否可用，依然在git bash 中输入代码
1
ssh -T git@github.com
如果显示用户名正确，表示已经建立联系。

配置Deplyment
在D:/hexo目录下，找到配置文件_config.yml, 然后做如下修改

deploy:
  type: git
  repo: git@github.com:weylmann/weylmann.github.io.git
  branch: master

怎样把本地的网站部署到github

如何新建博客
1
hexo new post "article title"
这时在目录D:\hexo\source_posts下，将会看到article title .md 之后就编辑这个
md文件即可，文章编辑好后，
运行如下命令进行生成和部署（基本上，每次更新和布置也就是这三个命令）
1
2
3
hexo clean
hexo g
hexo d
运行上面命令前需要安装一个扩展
1
cnpm install hexo-deployer-git --save
上述步骤完成后，一个个人博客系统就部署完了。

如何让Hexo 支持数学公式

为这个尝试了很多种方法，有些在本地可以很好显示数学公式，但部署到github后又显示不
了，以下的方法是本人亲自验证过可行的办法。

安装插件
1
cnpm install hexo-math --save
其实安装完插件后就可以显示数学公式了，但官方的js在国内访问慢，所以我们一般引
入的是国内的公共资源cdn提供的js

修改D:\hexo\下的 _config.yml在最后

math:
    engine: 'mathjax'
    mathjax:
        src: "//cdn.bootcss.com/mathjax/2.7.0/MathJax.js?config=TeX-AMS-MML_HTMLorMML"
        config:
            tex2jax:
                inlineMath: [ ['$','$'], ["\\(","\\)"] ]

但这个js 还是会调用cdn.mathjax.org里的一些配置js文件，最好在主题目录下
\themes\landscape\layout\_partial\ 的head.ejs 文件<meta charset="utf-8">
后面加上
1
2
<link rel="dns-prefetch" href="//cdn.bootcss.com" />
<link rel="dns-prefetch" href="//cdn.mathjax.org" />
这两行，至此，显示数学公式就没有问题了，但还是要大约等上1分钟左右才会把公式渲
染好。这点还是不好爽。但安装jacman 主题后，不用做任何配置就可以很快渲染子数学
公式，而且都不用加上上面的两行。
Hexo下mathjax 的转义问题

Markdown 本身的特殊符号与Latex 中的符号会出现冲突的情况
- _的转义，在Markdown 中_是斜体，但在latex 中，却有下标的意思；
- \\的转义，在Markdown 中\\会被转义为\，这样也会影响mathjax对公式中的
  \\进行渲染。
解决办法：只需要有冲突的公式放在{% math %} 和{% endmath %}之间即可。

安装jacman 主题

直接到jacman 在github的网站参照说明安装即可

参考博客或文章

hexo-math READE
手把手教你用Hexo+Github 搭建属于自己的博客
 前端整合MathjaxJS的配置笔记
 在 Hexo 中完美使用 Mathjax 输出数学公式
 Hexo下mathjax的转义问题