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

本文主要解决如下问题:

  • 搭建环境准备(包括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,编辑内容为:1
    2
    3
    4
    5
    6
    7
    8
    9
    @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, 然后做如下修改 1
    2
    3
    4
    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在最后

1
2
3
4
5
6
7
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

这两行,至此,显示数学公式就没有问题了,但还是要大约等上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的转义问题