文章目录
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.npm.taobao.org
升级 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
说明:自动在文件夹(filename)中创建项目所需的文件。
- cd 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@github.com
- 打开 Hexo 根目录下的配置文件
_config.yml
,修改添加如下内容:
deploy:
type: git
repo:
github: git@github.com: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@gitee.com
- 打开 Hexo 根目录下的
_config.yml
配置文件,修改添加如下内容:
# 账号名和仓库名不一致时添加如下配置形式,否则不用添加
url: Gitee Pages 服务
网站地址: https://空间名.gitee.io/仓库名
root: /仓库名/
deploy:
type: git
repo:
gitee: git@gitee.com:xxx/xxx.git # `xxx` 是 gitee 的账号名
branch: master
GitHub 和 Gitee 双部署的 Hexo 根目录下的配置文件
_config.yml
配置形式:
deploy:
type: git
repo:
github: git@github.com/cqupthao/cqupthao.github.io.git # cqupthao 为账号名
gitee: git@gitee.com/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: false
line_number: true
auto_detect: false
tab_replace: ''
wrap: true
hljs: false
prismjs:
enable: true
preprocess: true
line_number: true
tab_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.xml
field: post
中文链接转拼音
使用 hexo-permalink-pinyin
的 Hexo 插件使在生成文章时生成中文拼音的永久链接,安装命令如下:
npm i hexo-permalink-pinyin --save
在 Hexo 根目录下的 _config.yml
文件中,新增以下的配置项:
permalink_pinyin:
enable: true
separator: '-' # 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: true
enable_base64_encode: true
url_param_name: 'u'
html_file_name: 'go.html'
target_blank: true
link_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: true
update: false
wordCount: false # 设置文章字数统计为 true
totalCount: 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: true
className: github-emoji
inject: true
styles:
customEmojis:
执行 hexo clean && hexo g
重新生成博客文件,然后就可以在文章中用 emoji 语法写表情。
添加 RSS 订阅支持
使用 hexo-generator-feed
的 Hexo 插件来做 RSS,安装命令如下:
npm install hexo-generator-feed --save
在 Hexo 根目录下的 _config.yml
文件中,新增以下的配置项:
feed:
type: atom
path: atom.xml
limit: 20
hub:
content:
content_limit: 140
content_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: true
neat_html:
enable: true
exclude:
- '**/*.md'
neat_css:
enable: true
exclude:
- '**/*.min.css'
neat_js:
enable: true
mangle: true
output:
compress:
exclude:
- '**/*.min.js'
- '**/**/instantpage.js'
- '**/matery.js'
执行 hexo clean && hexo g
重新生成博客文件,就可以实现代码压缩了。
Hexo 插件安装参考 Hexo 官网
Hexo 添加 Valine 评论系统
Valine 简介
valine 诞生于 2017 年 8 月 7 日,是一款基于 LeanCloud 的快速、简洁且高效的无后端评论系统。理论上支持但不限于静态博客,目前已有 Hexo 、Jekyll 、Typecho 、Hugo 、Ghost 等博客程序在使用 valine 。
valine 具有快速安全,Emoji 😉,无后端实现,MarkDown 全语法支持,轻量易用,文章阅读量统计等优质特性。
Valine 的配置
- 在 LeanCloud 官网注册登录,创建一个应用,然后进入应用,点击设置,找到应用凭证,复制 AppID 和 AppKey 添加到 Matery 主题的
config.yml
配置文件中的对应位置。
# valine 评论模块的配置,默认为不激活,如要使用,就请激活该配置项,并设置 appId 和 appKey 。
valine:
enable: true
appId: # 将应用 key 的 AppID 设置在这里
appKey: # 将应用 key 的 AppKey 设置在这里
serverURLs: # https://你的api
notify: false # 邮箱通知
verify: false # 验证码 默认为 false
visitor: true # 是否允许游客评论
avatar: 'mm' # 头像风格,默认为 mm ,可进入网址: mm/identicon/monsterid/wavatar/retro/hide
pageSize: 10
placeholder: 'just go go' # Comment Box placeholder
background: /medias/comment_bg.png
coolpushkey:
- 升级 valine 版本。
进入 valine 官网, 选择 valine 版本后点击 Valine.min.js
,点击 View Raw 后复制全部内容,替换掉 Matery 主题下的 /source/libs/valine/Valine.min.js
文件全部内容。
修改在 Matery 主题目录下的 _config.yml
配置文件如下内容:
valine:
enable: true
appId: iTxfqh5e9IaRfiiVOTbIWoKa-XXXXXX
appKey: C5s5xGFErD1EtXXXXXXXX
verify: true # 是否启用防垃圾验证
notify: true # 是否开启邮件提醒(https://valine.js.org/notify.html)
visitor: true
avatar: monsterid # 头像样式(https://valine.js.org/avatar.html)
pageSize: 10
placeholder: 'ヾノ≧∀≦)o来啊,快活啊!' # Comment Box placeholder
background: /medias/comment_bg.png #背景图
count: true
enableQQ: 2733443175
recordIP: true
requiredFields:
- nick
- mail
guest_info:
- nick
- mail
- link
master:
- 123abc508165c8eba9a77f872xxxx046 # MD5 加密后的博主邮箱
metaPlaceholder: # 输入框的背景文字
nick: 昵称 / QQ 号(必填)
mail: 邮箱(用于获取通知信息)
link:
lang: zh-CN
tagMeta: # 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 源码部署
,填写仓库地址https://github.com/HCLonely/Valine-Admin
,点击保存,分支或版本号输入master
,下载最新依赖(可选),点击部署。
- 设置
自定义环境变量
,需要设置云引擎的环境变量以提供必要的信息,变量参数参考下面的配置项表
:
- 设置后台管理登录信息,点击
存储 -> 结构化数据
,选择_User -> 添加行
,只需要填写password
、username
、email
这三个字段即可, 使用 email 作为账号登陆、password 作为账号密码、username 任意即可。(为了安全考虑,此 email 必须为配置中的SMTP_USER
或TO_EMAIL
,否则不允许登录)