从零开始搭建Hexo博客

发表于 更新于 分类于 阅读次数： 本文字数： 3.6k 阅读时长 ≈ 3 分钟

1. Hexo简介

引用官网的介绍：A fast, simple & powerful blog framework
Hexo是一款基于Node.js的静态博客框架，依赖少易于安装使用，可以方便的生成静态网页托管在GitHub上，是搭建博客的首选框架。

2. 环境搭建

基于Ubuntu20.04安装Hexo配置Next主题

2.1 安装Git

1
sudo apt-get install git

安装完成后进行配置

1
2
git config --global user.email "you@example.com"
git config --global user.name "Your Name"

2.2 安装Node.js

使用NVM（Node Version Manager）方式进行安装

1
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.2/install.sh | bash

安装完成后关闭终端重新打开

2.3 安装最新版本node

安装过程中可能会因为网络问题失败，可以尝试挂梯子,安装完成后更新自带npm

1
2
nvm install node
npm install npm -g

2.4 安装Hexo

安装过程中可能会因为网络问题失败，可以多重试几次或挂梯子

1
npm install -g hexo-cli

2.5 安装Next主题

Next主题是Hexo比较知名的第三方主题，极简风格，有相当多的使用者，维护也做得比较好
不过Next新旧版本的仓库地址不一样，目前最新的GitHub地址hexo-theme-next
Next主题安装比较简单，直接从仓库clone然后修改Hexo配置文件

1
2
cd blog
git clone https://github.com/next-theme/hexo-theme-next themes/next

修改Hexo配置文件_config.yml，将站点主题改为Next，修改如下

1
2
3
4
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

全部安装完成后的版本信息如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
jack@linux:~/blog/source/_posts$ hexo -v
INFO  Validating config
INFO  ==================================
  ███╗   ██╗███████╗██╗  ██╗████████╗
  ████╗  ██║██╔════╝╚██╗██╔╝╚══██╔══╝
  ██╔██╗ ██║█████╗   ╚███╔╝    ██║
  ██║╚██╗██║██╔══╝   ██╔██╗    ██║
  ██║ ╚████║███████╗██╔╝ ██╗   ██║
  ╚═╝  ╚═══╝╚══════╝╚═╝  ╚═╝   ╚═╝
========================================
NexT version 8.11.1
Documentation: https://theme-next.js.org
========================================
hexo: 5.4.2
hexo-cli: 4.3.0
os: linux 5.13.0-40-generic Ubuntu 20.04.4 LTS (Focal Fossa)
node: 18.2.0
v8: 10.1.124.8-node.13
uv: 1.43.0
zlib: 1.2.11
brotli: 1.0.9
ares: 1.18.1
modules: 108
nghttp2: 1.47.0
napi: 8
llhttp: 6.0.6
openssl: 3.0.3+quic
cldr: 41.0
icu: 71.1
tz: 2022a
unicode: 14.0
ngtcp2: 0.1.0-DEV
nghttp3: 0.1.0-DEV

2.6 初步运行Hexo进行验证

1
2
3
4
hexo init blog
cd blog
npm install
hexo server

运行之后可以通过 http://localhost:4000 进行访问

1
2
3
4
5
6
7
8
9
10
11
12
13
14
INFO  Validating config
INFO  ==================================
  ███╗   ██╗███████╗██╗  ██╗████████╗
  ████╗  ██║██╔════╝╚██╗██╔╝╚══██╔══╝
  ██╔██╗ ██║█████╗   ╚███╔╝    ██║
  ██║╚██╗██║██╔══╝   ██╔██╗    ██║
  ██║ ╚████║███████╗██╔╝ ██╗   ██║
  ╚═╝  ╚═══╝╚══════╝╚═╝  ╚═╝   ╚═╝
========================================
NexT version 8.11.1
Documentation: https://theme-next.js.org
========================================
INFO  Start processing
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

2.7 部署GitHub远程服务器

2.7.1 创建GitHub项目

在GitHub上注册账号，注册后上传ssh公钥，便于后续的部署操作
创建一个与你用户名对应的项目username.github.io，例如我创建的项目地址为https://github.com/JackHuang021/JackHuang021.github.io.git

2.7.2 进行部署

部署需要用到hexo deploy上传到GitHub仓库，这里需要下载部署插件，并修改hexo配置文件_config.yml，
我们很多的博客设置都可以在这个配置文件里面进行修改
首先安装Git部署插件

1
2
cd ~/blog
npm install hex-deployer-git --save

修改博客配置文件_config.yml，增加如下内容

1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repo: git@github.com:JackHuang021/JackHuang021.github.io.git
  branch: master

最后使用hexo d进行上传部署，现在访问username.github.io便可以看到博客页面了
后续更新博客设置或者文章的话需要再次进行上传部署hexo g -d

2.8 Hexo博客备份

Hexo在进行部署时，是将页面内容解析后放在.depoly_git中进行上传GitHub仓库，博客内文章源文件并未进行上传，所以还需要手动将这些文件进行手动上传。目前比较常用的方法是在原GitHub仓库建立一条分支，将这些文件上传到该分支。

1
2
3
4
5
6
7
8
cd blog 
git init 
git submodule add https://github.com/next-theme/hexo-theme-next.git themes/next
git add .
git commit -m "init blog backup"
git branch -m master hexo
git remote add origin git@github.com:JackHuang021/JackHuang021.github.io.git
git push -u origin hexo

3. 恢复Hexo博客

  1. 按照之前的步骤搭建Hexo环境
  2. clone之前备份的hexo分支内容git clone --recursive -b hexo git@github.com:JackHuang021/JackHuang021.github.io.git blog
  3. 下载npm依赖模块
1
2
cd blog
npm install
  1. clone master分支内容
1
2
cd blog
git clone git@github.com:JackHuang021/JackHuang021.github.io.git .deploy_git
  1. 正常更新、部署博客
1
2
3
hexo g
hexo s
hexo d

4. hexo更新

  1. 升级hexo-clinpm install -g hexo-cli
  2. hexo插件升级
1
2
3
4
npm install -g npm-check
npm-check
# 使用npm-check -u进行交互式的升级，选中所有hexo相关的插件
npm-check -u
  1. 更新next主题
1
2
cd themes/next
git pull
  1. 推送
1
2
3
hexo clean
hexo g
hexo d
  1. 将hexo推送到远程仓库