提起博客，这似乎是一个需要氪金的工程，实不然。
我开始的理解（纯属臆想，不必纠结于价格）：博客=域名（at least 10￥）+代码（HTML、CSS、JavaScript...）+服务器（at least 3000￥）
但后来，当我看到Hexo这款神奇的开源的静态博客生成器，就彻底改变了我的想法。
网上有很多教程，但总找不到全面和有效的~~（本来Hexo的坑就多）~~，所以今天就和各位分享一下。
Tips:到[我的hexo博客](https://dgsyrc.github.io/2019/02/01/Hexo%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA%E8%AF%B4%E6%98%8E%E4%B9%A6%EF%BC%88%E6%8C%87%E5%8C%97%E4%B9%A6%EF%BC%89/#more)阅读可以帮助理解哦！
## 优点
- 应用markdown，易于编辑，博客前端自动生成无需搭建
- 能够像手机一样自由添加应用（即插件）
- 无需基础，只要你对代码敏感就好
## 缺点：
- 博客访问用的文件生成的速度和上传博客的速度跟电脑配置有关，一般较慢
- 博客源文件（配置好）占用你的硬盘内存较大，一般接近1G或以上
## 材料/工具:
- 一个[github](https://www.github.com)账号
- [git](https://git-scm.com/)
- [node.js](https://nodejs.org/en/)
安装完成后即可进入下一步。
## 基础配置:
### 本地：
本步骤时间较长，请耐心等待。
在本地创建一个新的文件夹（必须为新的/空的），名字自行定义。
打开文件夹后鼠标右键打开Git Bash。
输入`npm install -g hexo`下载Hexo
输入`hexo init`安装Hexo（此时文件夹下会陆续出现文件/文件夹）
输入`npm install`安装必要配置包
输入`hexo s`启动Hexo，打开浏览器输入地址`localhost:4000`查看
### 云端：
在github上新建存储库`你的github用户名.github.io`
进入存储库后，打开这里：
找到这行并修改成如下：
在Git Bash中输入`ssh-keygen`生成SSH密钥，并按三次回车，随后用记事本打开`C:\Users\Administrator\.ssh\id_rsa.pub`（本目录因电脑而异，大部分相同），把内容复制下来，打开`https://github.com/settings/keys`,新建一个SSH Key，粘贴key项目内（title随便填），最后按下add SSh key。
回到Git Bash，输入`ssh -T
[email protected]`,若显示`Hi!xxxx`的字眼，则代表成功。
接下来输入`npm install hexo-deployer-git --save`安装上传工具deployer
打开文件夹根目录下的`_config.yml`，找到如下部分并按要求修改：
**注意：该配置项`:`后要有两个空格（当时就把我坑到了）**
```yml
deploy:
type: git
repository:
[email protected]:你的github用户名/你的github用户名.github.io.git
branch: master
```
输入`hexo g`生成静态博客文件
输入`hexo d`上传文件至github
若是首次上传，会失败，会有以下提示：
```
git config --global user.name "yourname"
git config --global user.email "
[email protected]"
```
将这两行指令分别复制并将`yorname``
[email protected]`分别替换成你的github用户名与注册邮箱，重新粘贴至Git Bash即可。
## 博客配置：
终于到~~最复杂~~的环节了，但其实认真读一遍说明你就会感到豁然开朗。
我这里就只介绍NexT主题（V6.7.0）中的Gemini风格的配置，同主题不同风格注意`_config.yml`中的设置限制（基本没有限制），其他主题参阅[官网](https://hexo.io/themes/)（其实大都相似）
以下所有步骤均建议配置完成后输入`hexo s`启动本地浏览，进入`localhost:4000`验证。
### 主题安装：
下载[NexT主题（V6.7.0）](https://github.com/theme-next/hexo-theme-next/archive/v6.7.0.zip)
把压缩包直接解压到博客根目录下的theme文件夹内：
打开博客根目录下的`_config.yml`，找到这行并修改成如下：
```yml
theme: hexo-theme-next-6.7.0
```
### 首页标题/名字/语言设置
打开博客根目录下的`_config.yml`.
其它语言参照`/theme/languages/`下的语言配置文件~~（可魔改）~~
例子：
```yml
# 标题
title: YRC的博客
#小标题
subtitle: Nothing is impossible！
description:
keywords:
# 名字
author: YRC
# 语言
language: zh-CN
# 时区（不建议使用）
timezone:
```
### 博客图标：
```yml
favicon:
# 网站图标-放在主题目录下/source/images/,按照你的图标名修改以下两行即可
small: /images/favicon-16x16-next.png
medium: /images/favicon-32x32-next.png
```
### 目录：
#### 主目录：
按个人所需使用，每行设置前加#的为不显示。
home 主页
about 关于
tags 标签（配置在下文会提到）
archives 归档
其他的项目不建议~~小白~~使用（因为真的没什么用）
若要添加新的选项，按照`name: /(在博客根目录下source文件夹下的地址) || 图标`,并在Git Bash输入`hexo new page "about"`新建页面，在`/soure/about/index.md`内即可编辑
图标的名字参照[官网](https://fontawesome.com/icons?d=gallery)
```yml
menu:
# 目录
home: / || home
about: /about/ || user
tags: /tags/ || tags
# categories: /categories/ || th
archives: /archives/ || archive
# schedule: /schedule/ || calendar
# sitemap: /sitemap.xml || sitemap
# commonweal: 404.html || false
# 加#号的用处不大，在此不赘述（且要安装插件）
```
#### 文章内部目录栏
```yml
toc:
# 是否生成文章目录
enable: true
# 目录是否自动添加序号
number: true
# 目录中的字符长度若大于目录栏宽度，多余的字符则放下一行，否则多余字符以省略号代替
wrap: false
# 默认即可
max_depth: 6
```
#### 目录栏的位置：
```yml
sidebar:
# 目录栏在博客中的位置 left | right (only for Pisces | Gemini).
position: left
#position: right
```
### 设置主题风格
```yml
# Schemes
# NexT主题下的四种风格
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini
```
### 社交网站
|| 后面的仍为图标名，参照上文中目录图标设置即可。
例子：
```yml
social:
# 社交网站
GitHub: https://github.com/dgsyrc || github
E-Mail: mailto:
[email protected] || envelope
luogu: https://www.luogu.org/space/show?uid=89910 || code
bilibili: http://space.bilibili.com/179225431? || tv
```
若不想显示图标，则将下面这行设置为`false`.
```
social_icons:
# 不显示图标
enable: false
# 只显示图标
icons_only: false
```
### 友情链接
```yml
# 标题前图标
links_icon: link
# 标题
links_title: 友情链接(部分需翻墙)
# 排版设置（不加#为设置项，加#不设置，二者不可~~得兼~~同时设置）
#一行一个
#links_layout: block
#一行多个
links_layout: inline
# 链接
links:
cloudflare: https://dash.cloudflare.com
freenom: https://my.freenom.com/clientarea.php
Minecraft Wiki: https://minecraft-zh.gamepedia.com/Minecraft_Wiki
Pixiv: https://www.pixiv.net
```
### 头像
```yml
# 头像
avatar:
# 头像地址（以根目录下的source为根目录的地址，而非主题下的source）
url: /images/main.png
# 头像圆形
rounded: true
# 0不显示头像，1显示
opacity: 1
# 头像旋转
rotated: true
```
### 返回顶部按钮：
找到如下代码：
`b2t: true`为显示，`b2t: false`为不显示。
```yml
# 返回顶部按钮
b2t: true
# 显示阅读百分比
scrollpercent: true
```
### 阅读全文按钮：
`enable: true`为主页显示全文，`enable: false`为主页不显示全文。
```
auto_excerpt:
enable: true
# 主页每篇文章显示字数
length: 150
# 在主页是否显示阅读全文按钮
read_more_btn: true
```
### 文章字数/阅读时长统计
在Git Bash中输入以下指令，安装插件。
```
npm install hexo-symbols-count-time --save
```
修改如下代码：
博客目录下`_config.yml`：
```
symbols_count_time:
#文章内是否显示
symbols: true
time: true
# 网页底部是否显示
total_symbols: true
total_time: true
```
主题目录下`_config.yml`：
```yml
# 博客字数，阅读时长统计
symbols_count_time:
separated_meta: true
item_text_post: true
item_text_total: false
awl: 4
wpm: 275
```
### 代码复制按钮
```
codeblock:
border_radius:
copy_button:
# 是否启用
enable: true
# 是否提示复制成功
show_result: true
```
### 使用$Latex$
当`per_page: true`时，只有博文中有`mathjax: true`时才启用，若为`false`,则每篇文章都启用。
```yml
math:
# 是否启用
enable: true
per_page: true
# 推荐使用mathjax
engine: mathjax
#engine: katex
```
### 分享
页面左边浮动按钮：
文章底部：
在Git Bash中输入`git clone https://github.com/theme-next/theme-next-needmoreshare2 source/lib/needsharebutton`安装插件。
修改如下配置：
```yml
needmoreshare2:
# 添加分享按钮
enable: true
postbottom:
# 每一篇文章底部显示按钮
enable: true
options:
iconStyle: box
boxForm: horizontal
position: bottomCenter
networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook
float:
# 页面左边显示浮动按钮
enable: true
options:
iconStyle: box
boxForm: horizontal
position: middleRight
networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook
```
### 访问统计
文章访问统计：
博客访问统计：
修改如下设置即可：
```yml
busuanzi_count:
enable: true
total_visitors: true
total_visitors_icon: user
total_views: true
total_views_icon: eye
post_views: true
post_views_icon: eye
```
### 站内搜索
在Git Bash中输入`npm install hexo-generator-searchdb --save`安装插件。
在博客目录下的`_config.yml`添加如下设置：
```
search:
path: search.xml
field: post
format: html
limit: 10000
```
在theme目录下的`_config.yml`修改如下设置：
```
# 站内搜索
local_search:
enable: true
top_n_per_article: 1
unescape: false
```
### 书签
添加书签后，访客每次访问文章时会返回到上次阅读的那行。
在Git Bash中输入`git clone https://github.com/theme-next/theme-next-bookmark.git source/lib/bookmark`安装插件。
```
# 书签
bookmark:
enable: true
# if auto
# - save the reading position when closing the page
# - or clicking the bookmark-icon
# if manual, only save it by clicking the bookmark-icon
save: auto
```
### 标签
在Git Bash中输入`hexo new page "tags"`新建Tag页面。
然后向`source\tags\index.md`中添加一行：
```
type: "tags"
```
文章标签的设置如下：
```
tags:
- 标签1
- 标签2
- 标签3
```
### 背景
打开themes目录下`\source\css\_custom\custom.styl`
添加如下代码:
```
body {
background-image:url(/images/background2.jpg);
background-repeat: no-repeat;
background-attachment:fixed;
background-size: cover;
}
.main-inner {
opacity: 0.9;
}
```
`background-image:url`:背景链接，目录默认为主题目录下的`\soure\images\`
`background-repeat: no-repeat`:背景图不重复出现
`background-size: cover`:平铺
`opacity:`:不透明度
### 鼠标点击显示爱心图案
下载js：
将该js放在主题根目录下`\source\js\src`内。
打开`layout/_layout.swig`,在文件末尾添加一行：
```
<script type="text/javascript" src="/js/src/love.js"></script>
```
## 文章的撰写
### 新建文章
在Git Bash输入`hexo new "文章名"`新建文章
如想在文中引用博客内图片，则需修改博客目录下的`_config.yml`的这一行（为true即可），以便以后使用`hexo new`命令时自动生成文件夹，需引用的图片需放在博客根目录下的`\source\_post\文章名\`内：
```yml
post_asset_folder: true
```
除了可以使用命令添加文章外，还可以直接在`_post`文件夹内直接新建`文章名.md`与文件夹`文章名`，但是`文章名.md`内必须按照以下格式：
```
---
title: 文章名
mathjax: true（此行可去）
date: 2019-02-01 12:30:42（可自定义，当然设为1000-01-01 00:00:00是没有问题的）
tags:
- Tag1
- Tag2
---
```
### 撰写
打开`\source\_post\文章名.md`
按照markdown的语法写即可。
## 完成
部分效果可参考[我的hexo博客](https://dgsyrc.github.io)