Hexo+Github+next+mathJax

发表于

想要畅通无阻的美滋滋的上传博客，包括文字内容和公式，完完整整总共十大步流程，亲自折腾过的总结：

  1. 搭建Node.js
  2. 搭建Git 环境
  3. GitHub 注册和配置
  4. 安装配置 Hexo
  5. 关联 Hexo 与 GitHub Pages
  6. 发表文章
  7. 更换主题theme
  8. 多PC同步管理博客（可略过）
  9. 如何向Github提交代码
  10. 添加mathJax
  11. 上传图片

1. 搭建Node.js

  • 在 Node.js 官网：https://nodejs.org/en/ 下载安装包 ,一路next即可.
  • 然后打开命令提示符，输入
    1
    node -v、npm -v，

出现版本号则说明 Node.js 环境配置成功！！！

2. 搭建Git 环境

因为需要把本地的网页和文章等提交到 GitHub 上。 Git 是一款免费、开源的分布式版本控制系统，用于敏捷高效地处理任何或小或大的项目。

  • 在 Git 官网：https://git-scm.com/ 下载安装包 ，安装。

  • 桌面右键，打开 Git Bush Here，输入 

    1
    git --version

    出现版本号则说明 Git 环境配置成功，第二步完成！！！

3.GitHub 注册和配置

  • 创建仓库：Repository name 使用自己的用户名，仓库名规则：
    注意：yourname 必须是你的用户名： yourname/yourname.github.io
  • 访问 yourname.github.io，如果可以正常访问，那么 Github 的配置已经结束了。

4.安装配置 Hexo

  • 我是在D盘新建了一个hexo文件夹，在这个路径D\hexo下cmd,安装一下内容的

  • 使用 npm 安装 Hexo：在命令行中输入

    1
    npm install hexo-cli -g

    等待安装，有warn无所谓的啦

  • 继续输入 

    1
    hexo version

    出现版本信息，则安装OK

  • 安装 Hexo 完成后，请执行下列命令来初始化 Hexo，用户名改成你的，Hexo 将会在指定文件夹中新建所需要的文件。

    1
    2
    3
    hexo init onionwyc.github.io
    cd onionwyc.github.io
    npm install

  • 运行本地 Hexo 服务

    1
    2
    3
    hexo server
    或者
    hexo s

无法打开 localhost4000
不怕，执行：

1
2
npm install hexo -server --save
hexo s -p 3600

5.关联 Hexo 与 GitHub Pages

我们利用 SSH keys让本地git项目与远程的github联系起来！
右键选择 Git Bash Here, 中操作:

生成SSH keys
输入你自己的邮箱地址

1
ssh-keygen -t rsa -C "onionwuyc@gmail.com"

在回车中会提示你输入一个密码，这个密码会在你提交项目时使用，如果为空 的话提交项目时则不用输入，我们按回车不设置密码。

添加 SSH Key 到 GitHub
打开 C:\Users\.ssh\id_rsa.pub，此文件里面内容为刚才生成的密钥，准确的复制这个文件的内容，粘贴到 https://github.com/settings/ssh 的 new SSH key 中

测试
可以输入下面的命令，看看设置是否成功，git@github.com的部分不要修改：

1
ssh -T git@github.com

如果提示：

1
Hi defnngj You've successfully authenticated, but GitHub does not provide shell access.

说明你连接成功了

如果是下面的反馈：

1
2
3
The authenticity of host ‘github.com (207.97.227.239)’ can’t be established.
RSA key fingerprint is 16:27:ac:a5:76:28:2d:36:63:1b:56:4d:eb:df:a6:48.
Are you sure you want to continue connecting (yes/no)?

不要紧张，输入yes就好，然后会看到：

1
Hi aierui! You've successfully authenticated, but GitHub does not provide shell access.

配置Git个人信息

现在你已经可以通过 SSH 链接到 GitHub 了，还有一些个人信息需要完善的。
Git 会根据用户的名字和邮箱来记录提交。GitHub 也是用这些信息来做权限的处理，输入下面的代码进行个人信息的设置，把名称和邮箱替换成你自己的。

1
2
git config --global user.name "onionwyc"
git config --global user.email "onionwuyc@gmail.com"

配置 Deployment

在_config.yml文件中，找到Deployment，然后按照如下修改，用户名改成你的：
需要注意的是：冒号后面记得空一格！

1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: git@github.com:onionwyc/onionwyc.github.io.git
  branch: master

