hexo 搭建个人博客
使用 hexo 框架自动生成静态页面，不用自己写页面文件，方便快捷
一. 前言
如果不想麻烦，可以直接使用 博客园 或者 CSDN 当作自己的博客，博客园里也可以自定义自己的页面。之前曾用 hexo 在服务器上部署自己的个人博客，但是逐渐发现，好像还不如用 博客园，所以如果在看到这段话之后还想继续使用 hexo 来部署自己的博客的时候，可以继续往下看，如果嫌麻烦，博客园是个不错的选择。
1. 环境
本地环境：Arch Linux Kernel: Linux 5.16.1-arch1-1
- guyan 是本地用户名，/home/guyan/
服务器环境：Fedora 34 (Thirty Four) Linux 5.13.12-200.fc34.x86_64
Web 服务器：nginx/1.20.2
hexo ：hexo-cli: 4.3.0
2. 步骤概述
第一步当然是连接自己的服务器，至于如何连接服务器，Linux 和 MacOS 系统可以直接终端使用 SSH 命令连接，Window 可以尝试使用 Xshell 或这 宝塔。
nginx 是个 Web服务器，简单说就是有这个东西，可以让其它人可以看到服务器上的网页。
hexo 是一个生成博客页面的框架，可以在本地编辑 Markdown 文件，上传到服务器之后可以自动生成静态页面，不用自己写静态页面，而专注创作。
使用 hexo 部署个人博客有两种方式，一是在本地部署 hexo，在本地编辑文章、生成静态页面，然后将静态页面的 html 文件通过 git 推送到服务器，服务器上只需对 nginx 的配置文件稍作修改就可以完成部署。第二种是在服务器上部署 hexo，可以在本地编辑文章后粘贴到命令行窗口，然后通过命令生成静态页面。两种方式没有什么优劣的说法，考虑自己的情况选择就行。
二. 服务器部署 hexo
1. 简述
在服务器部署 hexo，实现部署个人博客
先安装 nginx，然后安装 Node.js( node.js 为 hexo 运行的必需品，版本需不低于 10.13，建议使用 Node.js 12.0 及以上版本)，然后部署 hexo，最后修改一下 nginx 的配置文件，让 nginx 向外展示的地址为博客的网页文件位置即可。
2. 步骤
2.1 安装 nginx
yum 软件库里有 nginx 的软件包，可以直接安装
# 连接服务器，在服务器上进行操作
yum install nginx
# 启动 nginx
nginx
# 查看 nginx 是否已经启动
netstat -ntlp
### 显示信息(已删除部分显示信息)，可以看到 80 端口正在被 nginx 使用
tcp6 0 :::80 9195/nginx: master
一些关于 nginx 的其它操作，可能会用到
# 查看 nginx 的版本
nginx -V
# 快速停止和关闭 Nginx
nginx -s stop
# 正常停止或关闭 Nginx
nginx -s quit
# 配置文件修改重新加载
nginx -s reload
此时，在浏览器上输入服务器的公网 IP，就可以看到 nginx 的欢迎页面，也是验证 nginx 安装成功并可正常运行的一种方式
2.2 安装 Node.js
因为 Fedora 的软件库没有收录 node.js，所以需要自己下载相应的软件。
node.js 的 官网网址
我在部署的时候下载的是：https://nodejs.org/dist/v16.14.0/node-v16.14.0-linux-x64.tar.xz
# 选个合适的位置下载，/usr/local 是个好位置，这个软件包我下载在了这个位置
wget https://nodejs.org/dist/v16.14.0/node-v16.14.0-linux-x64.tar.xz
# 解压
tar -xvf node-v16.14.0-linux-x64.tar.xz
# 验证，如果是wget下载安装，有时不会自动创建软链接
node -v
npm -v
# 如果验证时发现链接没有被创建，创建它
ln -s /usr/local/node-v16.14.0-linux-x64/bin/node /usr/local/bin/node
ln -s /usr/local/node-v16.14.0-linux-x64/bin/npm /usr/local/bin/npm
#重复验证步骤，当看到出现版本信息即表示完成安装
一些关于 Node.js 的其它操作，有兴趣可以看看，不看也可以
# npm 换源，有时候 npm 下载慢，可以尝试下面的换源操作
# 安装淘宝镜像源，注意：-g 是全局指令，需要 root 权限，否则失败
npm install -g cnpm --registry=https://registry.npm.taobao.org
npm config set registry https://registry.npm.taobao.org
# 验证源镜像是否被更换
npm get registry
# 验证是否可以使用 cnpm 命令
cnpm -v
# 若系统提示无 cnpm 指令,可能为软链接没有创建，创建它
ln -s /usr/local/node-v16.14.0-linux-x64/bin/cnpm /usr/local/bin/cnpm
2.3 安装 hexo
yum 软件库里有这个软件包，下载安装比较方便
#安装 hexo,注意：-g 为全局指令，需要 root 权限，以后 -g 不再赘述
npm install -g hexo-cli
#验证安装
hexo --version
接下来需要使用 hexo 初始化一个博客目录，通常选择的位置在 /usr/local 下，如果选择其它位置，nginx 可能没有访问权限，查看网页的时候可能会出现 405，关于如何使用 hexo，可以到 hexo 官网看看这份文档，比较齐全，可以到里面看一下文档结构，文章的最后 四. 一些小建议 那里有 hexo 的基本操作
# 创建一个博客目录，待会用 hexo 初始化
cd /usr/local
mkdir blog
# 初始化
hexo init blog
# 在 blog 目录中安装 npm
cd blog
npm install
### 注意：绝大部分 hexo 命令都要进入到 ../blog 目录中才能使用
# 生成静态页面
hexo g
2.4 最后一步
在上面已经部署好了 hexo，现在只需要修改 nginx 的配置文件，就可以在浏览器上看到自己的页面了
进入到 ../blog/public，这里是所有网页的静态文件的存放位置，nginx 需要指向这个文件夹，才能再浏览器的网页上显示出博客网页。
# 如果是通过 yum 安装的 nginx，可以在 /etc/nginx 看到 nginx 的配置文件 nginx.conf
cd /etc/nginx
vim nginx.conf
### 修改内容
http {
...
...
server {
listen 80;
listen [::]:80;
#将下面的地址换成你的公网 IP ，如果你已经申请了域名，可以换成域名
server_name 112.74.80.232;
#server_name guyan.wang
root /usr/local/blog/public; # 指向博客网页文件夹
#root /usr/local/gitBlog;
}
...
...
}
修改配置文件之后要重新加载，直接启停就行
# 停止 nginx 服务
nginx -s stop
# 开启 nginx 服务
nginx
# 重新加载 nginx 服务
nginx -s reload
最后再浏览器输入服务器的公网 IP 就可以看到刚刚部署的 hexo 初始博客的界面了
2.5 美化
hexo 有众多的主题，可以到官网选择合眼缘的主题
温馨提示：在选择主题时，最好选那些有详细说明文档的主题，否则最后想改网页展示的内容都不知道在哪里改
这里推荐我在用的 fluid
三. git 推送方式部署个人博客
1. 简述
git 推送方式和上面的第一种方式有点差别，hexo 是部署在本机上的，只是多了个推送步骤
先在服务器上安装好 nginx，然后在 本地安装 hexo，让本地的 hexo 生成静态页面之后，将静态页面的文件推送到 github/gitee 上，然后服务器通过 git 拉取 github/gitee 上静态页面文件，最后也是修改 nginx 的配置文件。
emmmmm，因为我本机的电脑系统为 Linux，所以如果你的系统是 Windows，那就.......去看别的教程，或者不选择这种方式
2. 步骤
2.1 安装 nginx
在服务器上安装 nginx 的操作和上一个没有任何区别
# 连接服务器，在服务器上进行操作
yum install nginx
# 启动 nginx
nginx
# 查看 nginx 是否已经启动
netstat -ntlp
### 显示信息(已删除部分显示信息)，可以看到 80 端口正在被 nginx 使用
tcp6 0 :::80 9195/nginx: master
如果需要换源，请看前面的教程
2.2 安装 git
服务器和本机都要安装 git
# Archlinux 安装 git
pacman -S git
# 其他Linux 安装 git
yum -y install git-core
#如果是首次使用 git,建议运行
git config --global user.name "username" #gitee用户名
git config --global user.email "email@***" #邮箱
2.3 安装 Node.js
本地安装 Node.js
# 安装node.js
# Archlinux 安装nodej
sudo pacman -S nodejs npm
# 其它Linux安装 node.js ，这类软件适合存放位置：/usr/local
# 请前往node.js官网获取最新版 LTS 下载链接，更新下方链接
wget https://nodejs.org/dist/v16.14.0/node-v16.14.0-linux-x64.tar.xz
tar -xvf node-v16.14.0-linux-x64.tar.xz
#验证，如果是wget下载安装，有时不会自动创建软链接
node -v
npm -v
#如果验证时发现链接没有被创建，创建它
ln -s /usr/local/node-v16.14.0-linux-x64/bin/node /usr/local/bin/node
ln -s /usr/local/node-v16.14.0-linux-x64/bin/npm /usr/local/bin/npm
#重复验证步骤
如果想要换源，可以查看前面的教程
2.4 安装 Hexo
本地安装 hexo，hexo 的基本操作请看文章最后四. 一些小建议
#安装 hexo,注意：-g 为全局指令，需要 root 权限，以后 -g 不再赘述
npm install -g hexo-cli
#验证安装
hexo --version
2.5 一个 gitee 账号
因为推送的时候要先从本地推送到 github/gitee 上，然后服务器从 github/gitee 上拉去项目文件，所以需要在 github/gitee 上做一些设置。 github 有时候太慢了，所以我选择了国内的 gitee，操作 github 和 gitee 的步骤是大致相同的。
注册了 gitee 账号之后，再创建一个代码仓库，仓库名建议与用户名同名（同名时，推送后可以通过 gitee 提供的托管服务将网站部署在 gitee上，但本次不会这么做，所以在这里是否同名没有太大关系）
我的 gitee 仓库地址是：https://gitee.com/guaynDragon/guyanDragon.git
此时，要安装的东西和基础的准备工作做完了，接下来是将上面各部分关联起来，使它们形成一个实体
2.6 联系
现在，按照 本地 =》gitee =》服务器 的顺序将它们关联起来。
- 本地
# 在 本地 选个合适的位置创建 gitBlog 目录，我在这里创建 /home/guyan/gitBlog
mkdir /home/guyan/gitBlog
# 使用 hexo 初始化这个目录
cd /home/guyan/gitBlog
hexo init
hexo g # 生成基本的网页文件
# 因为使用推送方式，所以还需要安装属于 hexo 的一个推送插件，方便推送,如果有换源，这里可以用 cnpm
npm install hexo-deployer-git --save
# 修改配置文件，设置推送的地址为 gitee 仓库的位置
vim /home/guyan/gitBlog/_config.yml
### 修改内容
deploy:
type: 'git' # 指定 git 推送
#推送地址，复制仓库地址
repo: https://gitee.com/guaynDragon/guyanDragon.git
branch: master #推送分支，默认为 master
# 尝试推送
hexo deploy
hexo d # 简写
# 如果出错，请检查地址信息和用户信息
# 可以检查 gitee 仓库内是否有网页文件，有就代表推送成功
- 服务器
gitee 创建完代码仓库之后就不用再作修改，gitee 的代码仓库在这里是一个中转站。
现在来对服务器进行操作
# 创建一个文件夹，存放待会拉取下来的项目文件，同样，这个位置最好选择 /usr/local
# 其它位置有 nginx 没有访问权限的可能
cd /usr/local
mkdir gitBlog
# 将 gitBlog 初始化为 git 仓库，为拉取项目作准备
git init gitBlog
# 进入 gitBlog，创建主分支
cd /usr/local/gitBlog
git checkout master
# 验证分支是否被创建
git branch -a
# 复制 gitee 仓库地址，本地仓库与远程仓库相关联，注意，这里用你自己的仓库地址，不要直接复制粘贴
git remote add origin https://gitee.com/guaynDragon/guaynDragon.git
# 使服务器上的分支与 gitee 上的分支相关联
git branch --set-upstream-to=origin/master master
# 拉取 gitee 上的网页文件到服务器
git pull
# 检查服务器 gitBlog 目录的文件结构是否与 gitee 仓库中的文件结构相同
# 接下来是对 nginx 的配置文件进行配置，让 nginx 指向 gitBlog
vim /etc/nginx/nginx.conf
### 修改内容
server {
listen 80;
listen [::]:80;
#将下面的地址换成你的公网 IP ，如果你已经申请了域名，可以换成域名
server_name 112.74.80.232;
#server_name guyan.wang
# 让 nginx 指向已经拉取了项目文件的 gitBlog
root /usr/local/gitBlog;
#root /usr/local/blog/public;
...
}
好，这个时候打开浏览器，输入服务器的公网 IP 就可以看到自己的博客页面了。
相关美化步骤就不写了，官网上的主题建议选个有详细配置文档的主题，选之前看看它的 README.md 文件
四. 一些小建议
1. hexo 基本操作
# 注意：绝大部分 hexo 命令都要进入到 ../blog 目录中才能使用
# 否则使用 hexo 命令时会显示出帮助
# 创建一篇新文章
hexo new "hexo test"
### 显示信息
INFO Validating config
INFO Created: ~/gitBlog/source/_posts/hexo-test.md
# 根据信息，编辑 hexo-test.md 文件即可修改这篇文章
vim ../gitBlog/source/_postss/hexo-test.md
# 尝试编辑内容后退出保存
# 根据文档和主题模板生成静态页面
hexo generate
hexo g #简写
# 运行服务器查看静态页面
hexo server
hexo s #简写
### 显示信息
...
INFO Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.
# 根据提示信息，在本地浏览网站 http://localhost:4000
# 清除 hexo g 生成的静态页面
hexo clean
hexo c # 简写
# 注意：hexo c 与 hexo g 通常配合前后使用，在原有静态页面进行更新的时候
# 删除文章
# 根据提示，只需删除 ../gitBlog/source/_postss/hexo-test.md 即可
rm -rf ../gitBlog/source/_postss/hexo-test.md
hexo clean
hexo generate
# 刷新浏览器查看文章是否被删除
hexo s
2. 主题美化
主题的选择上，官网的主题很多，多花点时间在选择上是可行的
影响选择的因素有：
-
好看，好用
-
详细的配置文件，方便后续配置
-
主题使用的插件是否已经过时，有些主题需要的插件已经过时了，安装很麻烦
3. 备案
想要网站被其它人通过浏览器的模糊搜索检索到，需要一个域名，当然，网站被点击的次数越多，被检索的时候排名就越靠前。
备案有 IP备案、域名备案、公安联网备案。IP 备案是服务器提供商自动帮我们备案的；域名需要备案，才具备被检索的可能，所以，购买域名前，请前往这个网站（http://域名.信息）查询这个域名的后缀能否被备案；公安联网备案，如果只是单纯的展示静态的页面，没有评论功能及其它交互、商业性质，可以直接在网上备案，否则不仅需要网上备案，还需要网站主题人拿备案时的所有纸质资料到申请地提交。
如果真的要备案的话，建议提前进行，因为整个备案时间流程比较长，大概在 15 天左右
