Hexo之搭建个人博客
介绍
Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。hexo 博客在 Linux 系统中搭建是非常简单的，在 WIN 系统中比较复杂，我们接触的手机📱永远要比电脑的时间要多那么我们可以在安卓手机上使用 termux 来搭建，这样随时随地都可以写做和发表文章。
前期工作
开始安装
安装
- Node 环境安装：
- Hexo 环境安装：
$ npm install -g hexo-cli初始化
安装完成之后，新建一个文件夹(例如: blog)，执行以下命令进行初始化：
$ cd blog
$ hexo init安装核心组件
安装 npm 核心组件支持
cd blog
npm install 新建完成后，cd blog，查看文件夹目录
安装 NexT 主题
- 下载主题：
- 修改主配置文件：
- 修改主题配置文件：
Hexo 的主题非常丰富可以去官方主题下载；下面有演示我使用的主题 next
cd blog
git clone https://github.com/theme-next/hexo-theme-next themes/next 在站点配置文件_config.yml 开启 next 主题，修改theme属性，注意 theme: 后要加空格，具体的站点和主题信息配置请自行去 hexo 和 next 主题文档查看
cd blog
vi _config.yml
theme: next # 找到 theme 在blog文件夹下，新建_config.next.yml，存放主题修改内容。
cd blog
touch _config.next.yml # themes/next/_config.yml 中需要修改的，放在这里。本地调试
hexo g # 生成静态页面，生成的内容在public文件夹下
hexo s # 启动本地服务，进行文章预览调试。hexo s --debug 命令可以用来调试配置 git
配置 ssh 密钥及 github 或者 gitee 部署
......
ssh-key ....
省略。。。
$ git config --global user.name "your name"
$ git config --global user.email "email@email.com"
省略。。。
......部署
- 安装 hexo-deployer-git 插件
- 打开 Hexo 主文件夹下的_config.yml，设置其中的 deploy 参数
- 安装完成插件之后，blog 目录下使用以下命令部署
$ cd blog
$ npm install hexo-deployer-git --savecd blog
vi _config.yml
deploy:
type: git
repo: git@github.com:leeze2012/leeze2012.github.io.git
branch: master$ hexo d -g # 在部署前先生成Next 常用命令
$ hexo clean # 清理之前生成的内容，即public文件
$ hexo g # 生成静态文件
$ hexo d # 部署
$ hexo s # 启动本地服务，可以通过http://localhost:4000查看
$ hexo s --debug # 使用debug模式启动服务备份
- 在 github 新建一个叫 blog 的仓库。
- 在本地博客文件夹创建 git 版本库，如果没有安装 git 必须先安装 git。
- 进入需要备份 blog 目录。
- 创建版本库。
- 连接上面 github 创建的仓库
- 添加备份文件
- 注释备份内容，明确的注释可以回退版本
- 第一次强制上传文件到 github 仓库
- 安装shelljs模块,实现自动备份。
其中，需要修改第
17行的~/git/blog路径为Hexo的根目录路径。（脚本中的路径为博主的Hexo路径）如果你的Git远程仓库名称不为
origin的话，还需要修改第28行执行的push命令，修改成自己的远程仓库名和相应的分支名。保存脚本并退出，然后执行hexo deploy命令，将会得到类似以下结果:
cd blog
git init这个时候 blog 的版本库已经创建好了。
验证是否成功，如果有一个 .git 的隐藏文件就说明创建成功。
查看隐藏文件
ls -agit remote add origin github.com:leeze2012/blog.gitsource/ scripts/ themes/ _config.yml _config.next.yml scaffolds/ package.json .gitignore 这些文件需要备份
git add source/ scripts/ themes/ _config.yml _config.next.yml scaffolds/ package.json .gitignore修改.gitignore文件（如果没有请手动创建一个），在里面加入*.log 和 public/ 以及.deploy*/
vi .gitignore
.DS_Store
themes/
db.json
*.log
node_modules/
public/
.deploy*/
.idea/
git add .
git commit -m "博客备份"git push -u origin mastergit push origin master 要实现这个自动备份功能，需要依赖NodeJs的一个shelljs模块,该模块重新包装了child_process,调用系统命令更加的方便。（其实就是因为博主懒( ╯▽╰)）该模块需要安装后使用。
在命令中键入以下命令，完成shelljs模块的安装：
npm install shelljs --save待到模块安装完成，在Hexo根目录的scripts文件夹下新建一个js文件，文件名随意取。
如果没有scripts目录，请新建一个。
然后在脚本中，写入以下内容：
require('shelljs/global');
try {
hexo.on('deployAfter', function() {//当deploy完成后执行备份
run();
});
} catch (e) {
console.log("产生了一个错误<(￣3￣)> !，错误详情为：" + e.toString());
}
function run() {
if (!which('git')) {
echo('Sorry, this script requires git');
exit(1);
} else {
echo("======================Auto Backup Begin===========================");
cd('~/git/blog'); //此处修改为Hexo根目录路径
if (exec('git add --all').code !== 0) {
echo('Error: Git add failed');
exit(1);
}
if (exec('git commit -am "Form auto backup script\'s commit"').code !== 0) {
echo('Error: Git commit failed');
exit(1);
}
if (exec('git push origin master').code !== 0) {
echo('Error: Git push failed');
exit(1);
}
echo("==================Auto Backup Complete============================")
}
}INFO Deploying: git
INFO Clearing .deploy_git folder...
INFO Copying files from public folder...
INFO Copying files from extend dirs...
[master 2fd18b4] Site updated: 2020-03-02 13:46:34
4 files changed, 42 insertions(+), 4 deletions(-)
枚举对象: 19, 完成.
对象计数中: 100% (19/19), 完成.
使用 8 个线程进行压缩
压缩对象中: 100% (8/8), 完成.
写入对象中: 100% (10/10), 4.25 KiB | 1.06 MiB/s, 完成.
总共 10 （差异 7），复用 0 （差异 0）
remote: Resolving deltas: 100% (7/7), completed with 7 local objects.
To github.com:leeze2012/leeze2012.github.io.git
42f1ef1..2fd18b4 HEAD -> master
分支 'master' 设置为跟踪来自 'git@github.com:leeze2012/leeze2012.github.io.git' 的远程分支 'master'。
INFO Deploy done: git
INFO Deploying: baidu_url_submitter
INFO Submitting urls
https://blog.xiaosige.com/post/c1dab809.html
https://blog.xiaosige.com/post/73879c7f.html
{"remain":99984,"success":2}
INFO Deploy done: baidu_url_submitter
======================Auto Backup Begin===========================
[master af0e0a8] Form auto backup script's commit
2 files changed, 75 insertions(+)
create mode 100644 scripts/.bc.js.swo
To github.com:leeze2012/blog.git
49dd62c..af0e0a8 master -> master
==================Auto Backup Complete============================这样子，每次更新博文并deploy到服务器上之后，备份就自动启动并完成备份啦
恢复
- git clone 自己备份的博客源代码克隆备份的 bolg 源文件地址是你自己的地址这里不做演示
- 安装相应插件：
- package.json：
git clone <版本库的网址> <本地目录名>cd bolg
hexo init
...
npm install 本人package.json，参考
npm install hexo-deployer-git --save
npm install hexo-generator-searchdb --save
npm install valine --save
npm install hexo-symbols-count-time --save
npm install hexo-baidu-url-submit --save
npm install hexo-abbrlink --save
npm install hexo-blog-encrypt --save
npm uninstall hexo-generator-index --save
npm install hexo-generator-index-pin-top --save
npm install hexo-asset-image --save (推荐这个)
## 以下参考选择
npm install hexo-tag-aplayer --save
npm install hexo-tag-dplayer --save
npm install hexo-hide-posts --save
#二选一
npm install hexo-spoiler --save
## 代码主题不用highlight，改用prismjs时，可以扩展prismjs的主题
## npm i -S hexo-prism-plugin
## 参考：https://theme-next.js.org/highlight/
npm install prism-themes
# 添加 RSS 订阅支持（可选的）atom/rss2
npm install --save hexo-generator-feed
# 添加 emoji 表情支持（可选的）
npm install hexo-filter-github-emojis --save
注： ，使用hexo-asset-image，参考：hexo之图片问题
注：一些东西摘自网上，未亲自验证。
{
"name": "hexo-site",
"version": "0.0.0",
"private": true,
"scripts": {
"build": "hexo generate",
"clean": "hexo clean",
"deploy": "hexo deploy",
"server": "hexo server"
},
"hexo": {
"version": "5.2.0"
},
"dependencies": {
"hexo": "^5.2.0",
"hexo-abbrlink": "^2.2.1",
"hexo-asset-image": "^1.0.0",
"hexo-baidu-url-submit": "0.0.6",
"hexo-blog-encrypt": "^3.0.13",
"hexo-cake-moon-menu": "^2.3.1",
"hexo-deployer-git": "^2.1.0",
"hexo-filter-github-emojis": "^2.1.0",
"hexo-generator-archive": "^1.0.0",
"hexo-generator-baidu-sitemap": "^0.1.9",
"hexo-generator-category": "^1.0.0",
"hexo-generator-feed": "^3.0.0",
"hexo-generator-index-pin-top": "^0.2.2",
"hexo-generator-searchdb": "^1.3.3",
"hexo-generator-sitemap": "^2.1.0",
"hexo-generator-tag": "^1.0.0",
"hexo-hide-posts": "^0.1.1",
"hexo-inject": "^1.0.0",
"hexo-neat": "^1.0.9",
"hexo-related-popular-posts": "^5.0.1",
"hexo-renderer-ejs": "^1.0.0",
"hexo-renderer-marked": "^3.3.0",
"hexo-renderer-pug": "^1.0.0",
"hexo-renderer-stylus": "^2.0.1",
"hexo-server": "^2.0.0",
"hexo-sliding-spoiler": "^1.2.1",
"hexo-symbols-count-time": "^0.7.1",
"hexo-tag-friends": "^0.3.4",
"prismjs": "^1.21.0",
"shelljs": "^0.8.4",
"valine": "^1.4.14"
}
}其他
网站图标
只要把png图片放进去（尺寸不能太大）
就可以生成一套图标（苹果手机桌面图标，网页图标，win磁贴图标等等）
下载之后放到blog\source\my_images文件夹中
favicon:
small: /my_images/favicon-16x16.png
medium: /my_images/favicon-32x32.png
apple_touch_icon: /my_images/apple-touch-icon.png
safari_pinned_tab: /my_images/safari-pinned-tab.svg
android_manifest: /my_images/site.webmanifest
ms_browserconfig: /my_images/browserconfig.xml一键部署插件
插件：hexo-deployer-git
安装插件：
npm install hexo-deployer-git --save 然后修改站点配置文件 中的配置：
deploy:
- type: git
repository: git@github.com:constown/constown.github.io.git
branch: masterback2top
Hexo 修改 back2top 标签： hexo-cake-moon-menu
安装插件：
npm install hexo-cake-moon-menu --save 然后在站点配置文件_config.yml 中添加以下代码：
moon_menu:
back2top:
enable: true
icon: fa fa-chevron-up
func: back2top
order: -1
back2bottom:
enable: true
icon: fa fa-chevron-down
func: back2bottom
order: -2减少出站链接
减少出站链接能够有效防止权重分散，hexo 有很方便的自动为出站链接添加 nofollow 标签的插件。
首先安装 hexo-filter-nofollow 插件：
npm install hexo-filter-nofollow --save 然后我们在站点的配置文件_config.yml 中添加配置，将 nofollow 设置为 true：
# 外部链接优化
nofollow:
enable: true
field: site
exclude:
- 'exclude1.com'
- 'exclude2.com' 其中 exclude（例外的链接，比如友链）将不会被加上 nofollow 属性。
hexo 本地搜索
NexT 主题已经实现这个功能，它用了 Hexo 的拓展包 hexo-generator-searchdb，预先生成了一个文本库 search.xml，然后传到了网站里面。在本地搜索的时候，NexT 直接用 javascript 调用了这个文件，从而实现了静态网站的本地搜索。
安装插件:
npm install hexo-generator-searchdb --save 然后我们修改站点配置_config.yml 文件，添加如下内容：
# 本地搜索
search:
path: search.xml
field: post
format: html
limit: 10000- path：索引文件的路径，相对于站点根目录
- field：搜索范围，默认是 post，还可以选择 page、all，设置成 all 表示搜索所有页面
- limit：限制搜索的条目数
然后修改主题配置文件_config.yml：
# Local Search
# Dependencies: https://github.com/theme-next/hexo-generator-searchdb
local_search:
enable: true
# If auto, trigger search by changing input.
# If manual, trigger search by pressing enter key or search button.
trigger: auto
# Show top n results per article, show all results by setting to -1
top_n_per_article: 1
# Unescape html strings to the readable one.
unescape: false
# Preload the search data when the page loads.
preload: falseRss 订阅
安装插件：
npm install hexo-generator-feed --save 在站点配置文件_config.yml 中添加以下代码：
feed:
type: atom
path: atom.xml
limit: 20
hub:
content:
content_limit: 140
content_limit_delim: ' '
order_by: -date
icon: icon.png
autodiscovery: true
template:增加阅读时间和字数统计
首先安装 hexo-symbols-count-time:
npm i hexo-symbols-count-time --save 如果之前安装了hexo-wordcount就要卸载掉npm uninstall hexo-wordcount，因为它只适用于老版本，网页也有教程是这个，
修改站点配置文件_config.yml，没有就添加:
symbols_count_time:
symbols: true #文章内是否显示
time: true
total_symbols: true # 网页底部是否显示
total_time: true
exclude_codeblock: false
awl: 4
wpm: 275
suffix: 'mins.'其中awl（Average Word Length）的数值是设定多少字符统计为一个字(word)，中文博客需要设置为 2。wpm（Words Per Minute）是你的阅读速度，多少字（word）统计为阅读时长一分钟。以下是官方文档里的一些阅读速度参考数据：
- 慢速：200
- 中速：275（默认）
- 快速：350
然后修改主题配置文件next/_config.yml，
symbols_count_time:
separated_meta: true
item_text_post: true
item_text_total: true 最后需要hexo clean然后重新生成，否则可能会出现阅读时间NaN字样，参考官方
永久链接插件
安装插件：
npm install hexo-abbrlink --save 然后我们可以在站点配置文件中修改为：
# URL
url: https://blog.juanertu.com
root: /
permalink: archives/:abbrlink.html
permalink_defaults:
pretty_urls:
trailing_index: true
trailing_html: true
abbrlink:
alg: crc32 # 算法：crc16(default) and crc32
rep: hex # 进制：dec(default) and hex百度主动推送
插件：hexo-baidu-url-submit
安装插件：
npm install hexo-baidu-url-submit --save 在站点配置文件中添加以下代码：
# 百度主动推送
baidu_url_submit:
count: 5 ## 提交最新的1个链接
host: tding.top ## 百度站长平台中注册的域名
token: ## 准入秘钥
path: baidu_urls.txt ## 文本文档的地址， 新链接会保存在此文本文档里站点地图
- 通用站点地图
地址：hexo-generator-sitemap
安装配置：
然后我们需要在 Hexonpm install hexo-generator-sitemap --save站点配置文件中加入 sitemap 插件：# 通用站点地图 sitemap: path: sitemap.xml - 百度站点地图
地址：hexo-generator-baidu-sitemap
安装配置：
具体配置类似通用站点地图，当然也可以看官方提供的教程，下面是一个简单的配置，我们在 Hexonpm install hexo-generator-baidu-sitemap --save站点配置文件中添加：# 百度站点地图 baidusitemap: path: baidusitemap.xml
文章置顶插件
地址：hexo-generator-index-pin-top
安装插件：
npm uninstall hexo-generator-index --save #卸载原来的插件
npm install hexo-generator-index-pin-top --save 在需要置顶的文章的 Front-matter 中加上 top: true 或者 top: 任意数字，比如：
title: 谢谢你来看我的博客
top: true
header: false
abbrlink: a8863134
date: 2020-02-01 12:10:10注意：top 中数字越大，文章越靠前。
设置置顶图标:
更新为将此代码放置到 hexo/source/_data/post-meta.swig 文件中:
{# 添加置顶显示 #}
{%- if post.top > 0 %}
<span class="post-meta-item">
<span class="post-meta-item-icon post-sticky-flag">
<i class="fa fa-thumbtack" style="color:Tomato"></i>
</span>
<span class="post-meta-item-text" style="color:Tomato;font-weight:bold;">
<i class="article-topping">{{ __('post.sticky') }}</i>
</span>
</span>
{%- endif %} _config.next.yml 设置:
custom_file_path:
- #postMeta: source/_data/post-meta.swig
+ postMeta: source/_data/post-meta.swig静态资源压缩插件
地址:hexo-neat
安装插件：
npm install hexo-neat --save 然后我们需要在站点配置文件中添加以下代码：
# 博文压缩
neat_enable: true
# 压缩html
neat_html:
enable: true
exclude:
# 压缩css
neat_css:
enable: true
exclude:
- '**/*.min.css'
# 压缩js
neat_js:
enable: false
mangle: true
output:
compress:
exclude:
- '**/*.min.js'
- '**/jquery.fancybox.pack.js'
- '**/index.js'
- '**/fireworks.js'推荐文章插件
地址:hexo-related-popular-posts
安装插件：
npm install hexo-related-popular-posts --save 我们只需要在主题配置文件中修改：
related_posts:
enable: true
title: 相关文章推荐 # Custom header, leave empty to use the default one
display_in_home: false
params:
maxCount: 5
PPMixingRate: 0.25
isDate: false
isImage: false
isExcerpt: falseemoji 表情支持
地址:hexo-filter-emoji
图标
安装插件:
npm install hexo-filter-emoji 站点配置文件 .config.yml 中增加：
emoji:
enable: true
className: github-emoji
styles:
customEmojis:或者
hexo-filter-github-emojis
加密插件
地址：hexo-blog-encrypt
我们需要在文章开头添加：
---
title: 射频微波基础知识（二）
declare: true
toc: true
tags:
- 射频电路
categories:
- RF
- 射频电路
mathjax: true
+password:
+abstract: 有东西被加密了，请输入密码查看
+message: 请输入密码
---侧栏头像动画
先从简单的开始吧！修改头像其实很简单，直接把头像放进 next/source/images/ 下，然后再主题配置文件中，找到以下部分：
# Sidebar Avatar
avatar:
# In theme directory (source/images): /images/avatar.gif
# In site directory (source/uploads): /uploads/avatar.gif
# You can also use other linking images.
url: /images/avatar.jpg
# If true, the avatar would be dispalyed in circle.
rounded: true
# The value of opacity should be choose from 0 to 1 to set the opacity of the avatar.
opacity: 1
# If true, the avatar would be rotated with the cursor.
rotated: true 在 url 处指定头像文件即可，头像可以是网络图片，只需要把本地路径替换为网络图片的网址即可。另外，当打开了 rotated 后，鼠标移到头像处会逆时针旋转半圈，鼠标移开又转回来，不过这个效果看起来好像也比较普通，如果你想让鼠标一过去头像就控记不住记几鬼畜疯狂旋转，就像这样：
请找到这个文件并愤怒地打开它：source/_data/styles.styl，然后做如下部分修改：
if hexo-config('avatar.rotated') {
.site-author-image {
transition: transform 1.0s ease-out;
/*animation: rotate 5s linear infinite;*/
}
/*@keyframes rotate{from{transform: rotate(0deg)}
to{transform: rotate(360deg)}
}*/
/* 原本只是简单地逆时针旋转 180°
.site-author-image:hover {
transform: rotateZ(-180deg);
}
*/
.site-author-image:hover {
animation: rotate 0.15s linear infinite;
}
@keyframes rotate{from{transform: rotate(0deg)}
to{transform: rotate(360deg)}
}
} .site-author-image:hover 就是鼠标覆盖上去时的代码，代码的意思就是：动画是 rotate，时间是 0.15 秒（也即 0.15 秒转一圈），动画速度是线性，动画重复无限次，在下方定义了旋转的角度是从 0 ~ 360°，其中正数是顺时针旋转，负数是逆时针旋转。设置完了以后别忘了 Hexo 三连一下试试效果。如果你不想这么鬼畜，想走文艺路线，就换一下注释并且让它转的缓慢一点唱片式旋转，变成：
if hexo-config('avatar.rotated') {
.site-author-image {
transition: transform 1.0s ease-out;
animation: rotate 5s linear infinite;
}
@keyframes rotate{from{transform: rotate(0deg)}
to{transform: rotate(360deg)}
}
.site-author-image:hover {
/*animation: rotate 0.15s linear infinite;*/
}
/*@keyframes rotate{from{transform: rotate(0deg)}
to{transform: rotate(360deg)}
}*/
}
languages.yml
我们原来是通过配置主题下的 languages 目录中的 zh-CN.yml 文件来对菜单等进行中文翻译的，现在我们可以通过在 hexo/source/_data/ 下新建数据文件 languages.yml，配置如下：
zh-CN:
menu:
home: 首页
archives: 归档
categories: 分类
tags: 标签
about: 关于
search: 搜索
schedule: 日程表
sitemap: 站点地图
commonweal: 公益 404
message: 留言
links: 友情链接
reward:
donate: 打赏
wechatpay: 微信支付
alipay: 支付宝
paypal: 贝宝
bitcoin: 比特币其他相关链接
[持续更新]最全Hexo博客搭建+主题优化+插件配置+常用操作+错误分析
hexo-git-backup
Hexo博客备份
Doublemine
大专栏