hexo博客搭建

目录

• 介绍
• 前期准备
  • 安装Git
  • 安装Nodejs
• 初始化Hexo
• 配置主题
• 安装插件
• 定制美化
• 图床
• 本站修改后的主题
• hexo中的latex踩坑

介绍

Hexo是一种静态网页框架，可以把md文件渲染成网页文件

优点：简单易用(对于用惯了 git 和 markdown 的盆友们来说 )，0成本，稳定，可定制，简洁美观

前期准备

• 安装Git
• 安装Nodejs

安装Git

直接下载安装，记得我的电脑-属性-高级系统设置-环境变量-系统/我的环境变量里添加Git的安装路径（就是告诉自己的电脑Git在哪，这样就任何一个文件夹位置都能使用Git了）

例如Git安装在D:Gitgit-2.22.0这个位置

则环境变量里添加：

D:Gitgit-2.22.0usrin

D:Gitgit-2.22.0usrinssh-keygen.exe

安装Nodejs

建议新手安装最新的稳定版本，同样也得在环境变量里添加，比如安装在D: odejs就添加D: odejs

初始化Hexo

在某个文件夹位置点击鼠标右键，打开git bash，输入

hexo init

git会自动拉取hexo的安装包

安装完成会出现以下这些文件

scaffolds 配置文件，先别管

themes hexo主题文件

_config.yml hexo全局配置文件

package.json 记录依赖包

如果网速差点的话，git在下载landscape的时候会看住（自己看看是不是），如果是的话直接在git bash 按Ctrl+C强行终止下载（这个主题文件可以先不要，换成别的主题文件就好了，除非你喜欢hexo默认的主题）

PS：配置好之后也会有一堆需要修改、美化，如果你觉得我的这个修改后的看着还行，可以直接clone本站修改后的主题配置

配置主题

下载主题，放到hexo目录的theme文件夹内， Hexo主题下载 ，比如我下载Sakura主题，并且把下载的文件修改成Sakura

在hexo根目录打开_config.yml，把theme: landscape修改成theme: Sakura（注意英文冒号后面有个空格，没有的话会报错）

安装插件

安装Hexo运行必备的插件，首先安装淘宝镜像（因为npm实在太慢了）

安装cnpm，命令：

npm install -g cnpm --registry=https://registry.npm.taobao.org
1

安装后，使用以下命令测试是否安装成功

cnpm -v
1

成功后，以后都使用 cnpm 代替以前 npm 来执行命令！

• 安装必要插件

cnpm i --save hexo-deployer-git 
cnpm i --save  hexo-generator-archive
cnpm i --save hexo-generator-index
cnpm i --save hexo-generator-tag
cnpm i --save hexo-renderer-ejs
cnpm i --save hexo-renderer-kramed
cnpm i --save hexo-renderer-stylus
cnpm i --save hexo-server
cnpm i --save hexo-wordcount
cnpm i --save hexo-generator-category

#下面的是非必要插件
cnpm i --save hexo-wordcount
cnpm i -S hexo-prism-plugin
cnpm i hexo-permalink-pinyin --save
cnpm i --save hexo-generator-feed
cnpm install hexo-generator-search --save

然后，输入``hexo g，等待md文件渲染成html文件再输入hexo s`

打开浏览器输入http://localhost:4000/

定制美化

根据自己的需要定制啦，记得多用git add -A和git commit -m "提交缓存区" 保存，万一搞得报错了至少能用git reflog回滚。

图床

如果网速可以建议用PicGo+github pages搭建图床（但是上传速度很慢）；也可以用七牛云、又拍云等搭建图床，但是这种我个人觉得要么收费要么不好用。

我用coding/gitee+pcigo

本站修改后的主题

国内仓库地址，直接git clone下来

在电脑上找个合适的文件夹位置(放博客的位置)

安装淘宝镜像

npm install cnpm -g --registry=http://registry.npm.taobao.org #全局安装
npm install cnpm --registry=http://registry.npm.taobao.org		#局部安装

安装上hexo必备的一些插件

cnpm i --save hexo-wordcount
cnpm i --save hexo-deployer-git 
cnpm i -S hexo-prism-plugin
cnpm i hexo-permalink-pinyin --save
cnpm i --save hexo-generator-feed
cnpm install hexo-generator-search --save

cnpm i --save  hexo-generator-archive
cnpm i --save hexo-generator-index
cnpm i --save hexo-generator-tag
cnpm i --save hexo-renderer-ejs
cnpm i --save hexo-renderer-kramed
cnpm i --save hexo-renderer-stylus
cnpm i --save hexo-server
cnpm i --save hexo-wordcount
cnpm i --save hexo-generator-category
cnpm i --save hexo-filter-mermaid-diagrams

然后需要修改一些必要的配置

首先在根目录的_config.yml修改自己的网站名，作者名等，url处填写自己的网站名

填写打开了 GitHub pages 或coding pages 的地址

如果要打开评论，这里推荐用Valine，在主题下的_config.yml，把enable的false改成true，并且注册Valine账号填写appId和appKey

另外主题配置下的github地址换成自己的github地址(还有好几个哦，自己搜索替换一下吧)

文章的img如果没有填写，就会从指定的图片里根据哈希码选择一张图片作为封面（还是在主题配置修改）

hexo中的latex踩坑

latex换行的bug(是插件渲染的问题，可以用四个/来换行)，其他方面都没毛病。hexo-renderer-pandoc 我也尝试过，但效果还来还是不如hexo-renderer-kramed（即上面安装的那个插件）如果不想用4个/来换行也可以参考下这个Hexo中LaTeX公式渲染或Hexo 书写 LaTeX 公式时的一些问题及解决方法

（总之，hexo的latex渲染还是有点坑，但配置好其实也没毛病~推荐就用我上面指定的那些插件）

如果用typora写出来的latex有问题的话，比如像这样

在各种markdown编辑器看着这个公式都能正常显示，但实际上经过hexo渲染打开的网页的就会像下图这样：

这个其实是因为Typora的markdown源码不标准，所以尽管在hexo的mathjax渲染出问题

如果打开CSDN或者github的markdown编辑就会看出问题了

其实问题就出在typora的公式块的两个 $ $ 不是相连的，所以正确的解法是把中间的空行还有一些多余的空格删除掉即可。

正常显示之后，再把这段复制粘贴到vscode打开的md文件，hexo渲染出的网页就显示正常啦。

(一句话，想办法让公式在CSDN的markdown编辑器显示正常即可)