文章目录
Hexo 的安装安装 Git安装 Node.js升级 Node.js 版本安装 Hexo升级 Hexo 版本初始化 Hexo启动 Hexo 服务 Hexo 部署到 GitHub在 GitHub 官网上创建个人仓库Git 初始化设置查看设置是否正确生成 SSH 公钥添加到 GitHubHexo 部署到 GitHub Pages Hexo 部署到 Gitee在 Gitee 官网上创建个人仓库初始化 Git 设置查看设置是否正确生成 SSH 公钥添加到 GiteeHexo 部署到 Gitee Pages Matery 主题安装及优化Hexo 插件的安装代码高亮搜索中文链接转拼音文章生成永久链接外链跳转文章字数统计添加 Emoji 表情支持添加 RSS 订阅支持图片懒加载折叠功能代码压缩 Hexo 添加 Valine 评论系统Valine 简介Valine 的配置增加点击跳转评论按钮 实现 Valine 评论系统通知功能Valine-Admin 简介Valine-Admin 的配置Hexo 的安装
Hexo 是一款基于 Node.js 的静态博客框架，依赖少易于安装使用，可以方便的生成静态网页托管在 GitHub 、Gitee 上，是搭建博客的首选框架。
安装 Git
Git 是目前世界上最先进的分布式版本控制系统，可以有效、高速的处理从很小到非常大的项目版本管理。
apt-get install git -y
安装 Node.js
Hexo 是基于 Node.js 编写的，所以需要安装一下 Node.js 和 npm 工具，Node.js 默认包含 npm 。
apt-get install nodejs npm -y
安装完后，输入如下命令，检查是否安装成功。
node -v
npm -v
升级 npm 到最新版本，更换 npm 源为淘宝源。
npm install -g npm
npm config set registry https://registry.
升级 Node.js 版本
清除 npm 缓存。npm cache clean -f
安装 Node.js 版本管理工具 n 。
npm install n -g
查看 Node.js 所有版本。
npm view node versions
升级 Node.js 版本。
# 升级到指定的版本：n 版本号n 16.0.0# 升级到最新的稳定版本n stable# 升级到最新版本，不推荐n latest
用node -v查看 Node.js 版本，如果版本号改变为想要的则升级成功。如果版本号没变，可以重启机器或者尝试以下方法：
查看安装 Node.js 的位置，输入如下命令后显示 Node.js 的安装路径。
which node
/usr/local/n/versions/node/16.0.0 // 具体的安装路径
配置环境变量，进入该位置。
cd /usr/local/n/versions/node
编辑/etc/profile，将 Node.js 安装的环境变量添加到文件末尾。
export NODE_HOME=/usr/local/n/versions/node/16.0.0 // 16.0.0 是Node.js 的版本号export PATH=$NODE_HOME/bin:$PATH
保存文件，再刷新/etc/profile使配置生效，输入如下命令。
source /etc/profile
安装 Hexo
前面 Git 和 Node.js 安装好后，就可以正式进行安装 Hexo 。
安装 Hexo 。
npm install -g hexo-cli
查看版本信息 。
hexo -v
升级 Hexo 版本
安装 npm-check 和 npm-upgrade ，-g是全局安装，输入如下命令。npm install -g npm-check npm-upgrade --save
检查本地插件版本。
npm-check
交互式升级，根据提示选择要升级的工具。
npm-upgrade
按照提示选择后会更新package.json文件，输入如下命令进行升级。
npm install
正确运行后 Hexo 及插件已经升级成功，执行 hexo version 查看版本。
初始化 Hexo
hexo init filename（文件名随意定义）cd filename //进入这个文件夹npm install
hexo init
cd filename说明：自动在文件夹（filename）中创建项目所需的文件。
npm install说明：将操作位置转移到将要存放项目的文件夹目录。
说明：安装依赖包。
上述步骤操作完成后，指定 Hexo 根目录下有如下文件：
_config.yml：站点的配置文件，需要备份。themes：主题文件夹，需要备份。source：资源文件夹。用来存放图片、Markdown 文档（文章、草稿）、各种页面（分类、关于页面等），需要备份。scaffolds：文章的模板，需要备份。package.json：安装包的名称，需要备份。.gitignore：限定在 push 时哪些文件可以忽略，需要备份 .git ：主题和站点都有，标志这是一个 git 项目，不需要备份。node_modules：是安装包的目录，在执行 npm install 的时候会重新生成，不需要备份。public：hexo g 生成的静态网页，将 source 文件夹里的 MarkDown 文档，转换成 index.html，不需要备份。deploy_git：将 public 文件夹的内容提交到 GitHub 后生成，内容与 public 文件夹基本一致，不需要备份。db.json：文件，不需要备份。
启动 Hexo 服务
正确安装完成后便按照下面操作启动 Hexo 博客。
hexo generate # 生成静态页面至 public 目录
hexo server # 开启预览访问端口（默认端口 4000 ，ctrl + c 关闭 server ）
打开浏览器输入对应的网址http://localhost:4000，就可以看到生成的博客。
Hexo 部署到 GitHub
在 GitHub 官网上创建个人仓库
登录 GitHub 官网，点击右上角加号，点击 New Repository ，新建仓库。
创建一个和账号名相同的仓库（即http://xxx.github.io，其中xxx是 github 的账号名），点击 Greate Repository 创建。
Git 初始化设置
git config --global user.name "你的 github 账号名"
git config --global user.email "你的 github 邮箱号"
查看设置是否正确
git config user.name
git config user.email
生成 SSH 公钥添加到 GitHub
创建 SSH Key ，默认回车，输入如下命令：ssh-keygen -t rsa -C "你的邮箱号"
查看 SSH key ，输入如下命令：
cat ~/.ssh/id_rsa.pub
复制id_rsa.pub里面的全部内容，在 GitHub 的 Setting 中，找到 SSH and GPG keys 的设置选项，点击 New SSH key，粘贴id_rsa.pub里面的全部内容。
查看是否连接成功，输入如下命令：
ssh -T git@
打开 Hexo 根目录下的配置文件_config.yml，修改添加如下内容：
deploy: type: gitrepo:github: git@:xxx/xxx.github.io.git # `xxx` 是 github 配置的仓库名branch: master
Hexo 部署到 GitHub Pages
在部署到 GitHub 之前，首先安装hexo-deployer-git的 Hexo 插件。npm install hexo-deployer-git --save
部署到 GitHub 。
hexo g -d
上述操作完成后，打开浏览器访问设置的网络地址https://xxx.github.io/（xxx 是 github 账号昵称），就可以看见和本地网络地址http://localhost:4000一样的 Hexo 博客页面。
Hexo 部署到 Gitee
在 Gitee 官网上创建个人仓库
打开码云官网，注册登陆，创建项目，点击右上角加号，新建仓库。
开启 Gitee Pages 服务。
点击启动后出现的蓝色链接就是生成的博客网址地址，每次部署都要进入 Gitee Pages 服务页面点击启动按钮才能更新更改。
初始化 Git 设置
git config --global user.name "你的 gitee 账号名"
git config --global user.email "你的 gitee 邮箱号"
查看设置是否正确
git config user.name
git config user.email
生成 SSH 公钥添加到 Gitee
创建 SSH key ，默认回车，输入如下命令：ssh-keygen -t rsa -C "你的邮箱号"
查看 SSH key ， 输入如下命令：
cat ~/.ssh/id_rsa.pub
复制id_rsa.pub里面的全部内容，在 gitee 的安全设置中，找到SSH 公钥的设置选项，添加 SSH key ，粘贴id_rsa.pub里面的全部内容。
查看是否连接成功，输入如下命令：
ssh -T git@
打开 Hexo 根目录下的_config.yml配置文件，修改添加如下内容：
# 账号名和仓库名不一致时添加如下配置形式，否则不用添加url: Gitee Pages 服务网站地址： https://空间名.gitee.io/仓库名root: /仓库名/
deploy: type: git repo: gitee: git@:xxx/xxx.git # `xxx` 是 gitee 的账号名branch: master
GitHub 和 Gitee 双部署的 Hexo 根目录下的配置文件
_config.yml配置形式：
deploy:type: gitrepo:github: git@/cqupthao/cqupthao.github.io.git # cqupthao 为账号名gitee: git@/cqupthao/cqupthao.git # cqupthao 为账号名branch: master
Hexo 部署到 Gitee Pages
在部署到 Gitee 之前，首先安装hexo-deployer-git的 Hexo 插件。npm install hexo-deployer-git --save
部署到 Gitee 。
hexo g -d
上述操作完成后，打开浏览器访问设置的网络地址https://xxx.gitee.io/（xxx是 gitee 账户号），就可以看见和本地网址地址http://localhost:4000一样的 Hexo 博客页面。
参考官方文档
Matery 主题安装及优化
Matery 主题安装参考 Matery 官网教程。
Matery 优化参考 基于 Hexo 的 Matery 主题搭建博客并深度优化一站式完全教程。
Hexo 插件的安装
代码高亮
从 Hexo5.0 版本开始自带了 prismjs 代码语法高亮的支持，如果博客安装过hexo-prism-plugin的插件，须执行npm uninstall hexo-prism-plugin来卸载掉它，否则生成的代码中会有{和}的转义字符。
修改 Hexo 根目录下_config.yml文件中 highlight.enable 的值为 false ，并将 prismjs.enable 的值设置为 true ，主要配置如下：
highlight:enable: falseline_number: trueauto_detect: falsetab_replace: ''wrap: truehljs: falseprismjs:enable: truepreprocess: trueline_number: truetab_replace: ''
主题中默认的 prismjs 主题是 Tomorrow Night ，如果想定制自己的主题，可前往 prismjs 下载页面 定制下载自己喜欢的主题css文件，然后将此css主题文件取名为prism.css，替换掉 Matery 主题文件夹中的source/libs/prism/prism.css文件。
搜索
使用hexo-generator-search的 Hexo 插件来实现内容搜索，安装命令如下：
npm install hexo-generator-search --save
在 Hexo 根目录下的_config.yml文件中，新增以下的配置项：
search:path: search.xmlfield: post
中文链接转拼音
使用hexo-permalink-pinyin的 Hexo 插件使在生成文章时生成中文拼音的永久链接，安装命令如下：
npm i hexo-permalink-pinyin --save
在 Hexo 根目录下的_config.yml文件中，新增以下的配置项：
permalink_pinyin:enable: trueseparator: '-' # default: '-'
执行hexo clean && hexo g重新生成博客文件，就可以生成拼音链接。
文章生成永久链接
使用hexo-abbrlink的 Hexo 插件来实现文章生成永久链接，安装命令如下：
npm install hexo-abbrlink --save
在 Hexo 根目录下的_config.yml文件中，新增以下的配置项：
abbrlink: alg: crc16 #算法：rep: hex #输出进制：十进制和十六进制，默认为10进制。丨dec为十进制，hex为十六进制
将_config.yml文件中的 permalink 的值修改为如下内容：
permalink: posts/:abbrlink.html # 此处可以自己设置，也可以直接使用 :/abbrlink
执行hexo clean && hexo g重新生成博客文件，就可以生成永久链接。生成完后，原 md 文件的 Front-matter 内会增加 abbrlink 字段，值为生成的 ID 。
外链跳转
使用hexo-external-link的 Hexo 插件来实现外链跳转，安装命令如下：
npm install hexo-external-link --save
在 Hexo 根目录下的_config.yml文件中，新增以下的配置项：
hexo_external_link:enable: trueenable_base64_encode: trueurl_param_name: 'u'html_file_name: 'go.html'target_blank: truelink_rel: 'external nofollow noopener noreferrer'domain: 'your_domain' # 如果开启了防盗链，填写你的域名safety_chain: true
执行hexo clean && hexo g重新生成博客文件，就可以实现外链跳转。
文章字数统计
使用hexo-wordcount的 Hexo 插件来实现在文章中统计显示文章字数、阅读时长信息，安装命令如下：
npm i hexo-wordcount --save
在 Matery 主题下的_config.yml文件中，将各个文章字数相关的配置激活：
postInfo:date: trueupdate: falsewordCount: false # 设置文章字数统计为 truetotalCount: false # 设置站点文章总字数统计为 true min2read: false # 阅读时长readCount: false # 阅读次数
执行hexo clean && hexo g重新生成博客文件，就可以实现文章字数统计。
添加 Emoji 表情支持
使用hexo-filter-github-emojis的 Hexo 插件来支持 emoji 表情的生成，安装命令如下：
npm install hexo-filter-github-emojis --save
在 Hexo 根目录下的_config.yml文件中，新增以下的配置项：
githubEmojis:enable: trueclassName: github-emojiinject: truestyles:customEmojis:
执行hexo clean && hexo g重新生成博客文件，然后就可以在文章中用 emoji 语法写表情。
添加 RSS 订阅支持
使用hexo-generator-feed的 Hexo 插件来做 RSS，安装命令如下：
npm install hexo-generator-feed --save
在 Hexo 根目录下的_config.yml文件中，新增以下的配置项：
feed:type: atompath: atom.xmllimit: 20hub:content:content_limit: 140content_limit_delim: ' 'order_by: -date
执行hexo clean && hexo g重新生成博客文件，在public文件夹中看到atom.xml文件，说明已安装成功。
图片懒加载
使用hexo-lazyload-image的 Hexo 插件来实现图片懒加载，安装命令如下：
npm install hexo-lazyload-image --save
在 Hexo 根目录下的_config.yml文件中，新增以下的配置项：
lazyload:enable: true onlypost: false # 是否只对文章的图片做懒加载loadingImg: # eg ./images/loading.gif
执行hexo clean && hexo g重新生成博客文件，一般情况下懒加载会和 gallery 插件会发生冲突，结果可能就是点开图片，左右翻都是 loading image ，解决方法是修改在 Matery 主题source/js/目录下的matery.js文件，在第 108 行添加如下内容：
$(document).find('img[data-original]').each(function(){$(this).parent().attr("href", $(this).attr("data-original"));});
做完这步之后，首页的 logo 点击会直接打开 logo 图，而不是跳到首页，解决方法是修改在 Matery 主题目录layout/_partial/下的header.ejs文件，在img和span的两个头之间添加个div。
<div class="brand-logo"><a href="<%- url_for() %>" class="waves-effect waves-light"><div><% if (theme.logo !== undefined && theme.logo.length > 0) { %><img src="<%= theme.logo %>" class="logo-img" alt="LOGO"><% } %><span class="logo-span"><%- config.title %></span></div></a></div>
执行hexo clean && hexo g重新生成博客文件，就可以实现图片懒加载。
折叠功能
使用hexo-sliding-spoiler的 Hexo 插件来实现折叠功能，安装命令如下：
npm install hexo-sliding-spoiler --save
在 Hexo 根目录下的_config.yml文件中，新增以下的配置项：
plugin:- hexo-sliding-spoiler
执行hexo clean && hexo g重新生成博客文件，就可以实现折叠功能。
代码压缩
使用hexo-neat的 Hexo 插件来实现代码压缩，安装命令如下：
npm install hexo-neat --save
在 Hexo 根目录下的_config.yml文件中，新增以下的配置项：
#hexo-neat 优化提速插件（去掉 HTML、css、js 的 blank字符）neat_enable: trueneat_html:enable: trueexclude:- '**/*.md'neat_css:enable: trueexclude:- '**/*.min.css'neat_js:enable: truemangle: trueoutput:compress:exclude:- '**/*.min.js'- '**/**/instantpage.js'- '**/matery.js'
执行hexo clean && hexo g重新生成博客文件，就可以实现代码压缩了。
Hexo 插件安装参考 Hexo 官网
Hexo 添加 Valine 评论系统
Valine 简介
valine 诞生于 年 8 月 7 日，是一款基于 LeanCloud 的快速、简洁且高效的无后端评论系统。理论上支持但不限于静态博客，目前已有 Hexo 、Jekyll 、Typecho 、Hugo 、Ghost 等博客程序在使用 valine 。
valine 具有快速安全，Emoji 😉，无后端实现，MarkDown 全语法支持，轻量易用，文章阅读量统计等优质特性。
Valine 的配置
在 LeanCloud 官网注册登录，创建一个应用，然后进入应用，点击设置，找到应用凭证，复制 AppID 和 AppKey 添加到 Matery 主题的config.yml配置文件中的对应位置。# valine 评论模块的配置，默认为不激活，如要使用，就请激活该配置项，并设置 appId 和 appKey 。valine:enable: trueappId: # 将应用 key 的 AppID 设置在这里appKey: # 将应用 key 的 AppKey 设置在这里serverURLs: # https://你的apinotify: false # 邮箱通知verify: false # 验证码 默认为 falsevisitor: true # 是否允许游客评论avatar: 'mm' # 头像风格，默认为 mm ，可进入网址: mm/identicon/monsterid/wavatar/retro/hidepageSize: 10placeholder: 'just go go' # Comment Box placeholderbackground: /medias/comment_bg.pngcoolpushkey:
升级 valine 版本。
进入 valine 官网， 选择 valine 版本后点击Valine.min.js，点击 View Raw 后复制全部内容，替换掉 Matery 主题下的/source/libs/valine/Valine.min.js文件全部内容。
修改在 Matery 主题目录下的_config.yml配置文件如下内容：
valine:enable: trueappId: iTxfqh5e9IaRfiiVOTbIWoKa-XXXXXXappKey: C5s5xGFErD1EtXXXXXXXXverify: true # 是否启用防垃圾验证notify: true # 是否开启邮件提醒(/notify.html)visitor: trueavatar: monsterid # 头像样式(/avatar.html) pageSize: 10placeholder: 'ヾﾉ≧∀≦)o来啊，快活啊!' # Comment Box placeholderbackground: /medias/comment_bg.png #背景图count: trueenableQQ: 2733443175recordIP: truerequiredFields: - nick- mailguest_info: - nick- mail- linkmaster: - 123abc508165c8eba9a77f872xxxx046 # MD5 加密后的博主邮箱metaPlaceholder: # 输入框的背景文字nick: 昵称 / QQ 号（必填）mail: 邮箱（用于获取通知信息）link: lang: zh-CNtagMeta: # The String Array of Words to show Flag ，[Just Only xCss Style modle]- 博主- 小伙伴- 访客
隐藏 valine 版本号信息。
修改在 Matery 主题目录source/css/下的matery.css文件，在文本末添加如下内容：
/* Hide Valine Version*/.vpower.txt-right {display: none;}
保存后执行hexo clean && hexo g重新生成博客文件，就可以实现隐藏 valine 版本号信息了。
valine 配置参数信息参考 valine 官方文档管理评论。
点击存储 -> 结构化数据，选择创建 Class ，名称Comment，其它保持默认，以后 Hexo 博客的评论就可在这个 Class 内查看，删除等。
文章阅读量统计。
点击存储 -> 结构化数据，选择创建 Class ，名称Counter，其它保持默认，以后就可在这个 Class 内查看。
增加点击跳转评论按钮
在 Matery 主题目录/layout/_partial/下新建back-comment.ejs文件 , 复制粘贴如下代码：
<!-- 直达评论 --><div id="to_comment" class="comment-scroll"><a class="btn-floating btn-large waves-effect waves-light" href="#vcomments" title="直达评论"><i class="fas fa-comments"></i></a></div>
在 Matery 主题目录/layout/_partial/下的valine.ejs文末添加一条如下代码：
<%- partial('_partial/back-comment.ejs') %>
只有 valine 存在的页面才显示直达评论，为了防止首页其它地方也出现按钮，在 Matery 主题目录/source/css/下的matery.css文件添加如下内容：
/*直达评论按钮样式*/.comment-scroll {position: fixed;right: 15px;bottom: 135px; # bottom ：135px 是距离底部的高度padding-top: 15px;margin-bottom: 0;z-index: 998;}.comment-scroll .btn-floating {background: linear-gradient(to bottom right, #FF9999 0%, #ff6666 100%);width: 48px;height: 48px;}.comment-scroll .btn-floating i {line-height: 48px;font-size: 1.8rem;}
实现 Valine 评论系统通知功能
Valine-Admin 简介
Valine-Admin 项目是一个对 valine 评论系统的拓展应用，可以增强 valine 的邮件通知功能。基于 LeanCloud 的云引擎与云函数，主要实现评论邮件通知、评论管理、自定义邮件通知模板等功能，还可以提供邮件通知站长和@通知的功能。
Valine-Admin 的配置
确保 valine 的基础功能是是否正常，参考 valine 官方文档。
进入 LeanCloud 对应的 valine 应用中。
点击云引擎 -> 部署，选择Git 源码部署，填写仓库地址/HCLonely/Valine-Admin，点击保存，分支或版本号输入master，下载最新依赖（可选），点击部署。
设置自定义环境变量，需要设置云引擎的环境变量以提供必要的信息，变量参数参考下面的配置项表：设置后台管理登录信息，点击存储 -> 结构化数据，选择_User -> 添加行，只需要填写password、username、email这三个字段即可, 使用 email 作为账号登陆、password 作为账号密码、username 任意即可。（为了安全考虑，此 email 必须为配置中的SMTP_USER或TO_EMAIL，否则不允许登录）参考 基于 Hexo 的 Matery 主题搭建博客个性定制篇
如果觉得《搭建 Hexo 个人博客和 Matery 主题的配置优化》对你有帮助，请点赞、收藏，并留下你的观点哦！
