hexo搭建博客并部署到云服务器

本地系统环境：Ubuntu 20.04.5 LTS

Node版本：18.15

Git版本：2.25.1

一个github账号

系统环境不同，根据自己的系统来操作就行，步骤差不多。

Node、Git的版本选择长期稳定支持的新版本就行。

云服务器和域名不是必须的，只是为了私有化更强。

相信看到这篇文章的大部分应该对这些东西都有基本的了解，准备性的东西就不罗嗦了。

安装Hexo：

全局安装Hexo，终端输入命令：sudo npm install hexo-cli -g。

安装成功后终端输入hexo -v，看到版本号表示成功，本次版本hexo-cli: 4.3.0。

配置仓库

在github中新建一个仓库，名称必须是用户名.github.io,这是用于托管博客，方便其他人访问博客。

为了以后的文件托管方便，可以通过ssh的方式连接，不需要每次手动输入密码，不会的自行解决。

初始化本地博客

在电脑中新建一个文件夹，名字随意（为了不出现莫名错误，不要有特殊符号或中文），这里取名为Blog。

在Blog目录下打开终端，输入hexo init初始化博客项目，没有异常将会生成如下重要文件夹或文件：

.
├── _config.yml // 博客配置文件
├── node_modules // 项目依赖包
├── scaffolds // 文章生成模板
├── source // 文章
├── themes // 主题

终端输入hexo g进行静态部署，终端输入hexo s启动服务器，在浏览器中输入localhost:4000访问，出现hexo的默认页面表示博客搭建成功。

到此，博客搭建成功，但还不能访问，需要部署到GitHub或自己的服务器上才能实现让他人访问。

将Hexo部署到GitHub

用编辑器打开Blog目录找到_config.yml 文件，找到deploy配置项,修改为如下内容：英文冒号，冒号后要加一个空格

deploy:
  type: 'git'
  repository: 'github仓库名'
  branch: main # 绑定的分支

光改配置还不够，需要安装git插件deploy-git，才能部署到github。

终端输入npm install hexo-deployer-git --save进行安装。

安装完成后，终端输入如下三条命令：

hexo clean #清除缓存文件和已经生成的静态文件
hexo g #生成网站静态文将到默认设置的public文件夹
hexo d #自动生成网站静态文件，并部署到指定仓库

hexo s # 本地部署

以上四个命令是经常用到的

至此，在浏览器中访问：https://xxxxx.gibhub.io就能访问博客了。

解析自定义域名

以腾讯云为例，进入域名控制台，进入域名解析页面，添加一条解析记录：

打开Blog/source目录，添加CNAME文件，在里面填上自己的域名，不需要带www。

在Blog目录中打开终端，hexo clean hexo g hexo d三条命令执行一遍，打开GitHub如果CNAME文件出现在项目中，点击Settings——> pages——>Custom Domain 输入解析的域名，不要带www，然后浏览器输入绑定的域名，能打开博客说明成功。

注意是在用户名.github.io的仓库中设置，不是主页设置

到此，自定义域名完成，可以通过自定义域名访问博客。

发布文章

发布文章可以使用两个命令新建.md的文件，命令可以二选一，但不支持手动新建：

hexo n "文章名"   # hexo new "文章名"

新建的文件默认在博客根目录的source/_posts中，默认会写入一些模板内容，修改模板在目录scaffolds/post中进行。

具体的设置看文档说明。

安装主题美化博客

Hexo主题很多，但使用方式都基本差不多，都是下载，然后应用。主题的配置涉及很多方面，具体的内容要翻主题文档。

这里以Butterfly为例：https://butterfly.js.org/posts/21cfbf15/#%E5%AE%89%E8%A3%9D

在博客根目录打开终端，输入git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly安装主题

也可以通过npm安装：npm install hexo-theme-butterfly

个人喜欢通过npm的方式安装

npm安装需要hexo5.0以上版本才支持，这种方式安装的主题在node_modules中，不在themes中。

升级方法：在主题目录下，运行 git pull

升级方法：在 根目录下，运行 npm update hexo-theme-butterfly

应用主题：修改根目录下的 _config.yml，把主题改为 butterfly