6.发表文章

  • 进入你的博客目录，右键选择 Git Bash Here 进入命令窗口，输入下面代码:
    1
    hexo new "新建文章名称"    #新建文章

或者

1
进入你的博客目录，在 /source/_posts 文件夹下直接建立一个.md文件。

此时，在方法1所述的文件夹里便有了 新建文章名称.md 文件。

  • 发布新建文章
    在该博客项目文件夹下运行 Git Bash Here 命令窗口，依次输入如下代码：
    1
    2
    3
    4
    5
    6
    hexo generate    #生成更改
    hexo deploy    #将生成的更改部署到码云或者GitHub上
    或者
    先hexo g再执行hexo d布署
    或者
    也可使直接用hexo d -g

错误处理：
在执行 hexo deploy 后,出现 error deployer not found:git 的错误处理
输入代码：

1
npm install hexo-deployer-git --save

再次传送：

1
hexo d -g

可以直接进入onionwyc.github.io或者去自己的github中查看，发表成功！开心~
==注意==

  • 部署到GitHub时，可能因为网速、被墙等原因，需要多次运行 hexo deploy ；有时候可以运行 hexo clean 后在运行上述代码。
  • .md文件不要用记事本打开，建议使用具有markdown语法的程序打开，比如：s ubline text、notepad++等。也可以使用在线markdown编辑器。
  • 文章已经发表，又重新更改了，先执行 hexo clean,再 hexo d -g即可

7.更换主题theme

  • 官网下载新的人见人爱的next主题，官方主题库：https://hexo.io/themes/
  • Hexo主题推荐使用 Next 为主题，请阅读 Next 的官方文档（ http://theme-next.iissnan.com/ ），5 分钟快速安装。
  • 将下载的压缩包解压至D:\hexo\onionwyc.github.io\themes下，并重名命为next
  • 将 D:\hexo\onionwyc.github.io 下的站点配置文件_config中的theme项修改为
    1
    theme :next

输入

1
hexo s --debug

进行本地测试

1
hexo s -p 3600

然后就可以在http://localhost:3600/.中看到新主题
添加插件
添加 sitemap 和 feed 插件

切换到你本地的 hexo 目录 ，在命令行窗口，输入以下命令

1
2
npm install hexo-generator-feed -save
npm install hexo-generator-sitemap -save

修改hexo/onionwyc.github.io/ _config.yml，增加以下内容

1
2
3
4
5
6
7
8
9
10
11
12
# Extensions
Plugins:
- hexo-generator-feed
- hexo-generator-sitemap
#Feed Atom
feed:
  type: atom
  path: atom.xml
  limit: 20
#sitemap
sitemap:
  path: sitemap.xml

再执行以下命令，部署服务端

1
hexo d -g

配完之后，就可以访问 https://onionwyc.github.io/atom.xml 和 https://onionwyc.github.io/sitemap.xml ，发现这两个文件已经成功生成了。
访问https://onionwyc.github.io 可以看到主题已经更改。
每次更改主题配置中的内容后，执行下列命令即可：

1
2
hexo clean  #清除缓存
hexo d -g   #部署到服务端

8.多PC同步管理博客

很多人可能家里一台笔记本，公司一个台式机，想两个同时管理博客，同时达到备份的博客主题、文章、配置的目的。下面就介绍一下用github来备份博客并同步博客。

  • A电脑备份博客内容到github
    配置.gitignore文件。进入博客目录文件夹下，找到此文件，用sublime text 打开，在最后增加两行内容/.deploy_git和/public

    初始化仓库。
    在博客根目录下，在git bash下依次执行git init和git remote add origin 为远程仓库地址。

    同步到远程仓库。
    gitbash下依次执行以下命令

    1
    2
    3
    git add . #添加目录下所有文件
    git commit -m "更新说明" #提交并添加更新说明
    git push -u origin master #推送更新到远程仓库

  • B电脑拉下远程仓库文件
    在B电脑上同样先安装好node、git、ssh、hexo，然后建好hexo文件夹，安装好插件，（然后选做：将备份到远程仓库的文件及文件夹删除），然后执行以下命令：

1
2
3
4
git init
git remote add origin <server>
git fetch --all
git reset --hard origin/master

发布博客后同步
在B电脑发布完博客之后，记得将博客备份同步到远程仓库
执行以下命令：

1
2
3
4
git add .
#可以用git master 查看更改内容
git commit -m "更新信息"
git push -u origin master  #以后每次提交可以直接git push

