本地Mac搭建hexo博客完整流程

2017-07-18

这里默认电脑已经装好node.js GitBash npm相关软件

Hexo的安装

Ps(如果本地已经安装过hexo的想将其删除可以参考以下指令）

1 2	npm uninstall hexo-cli -g #3.0.0版本执行 npm uninstall hexo -g #之前版本执行

hexo的安装
1
npm install -g hexo-cli

安装完成之后你在本地创建一个空文件夹作为本地的根目录(我取得名字是HexoBlog)并进入，继续依次输入如下命令，注意顺序
1
2
3
4
mkdir HexoBlog
cd HexoBlog
hexo init
npm install
回到「HEXO」文件夹下，你会看到，多了好多东西，不要慌，继续依次输入如下命令
1
2
hexo g
hexo s
不出什么意外的话，在浏览器里输入可以看到自己本地的hexo博客了，但要一直保持本地运行
1
http://localhost:4000/
如果能打开，那么恭喜你！你的博客搭建完成了！

但你以为这样就完了？当然不是了，这个只是在你本地，也就是你的电脑上搭建好了，如果想让别人也能看到，你需要下边的东西

GitHub账号关联hexo可以在外网上访问

创建一个github账号，然后生成一个对应的 “账号名.github.io”的仓库，接下来就是将本地hexo跟远程仓库关联。现在我们需要_config.yml文件，来建立关联，命令：

vim _config.yml

翻到最下面，改成我这样子的

deploy:

type: git

repo: https://github.com/CFOnHeart/CFOnHeart.github.io

branch: master

然后输入命令：

npm install hexo-deployer-git –save

上面这是通过https协议访问git，所以命令输完后在第一次可能需要你输入你git的账户密码，当然也可以通过ssh访问，前提是你本地的密钥在github上存储过。
执行配置命令

hexo d -g

等于

hexo clean

hexo generate

hexo deploy

这一步是可以解析你本地的所有文档来生成对应的html页面上传到仓库中。所以可以通过这一步看出你只要把本地的md文件和一些自己的资源文件备份好，就可以很轻易地还原了。

Hexo写博客

一些常用命令：

hexo new”postName” #新建文章

hexo new page”pageName” #新建页面

hexo generate #生成静态页面至public目录

hexo server #开启预览访问端口（默认端口4000，’ctrl + c’关闭server）

hexo deploy #将.deploy目录部署到GitHub

hexo help # 查看帮助

hexo version #查看Hexo的版本

每次写完文章都要

hexo d -g

不然远端没有你写的新文章。

Hexo主题Yilia选取配置

Yilia配置文件每一项的修改都在Yilia的github上有写到，可以根据自己的想法进行修改。

但要记住一点的是，因为我用了latex数学渲染,那么mathjax的配置部分一定要设置为false，因为yilia主题本身是默认false所以没关系，但是有些主题就默认是true要注意

我的yilia配置文件

Hexo的配置

latex数学公式渲染
经过一番google之后，发现有位高手已经写好了一个自动部署MathJax的hexo插件
http://catx.me/2014/03/09/hexo-mathjax-plugin/
安装方式也很简单，在你的博客文件夹下执行——
1
2
npm install hexo-math --save
hexo math install
但是Marked.js与MathJax共存会导致渲染冲突，显示会出现很多问题

提供一个修改marked.js源码的方式来避开这些问题
- 针对下划线的问题，我决定取消_作为斜体转义，因为marked.js中*也是斜体的意思，所以取消掉_的转义并不影响我们使用markdown，只要我们习惯用*作为斜体字标记就行了。
- 针对marked.js与Mathjax对于个别字符二次转义的问题，我们只要不让marked.js去转义\\,\{,\}在MathJax中有特殊用途的字符就行了。
具体修改方式，用编辑器打开marked.js（在./node_modules/marked/lib/中）

Step 1:
1
escape: /^\\([\\`*{}\[\]()# +\-.!_>])/,
替换成
1
escape: /^\\([`*\[\]()# +\-.!_>])/,
这一步是在原基础上取消了对\\,\{,\}的转义(escape)

Step 2:
1
em: /^\b_((?:[^_]|__)+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
替换成
1
em:/^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
这样一来MathJax就能与marked.js共存了。重启一下hexo看一下吧
md文件中需要插入资源的问题
可以通过修改根目录下的_config.yml文件中的post_asset_folder:设置为true，那么每次执行hexo new “name”的同时，不仅会生成对应文件，还会生成一个当前文件可以访问的同名目录，当前md需要用到的资源都会放在其中，但是为了在页面上显示，链接的时候直接写文件名即可，因为在hexo d -g之后生成的静态页面同目录下会做到产生同名的资源文件，所以你md内部直接链接文件名也可以找到。
另外我自己在_config.yml将标题，子标题，描述都修改为自己需要的。
因为用的是yilia主题，所以theme: yilia
根目录_config.yml配置

安装

参考资源：

最简单的搭建hexo博客教程

Yilia主题

hexo博客的Latex渲染