注意：该主题需要安装pug和stylus渲染器，安装命令：npm install hexo-renderer-pug hexo-renderer-stylus --save

为了方便升级，可以在根目录中创建文件_config.butterfly.yml，把主题目录中的_config.yml内容复制过去。

注意：是主题的yml不是根目录hexo的yml，仔细区分

所有有关butterfly的配置在新的_config.butterfly.yml中，它的优先级高于主题的优先级，并且会自动合并主题的不同配置。

改完后依次执行三件套部署本地，看是否配置成功，最终改好后再部署到服务器。

更具体的内容参考主题说明。

自动部署到云服务器

我用的轻量云服务器，操作系统是Ubuntu，其他服务器或者操作系统都类似。

前面在本地已经配置了将博客自动部署到github上，这里只需要在服务器上创建一个Git钩子，然后修改一下deploy配置即可。

服务器上创建Git钩子：

（1）登录服务器，创建一个git用户。（默认已经安装了Git）

# 创建一个名叫git的用户(名字自定义即可)
adduser git

（2）给 git 用户添加权限

#在根目录下的 home 文件夹下创建一个git文件夹
mkdir /home/git
#切换到创建好的git文件夹
cd /home/git
#创建 .ssh文件夹，里面主要用来放公钥
mkdir .ssh
#切换到.ssh文件夹并创建authorized_keys文件
cd .ssh
touch authorized_keys

ssh的配置能看到这里的基本都懂，这里就不多啰嗦

（3）初始化仓库

创建一个存放 git 仓库的文件夹：

mkdir /home/git/repos
cd /home/git/repos

#初始化一个裸仓库
git init --bare hexoBlog.git
#配置仓库的权限，让之前创建好的git用户能读写
chown -R git:git hexoBlog.git

这里必须注意，如果不给权限，后面的 git pull 将会报错，原因是没有权限写入。关于裸仓库和普通仓库的区别简单来说就是裸仓库看不到项目文件，普通仓库和你的项目目录一样，只是多了一个.git 文件夹。

（4）生成项目仓库

#创建我服务器上的项目目录hexoBlog
mkdir /home/git/repos/hexoBlog
#克隆仓库
git clone/home/git/repos/hexoBlog.git
#设置权限
chown -R git hexoBlog

注意：一定要路径，git 仓库是/home/git/repost, 项目仓库是 /home/git/repos/hexoBlog。

要是对路径不熟悉，可以直接在用户根目录中操作，不要嵌入太多层目录

（5）克隆仓库到本地

# 通过ip地址从配置好的线上仓库拉取下来
git clone git@IP.XXX:/home/git/repos/hexoBlog.git
# 如果有配置域名的话也可以通过域名拉取
git clone git@www.XXX.XXX:/home/git/repos/hexoBlog.git

因为公钥的原因，这里是不需要密码的，如果成功,电脑上会出现一个 hexoBlog 的文件夹，如果报错请检查后再进行下面的操作。

（6）上传代码（git push）

# 打开刚才克隆下来的本地仓库
cd hexoBlog 
# 创建README.md文件
touch README.md
git add .
git commit -m"创建README.md文件"
git push

不出意外已经正常上传了，如果报错请检查权限。

（7）添加git钩子

注意这是在云服务器中操作

#切换到这个目录
cd /home/git/repos/hexoBlog.git/hooks
# 生成post-receive文件
touch post-receive
# 使用vim编辑
vim post-receive

在 post-receive 文件里面粘贴：

#!/bin/sh
# 打印输出
echo '======上传代码到服务器======'
# 打开线上项目文件夹
cd /home/git/repos/hexoBlog
# 这个很重要，如果不取消的话将不能在cd的路径上进行git操作
unset GIT_DIR
git pull origin main
echo $(date) >> hook.log
echo '======代码更新完成======'

保存后给 post-receive 文件加上运行权限

chmod +x post-receive

（8）自动部署
在hexo博客根目录中修改_config.yml文件中的deploy选项如下：

deploy:
  type: git
  repo: git@IP地址:/home/git/repos/hexoBlog.git
  branch: main

到此，只需要在终端输入hexo d就可以将本地博客推送到服务器中实现自动部署