平时同步管理
每次想写博客时，先执行：git pull进行同步更新。发布完文章后同样按照上面的 发布博客后同步 同步到远程仓库。

  • 中文乱码
    在 md 文件中写中文内容，发布出来后为乱码，原因是 md 的编码不对，将 md 文件另存为UTF-8编码的文件即可解决问题。

主要参考并感谢 此作者

9. 如何向Github提交代码

  • 在Github新建一个仓库：点击右上角的New repository新建仓库，输入仓库名称，然后创建仓库就可以了。

  • 仓库创建好了之后，按右侧按钮复制SSH地址

  • 一切准备就绪，接下来就是Git的事了，首先进入想要上传到GitHub的项目的文件夹下，创建好本地仓库，将想要上传的文件先添加到本地仓库中。
    1
    git init
1
git add
1
git commit -m "first commit"

  • 接下来将本地仓库与远程仓库取得关联,使用git remote add origin + 此次的SSH。例如：

    1
    git remote add origin git@github.com:onionwyc/confusion_matrix.git

  • 最后在通过以下命令将代码push到GitHub。

    1
    git push -u origin master

  • 接下来刷新GitHub就可以看到刚刚提交上去的代码了。

10.添加mathJax

注意！！开始不知道为什么，传送的公式全都无法显示，后经本菜菜多方查证，原来hexo不支持公式。。。

原生hexo并不支持数学公式，需要安装插件 mathJax。
【1】 安装与配置mathJax

1
$ npm install hexo-math --save

在站点配置文件 _config.yml 中添加：

1
2
3
4
5
6
math:
  engine: 'mathjax' # or 'katex'
  mathjax:
    # src: custom_mathjax_source
    config:
      # MathJax config

在 next 主题配置文件中 themes/next/_config.yml 中将 mathJax 设为 true:

1
2
3
4
5
# MathJax Support
mathjax:
  enable: true
  per_page: false
  cdn: //cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML

【2】关于公式和矩阵的语法:

  • （1）矩阵
    1
    2
    3
    4
    5
    6
    $$
      \begin{bmatrix}
       cos(\theta) & -sin(\theta)  \\\\      #注意，hexo写矩阵时只用两个斜杠，会出错，虽然mardown中是正确的。
       sin(\theta) & cos(\theta)
      \end{bmatrix} \tag{2}
    $$

显示为：
$$
\begin{bmatrix}
cos(\theta) & -sin(\theta) \\
sin(\theta) & cos(\theta)
\end{bmatrix} \tag{2}
$$

  • （2）独占一行的公式
    1
    2
    $$ A=a \bullet i+b \bullet j=[i,j] \bullet [a;b]=基\bullet坐标 \tag{3}$$
    #去掉\tag{ }，则不显示标签

显示为：
$$ A=a \bullet i+b \bullet j=[i,j] \bullet [a;b]=基\bullet坐标 \tag{3}$$
注意，如何偷懒将乘号 $ \bullet$ (代码为 \bullet )写为 * ，整个公式将惨遭毁灭，我就是在这里卡住了很久，所以，规范符号用法，用什么查什么。

  • （3） 行间的公式
    1
    我们都知道 $9 = 3 \times 3$

显示为：
我们都知道 $9 = 3 \times 3$

更多语法，我是参考的流程图语法参考

11. 上传图片

(1) 把主页配置文件_config.yml 里的post_asset_folder:这个选项设置为true

(2) 在你的hexo目录下执行这样一句话npm install https://github.com/CodeFalling/hexo-asset-image –save，这是下载安装一个可以上传本地图片的插件，来自dalao：dalao的git

(3) 等待一小段时间后，再运行hexo n “xxxx”来生成md博文时，/source/_posts文件夹内除了xxxx.md文件还有一个同名的文件夹

(4) 最后在xxxx.md中想引入图片时，先把图片复制到xxxx这个文件夹中，然后只需要在xxxx.md中按照格式引入图片(图片名最好不要用中文)：

{% asset_img LINEAR.jpg this is an example image %}

OK!!!!!!!

(5) 最后检查一下，hexo g生成页面后，进入public\2018\07\26\index.html文件中查看相关字段，
可以发现，html标签内的语句是 <img src="\2018\07\26/xxxx/图片名.jpg"> ，
而不是<img src="xxxx/图片名.jpg> 。这很重要，关乎你的网页是否可以真正加载你想插入的图片。