526互联

使用 Hexo 搭建个人博客并部署到云服务器

发布时间 2023-11-16 16:09:51作者: Cheyaoyao

目录

目前搭建博客的主流框架有 WordPress、VuePress、Hugo、Hexo 等等，我主要是感觉 Hexo 好看的主题比较多，所以就来折腾一下这个博客框架

1 整体流程

  1. 在本地运行 hexo deploy 命令，Hexo 会将生成的静态文件(hexo generate)推送到远程的 Git 仓库
  2. 在 Git 仓库中，配置一个钩子脚本，它会在接收到推送后执行——将最新的静态文件强制覆盖到指定的工作目录
  3. 在 Nginx 服务器中，配置访问根路径的请求指向该工作目录

2. 本地环境准备

2.1 安装 Node.js 和 Git

这两个我是很早就安装好了，网上也有大量的资料，我就不重复了，这里主要记录 Hexo 相关笔记

(1) 验证 Node.js是否安装成功，打开 cmd 输入node -v，出现版本信息，则 ok

C:\Users\gzl>node -v
v18.16.1

(2) 验证 Git 是否安装成功，打开 cmd 输入git --version，出现版本信息，则 ok

C:\Users\gzl>git --version
git version 2.39.0.windows.2

同时在文件夹中点击右键会出现 Git Bash Here

2.2 安装 Hexo

(1) 新建一个文件夹用来存储个人博客：E:\MyBlog

进入该文件夹，进入 Git Bash，输入npm install -g hexo-cli 将 Hexo 命令行工具安装到系统的全局环境中

gzl@gzl MINGW64 /e/MyBlog
$ npm install -g hexo-cli

(2) 待安装完毕，输入以下指令，将会新建一个 myblogs 文件夹，并且安装 Hexo 项目所需的依赖项

# 创建一个新的 Hexo 项目
$ hexo init myblogs
$ cd myblogs
# 安装 Hexo 项目所需的依赖项
$ npm install

最后，会在 myblogs 文件中生成如下文件：

(3) 继续在 Git Bash 中执行指令hexo server

$ hexo server

执行完毕后，打开本地浏览器，访问http://localhost:4000/，出现以下界面，说明第一步成功了

3. 服务端环境准备

3.1 Nginx 环境配置

3.1.1 安装 Nginx

依次执行以下指令

# 安装 nginx 依赖环境，遇到 yes 选 yes
yum install gcc-c++
yum install -y pcre pcre-devel
yum install -y zlib zlib-devel
yum install -y openssl openssl-devel

# 下载并解压 nginx 安装包
wget -c https://nginx.org/download/nginx-1.10.1.tar.gz 
tar -xvf nginx-1.10.1.tar.gz -C /usr/local

# 执行配置文件
cd /usr/local/nginx-1.10.1
./configure

# 编译并安装 nginx
make
make install

# 开放 80 端口
cd /usr/local/nginx
/sbin/iptables -I INPUT -p tcp --dport 80 -j ACCEPT

# 启动 nginx
cd sbin
./nginx

没有任何消息，代表启动成功，在浏览器访问公网ip:80就可以进入 nginx 页面了

如果需要停止 nginx 服务，执行./nginx -s stop

3.1.2 更改 Nginx 配置文件

需要将 Nginx 的配置文件中网站的根目录(root)指向 hexo 的部署目录，以及修改域名(server_name)为自己已备案的域名，如果没有，则填公网ip

所以，首先创建一个文件用来存放 hexo 的部署文件

mkdir -p /data/hexo

然后修改 nginx 配置文件

cd /usr/local/nginx/conf
vim nginx.conf
# 进入后，按 i 键进入编辑模式

修改server_name和root即可

server {
        listen       80;
        server_name  www.cheyaoyao.cn;

        location / {
            root   /data/hexo;
        }
        ...
}

修改完毕后按 Esc 键进入命令模式，再输入 :wq 保存并退出

3.2 Node.js 环境配置

安装 node.js，依次执行以下命令：

# 切换到根目录，安装 node.js
cd ~
curl -sL https://rpm.nodesource.com/setup_10.x | bash -
yum install -y nodejs

# 查看安装结果，打印对应版本号则安装成功
node -v
npm -v

3.3 Git 环境配置

3.3.1 安装 Git

依次执行以下命令：

# 安装，遇到 yes 选 yes
yum install git

# 查看版本号
git --version

3.3.2 创建 Git 用户

依次执行以下指令：

# 创建git用户
adduser git

