个人博客搭建记录(Hexo框架+NexT主题)

发表于 更新于 分类于
本文记录了使用Hexo框架搭配NexT主题搭建个人博客的过程。

0 写在前面

本文介绍了如何使用Hexo博客框架(NexT主题)编写博客并部署到线上

该工作分为两部分：本地编写(客户端)和线上部署(服务端)

  • “本地编写”指的是如何使用Hexo框架编写博客、写好的博客如何上传到Hexo中、如何在Hexo中编辑博客等
  • “线上部署”指的是如何把博客系统24小时运行起来、如何把写好的博客发布给其他人看等

1 本地编写

使用自己常用的电脑即可

1.1 前置环境

  • git
  • node.js

1.2 安装Hexo脚手架

参考https://hexo.io/zh-cn/docs/

1
npm install -g hexo-cli

执行该命令后，会在电脑上安装Hexo脚手架工具，后续步骤使用hexo命令即可

1.3 创建博客工程

像写代码一样，新建一个工程，用于存放源码。

1
2
3
4
5
6
# 初始化mybolg工程，位于./myblog
hexo init myblog

# 进入工程目录并下载依赖
cd myblog
npm install

执行完上述命令后，myblog目录下内容如下：

1
2
3
4
5
6
7
8
myblog
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

1.4 安装NexT主题

参考https://theme-next.js.org/docs

1
npm install hexo-theme-next@latest

1.5 修改配置

_config.yml文件为当前博客工程的配置文件

根据情况酌情修改

1
2
3
4
5
# 指定网站语言
language: zh-CN

# 指定主题
theme: next

1.6 编写文章

首先新建文章

1
hexo new "My First Blog"

此时./source/_posts目录下会自动创建My-First-Blog.md文件，在该文件中编写文章即可

1.7 本地运行

1
2
3
hexo s
# 或
hexo server

执行后控制台打印如下信息：

1
2
3
INFO  Validating config
INFO  Start processing
INFO  Hexo is running at http://localhost:4000/ . Press Ctrl+C to stop.

使用浏览器访问上述地址即可查看博客运行效果

2 线上部署

线上部署的本质是把public目录下的静态文件放到代理服务器上托管

生成静态文件：

1
2
3
hexo g
# 或
hexo generate

本文以Nginx作为代理服务器示范

2.1 前置环境

  • Nginx

2.2 手动部署

将public目录中的所有内容上传到服务器上的指定目录，如/var/www/blog，然后根据情况修改nginx配置文件，后续内容更新只需替换静态文件即可。

2.3 使用插件部署

每次手动替换显然太麻烦，可以使用部署插件简化操作，下面以hexo-deployer-git为例介绍该部署方式

2.3.1 安装hexo-deployer-git插件

1
npm install hexo-deployer-git --save

2.3.2 修改hexo配置文件

1
2
3
4
5
deploy:
  type: git
  # 其中your-server.ip指的是服务器的IP地址或域名，后面是服务器仓库的地址，介绍看后续步骤
  repo: your-server.ip:/var/repo/blog.git
  branch: master

2.3.3 生成公钥并认证

在客户端的任意位置执行以下命令

1
ssh-keygen -t rsa -b 4096

根据提示完成操作（可全部设置为空）

将~/.ssh/id_rsa.pub文件中的内容复制到服务器上的~/.ssh/authorized_keys文件中
（若不存在则先手动创建，并执行chmod 600 ~/.ssh/authorized_keys命令赋予当前用户的读写权限）

最后，将上述用户添加到www-data用户组，防止推送时报403错误

1
2
# 以tom为例
sudo usermod -aG tom www-data

2.3.4 服务器创建仓库

服务器需要创建一个裸仓库(Bare Repository)

裸仓库没有工作目录，专门用来存放版本历史和接收推送。我们把它放在/var/repo目录下：

1
2
3
sudo mkdir -p /var/repo
# 创建一个名为blog.git的裸仓库
sudo git init --bare /var/repo/blog.git

然后配置自动部署钩子(post-receive)，这是最关键的一步。当本地电脑执行git push把文件传过来后，这个钩子会自动把文件复制到你的网站根目录：

  • 创建文件：/var/repo/blog.git/hooks/post-receive
  • 在文件中粘贴以下两行内容（注意修改为你实际的网站根目录）：
1
2
#!/bin/bash
git --work-tree=/var/www/blog --git-dir=/var/repo/blog.git checkout -f

保存并退出。然后必须赋予这个钩子可执行权限：

1
sudo chmod +x /var/repo/blog.git/hooks/post-receive
  • 目录权限调整

确保你的部署账户对网站根目录和Git仓库拥有读写权限：

1
2
# 以tom为例
sudo chown -R tom:tom /var/repo/blog.git

2.3.5 部署

1
hexo clean && hexo d

3 网站备案

敬请期待…

4 持续集成(CI)

敬请期待…