前言
一直想建立一个方便更新的博客系统，经过长时间折腾（主要是水平有限O(∩_∩)O），找到了hexo结合next主题，自认为门槛很低，适合快速搭建自己的博客，本文就是我搭建博客的全过程，文章大量参考大神的博客和官方教程，主要参考资料：
- hexo手册
- hexo建立主题
- next自定义
- next官方手册
- hexo5.0.0
- hexo插件
- font awesome
- swig模板手册
- next主题手册
- next主题实践
- next主题官方博客
- Nunjucks模板语法
实践过程中，使用了hexo4和hexo5，next5，next7，next8，为了与时俱进，以下内容都是基于hexo5和next8搭建
next版本地址
- https://github.com/iissnan/hexo-theme-next 5.0 已不再维护
- https://github.com/theme-next/hexo-theme-next 6.0-7.0
- https://github.com/next-theme/hexo-theme-next 8.0
准备工作
-
系统环境
- Ubuntu 18.04.1 LTS
-
必要软件
- nodejs v12.18.3
- git version 2.17.1
-
仓库准备
博客搭建
从这里开始搭建博客，配置博客，其实改动很少。
安装hexo
为了简便起见，这里列出所有必要的安装项
npm install -g hexo-cli 安装hexo环境 好像npm install -g hexo 也可以
hexo init blog-hexo-new-next 初始化blog目录
cd blog-hexo-new-next 进入博客目录
git init 初始化git环境
git remote add origin https://gitee.com/dockerlin666/blog-hexo-next.git 添加远程git源码仓库
git pull origin master 拉取远程仓库，应该是空仓库
git add -A 添加初始化后的项目文件
git commit -m 'init hexo blog project' 提交到代码到本地
git push origin master 提交代码到远程仓库（以后每次修改后，可以反复add commit push到远程仓库）
git submodule add https://github.com/next-theme/hexo-theme-next themes/next next8.0主题到主题目录下（所有主题都放在themes目录下）
npm install hexo-deployer-git --save 安装hexo git插件，用于提交博客到发布仓库
配置hexo和next
这里不做过多说明，只记录配置过程，具体含义可以查看hexo和next手册
- 建立 hexo categories（分类） 和 tag（标签）
hexo new page tags
hexo new page categories
可以看到建立了两个文件，按如下方式修改文件
- blog-hexo-new-next/source/categories/index.md
---
title: 分类
date: 2020-08-06 10:22:18
type: "categories"
---
- blog-hexo-new-next/source/tags/index.md
---
title: 标签
date: 2020-08-06 10:21:36
type: "tags"
---
修改配置文件
有两个配置文件很重要
hexo配置文件，blog-hexo-new-next/_config.yml
next配置文件, blog-hexo-new-next/themes/next/_config.yml
在这里我们用到5.0.0特有的功能，建立下面的文件
blog-hexo-new-next/_config.next.yml
这样做的好处是当next发布新版本时，我们可以直接git pull origin master下载最新版本，不用担心我们的配置文件有冲突
使用下面命令
cp themes/next/_config.yml _config.next.yml
下面修改hexo配置文件如下：
title: '阳光灿烂的日志'
subtitle: 'oh,my god'
description: '记录无聊的生活，要不然都忘记了！'
keywords: 'blog, DockerLin, linux, docker, php, nodejs, vue, mysql, redis'
author: 刀客林
language: zh-CN
timezone: 'Asia/ShangHai'
......
theme: next
deploy:
type: git
repo: https://gitee.com/dockerlin666/dockerlin666.git
branch: master
其中 theme 配置成next
deploy章节是博客发布地址，我这里使用的码云的page发布博客。
下面修改next配置文件，注意是blog-hexo-new-next/_config.next.yml
menu:
home: / || fa fa-home
#about: /about/ || fa fa-user
tags: /tags/ || fa fa-tags
categories: /categories/ || fa fa-th
archives: /archives/ || fa fa-archive
#schedule: /schedule/ || fa fa-calendar
#sitemap: /sitemap.xml || fa fa-sitemap
#commonweal: /404/ || fa fa-heartbeat
打开 首页、标签、分类、归档菜单
编写博客文章
- 新建文章命令
hexo new hexo-next
执行后会发现增加了blog-hexo-new-next/source/_posts/hexo-next.md
如果建错了直接删除文件，重新执行新建文章命令
- 编写文章标题、分类、标签
---
title: 使用hexo结合next搭建自己的博客
date: 2020-08-05 18:32:41
categories:
- [学习, hexo]
tags:
- hexo
- next
- blog
---
下面就是用markdown语法写文章了
运行hexo调试服务，查看效果
hexo s --debug
看到 07:26:10.241 INFO Hexo is running at http://localhost:4000 . Press Ctrl+C to stop. 表示服务器运行正常，在浏览器里查看效果
部署到码云
hexo clean
hexo generate
hexo deploy
输入gitee的用户名和密码提交成功，登录gitee网站进入dockerlin666/dockerlin666仓库，点击服务》Gitee Pages 服务 》更新
好了，现在可以看看 http://dockerlin666.gitee.io 上的效果了
高级配置
上面介绍了如何快速搭建一个博客系统，基本上满足了基本需求，下面的内容都是锦上添花，有兴趣的可以配置一下。
以下没有特别说明，都是修改文件 blog-hexo-new-next/_config.next.yml
配置个性化LOGO
custom_logo: /uploads/logo400.png
配置备案信息
如果icp要求备案的化，可以配置备案信息，这里只做演示
beian:
enable: true
icp: 京ICP备 测试1234567890号-1
gongan_id: 测试1234567890
gongan_num: 京公网安备 测试1234567890号
gongan_icon_url: http://www.beian.gov.cn/img/new/gongan.png
配置sidebar一直打开
找到sidebar章节
display: always
配置博主头像
把自己的头像拷贝到blog-hexo-new-next/source/uploads/avatar.jpg
avatar:
url: /uploads/avatar.jpg
配置主页文章显示“阅读全文”
有两种方式,这里只介绍hexo建议采用的方式
在每篇md文章合适位置加入
<!-- more -->
博客文章字数统计
npm install hexo-word-counter
hexo clean
修改主题配置文件
symbols_count_time:
separated_meta: true
item_text_post: true
item_text_total: true
增加自定义页面
这里以增加“关于”页面为例
hexo new page about
修改blog-hexo-new-next/source/about/index.md文件
---
title: 关于我
date: 2020-08-07 15:43:14
---
编辑主题配置文件，取消about前面的注释，如果没有也可以自己添加
menu:
about: /about/ || fa fa-user
使用md写一篇自己的介绍
配置百度推送
在 https://ziyuan.baidu.com/property/index 上面添加站点
选择验证模式HTML Tag
修改主题配置文件
baidu_site_verification: xxxxxx(百度页面上面拷贝下来)
baidu_push: true
部署到gitee，更新后，再在百度点击验证，如果不成功，可以看一下网页源代码是否存在
<meta name="baidu-site-verification" content="xxxxxx">
tag plugins
自定义标签，只在next下起作用
{% note info %}
####### note标签使用手册
note标签使用手册 to 手册
{% endnote %}
正常文本 {% label @缺省label %} {% label primary@带样式的label %} 手册
<div>{% btn #,, home fa-5x %}{% btn #,, home fa-5x %}{% btn https://theme-next.js.org/docs/tag-plugins/button.html,手册, home fa-lg,tag button 手册%}</div>
{% tabs demotab, 1 %}
tabs手册
Any content (support inline tags too). pdf
pdf手册
{% pdf /uploads/license.pdf 300px %}
{% endtabs %}
饼图
{% mermaid pie title "最好的编程语言" %}
"php" : 90
"其他语言" : 10
{% endmermaid %}
时序图
{% mermaid sequenceDiagram %}
黄蓉 ->> 郭靖: 傻姑，我喜欢你@
郭靖 -->> 欧阳克: 咳咳，你觉得怎么样?
郭靖 -->> 黄蓉: 我能不能问问我师父先。
黄蓉 ->> 郭靖: 问个屁
Note right of 郭靖: 郭靖想了
很长很长
时间。
黄蓉 -x 郭靖: 问个屁
欧阳克 ->> 黄蓉: 能不能考虑我先
黄蓉 -->> 黄蓉: 激烈的思想斗争
Note left of 黄蓉: 欧阳克
长得挺帅的。
黄蓉 ->> 欧阳克: 蛇岛有别墅吗
{% endmermaid %}
流程图
{% mermaid graph TD %}
start[/开始] -->|发起请求| server[API服务器]
server --> C{判断是哪个服务器}
C -->|One| D([服务器 1])
C -->|Two| E(服务器 2)
D <--> F[(数据库)]
D --> stop[\结束/]
E --> stop
{% endmermaid %}
状态图
{% mermaid stateDiagram %}
[] --> Still
Still --> []
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
{% endmermaid %}
甘特图
{% mermaid gantt %}
section 工作安排
已完成 :done, des1, 2020-01-01,2020-08-08
项目1 :active, des2, 2020-05-01,2020-08-13
单元1 : des3, 2020-06-01,2020-08-13
单元2 : des4, 2020-07-01,2020-08-13
{% endmermaid %}
时间轴图
{% mermaid journey %}
title 工作日
section 上班
喝茶: 5: 我
上楼: 3: 我
工作: 1: 我, 猫
section 回家
下楼: 5: 我
坐下: 3: 我
{% endmermaid %}