# 修改git用户的权限
chmod 740 /etc/sudoers

# 进入 sudo 命令文件
vim /etc/sudoers

找到root ALL=(ALL) ALL，在下面添加git ALL=(ALL) ALL

继续执行以下指令

# 修改文件权限
chmod 400 /etc/sudoers

# 设置 git 用户的密码
sudo passwd git

3.3.3 配置 SSH 免密登录

由于是将本地的静态文件推送到服务器的 Git 仓库中，所以要配置 ssh 免密登录服务器

(1) 在服务端，依次执行以下指令：

# 切换到 git 用户
su git

# 在根目录创建.ssh文件夹，存放公钥
cd ~
mkdir .ssh

(2) 在本地计算机打开 Git Bash，执行以下指令

# 在本地生成公钥/私钥对
$ cd ~
$ cd .ssh
$ ssh-keygen

遇到系统询问，就按回车键。最后生成的公钥和秘钥会自动保存在C:\Users\gzl\.ssh目录下

(3) 给私钥设置权限，执行以下指令：

$ chmod 700 ~/.ssh
$ chmod 600 ~/.ssh/id_rsa

(4) 将本地的公钥(id_rsa.pub)上传到服务器的/home/git/.ssh目录下

(5) 新建authorized_keys文件，并拷贝公钥的内容到该文件中，依次执行以下指令：

cd ~/.ssh
cp id_rsa.pub authorized_keys
cat id_rsa.pub >> ~/.ssh/authorized_keys

# 设置权限
chmod 600 ~/.ssh/authorized_keys
chmod 700 ~/.ssh

# 确保 SSH 相关的文件和目录具有正确的 SELinux 安全标签
restorecon -Rv ~/.ssh

(6) 测试本地免密登录服务器

进入本地计算机的 Git Bash，输入：

$ ssh -v git@xxx.xxx.xxx.xxx（公网IP）

最后面会出现：

3.3.4 配置 Git 仓库

(1) 在服务器新建一个 Git 仓库，同时新建一个钩子文件

cd ~
git init --bare hexo.git
vi ~/hexo.git/hooks/post-receive

输入git --work-tree=/home/www/hexo --git-dir=/home/git/hexo.git checkout -f，保存并退出

(2) 授予钩子文件可执行权限

chmod +x ~/hexo.git/hooks/post-receive
cd ~
sudo chmod -R 777 /data/hexo

重启 ECS 实例，服务端配置完成

4. 部署 Hexo 博客到服务端 Git 仓库

(1) 在本地计算机打开 Hexo 项目，我用的 vscode，修改_config.yml文件中的deploy：

deploy:
  type: git
  repo: git@公网ip:/home/git/hexo.git
  branch: master

(2) 安装插件，hexo-deployer-git 和 hexo-server

# 用于将 Hexo 生成的静态文件推送到指定的 Git 仓库
npm install hexo-deployer-git --save

# 用于在本地启动一个 Hexo 服务器，方便在本地预览博客
npm install hexo-server

(3) 配置 Git 全局变量

回到 Git Bash，输入：

# email 和 name 随便填一个也可以
$ git config --global user.email "xxxxxxxxxx@xx.com"
$ git config --global user.name "xxx"

(4) 生成静态文件和发布博客

在 vscode 的终端中输入：

# 清除之前生成的静态文件
hexo clean

# 生成静态文件
hexo generate

# 部署到 Git 仓库
hexo deploy

至此，已经全部配置完毕了

如果在 nginx 中配置了域名的话，可以通过域名访问博客了，没配置也可以用公网ip访问

下一篇就研究怎么美化博客吧

5. Hexo 写作新文章并发布

(1) 在 vscode 中打开 Hexo 项目，打开终端，使用如下命令创建新文章

hexo new "title"

执行该命令，Hexo 会在/source/_posts目录下创建一篇新的文章

(2) Front-matter

Hexo 创建的文件中开头有一段配置信息：

这个叫做Front-matter，即前置信息，用于给 Hexo 渲染该 md 文档

配置项 意义
title 网页文章标题
date 文章创建如期
tags 文章标签

(3) 发布文章

随便编写点内容

在终端依次输入：

# 清除之前生成的静态文件
hexo clean

# 生成静态文件，hexo generate 的简写
hexo g

# 本地启动，hexo server 的简写
hexo s

可以在本地预览文章

最后部署到远程的 Git 仓库中

# 部署到 Git 仓库，hexo deploy 的简写
hexo d

稍微等一下，在浏览器访问域名，就可以看到了