Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

本文参考自 Hexo 官方文档：https://hexo.io/zh-cn/docs/

三种部署方式

本地安装 Hexo 相当简单，只需要先安装下列应用程序即可：

  • Node.js (Node.js 版本需不低于 10.13，建议使用 Node.js 12.0 及以上版本)
  • Git

如果您的电脑中已经安装上述必备程序，那么恭喜您！你可以直接跳过安装准备步骤。

安装准备

安装 Node.js

Node.js 为大多数平台提供了官方的 安装程序。对于中国大陆地区用户，可以前往 淘宝 Node.js 镜像 下载。

其它的安装方法：

  • Windows：通过 nvs（推荐）或者 nvm 安装。
  • Mac：使用 Homebrew 或 MacPorts 安装。
  • Linux（DEB/RPM-based）：从 NodeSource 安装。
  • 其它：使用相应的软件包管理器进行安装，可以参考由 Node.js 提供的 指导。

对于 Mac 和 Linux 同样建议使用 nvs 或者 nvm，以避免可能会出现的权限问题。

安装 Git

  • Windows：下载并安装 git.
  • Mac：使用 Homebrew, MacPorts 或者下载 安装程序。
  • Linux (Ubuntu, Debian)：sudo apt-get install git-core
  • Linux (Fedora, Red Hat, CentOS)：sudo yum install git-core

安装部署

所有必备的应用程序安装完成后，NPM 一键式安装 Hexo：

1
2
3
4
5
## 设置淘宝镜像源
npm config set registry https://registry.npm.taobao.org
## 一键安装 hexo
npm install -g hexo-cli
hexo -v

初始化 Hexo 博客：

1
2
3
4
## 本地创建一个目录用于存放博客
hexo init
hexo generate
hexo server

本地启动服务器。默认情况下，访问网址为： http://localhost:4000/。

如果已经成功在本地部署了 Hexo，为了方便的访问到自己的博客网站，就要考虑如何将 Hexo 部署到 Github Pages。

注册 Github

首先我们需要注册一个 Github 账户（免费），使用浏览器（Chrome，Firefox）打开 GitHub官网 点击 sign up 进行注册即可。

绑定 Github

在此步骤前，请确保 GitHub 的注册和 GIt 的安装，接下来就是本地使用 Git 来绑定我们的 Github 账户，为了方便操作一般都选择使用公钥免密登录的方式。

本地获取公钥

首先查看本机的公钥：

  • Linux 系统：~/.ssh
  • Mac 系统：~/.ssh
  • Windows 10 ：C:/Users/ASUS/.ssh

我的电脑是 macOS：

1
cat ~/.ssh/id_rsa.pub

将输出结果复制保存。

Github 绑定 SSH keys

打开 Github 官网，按照以下步骤操作：

  • 点击右上角头像，找到设置

  • 打开 SSH and GPG keys 选项

  • 新建 SSH key，输入公钥

添加完成后，本地进行测试：

1
ssh -T git@github.com

第一次连接测试需要输入 yes ，结果返回如下即代表成功：

1
2
Warning: Permanently added 'github.com' (ED25519) to the list of known hosts.
Hi pc-study! You've successfully authenticated, but GitHub does not provide shell access.

请确保 Git 已配置：

1
2
git config --global user.name "pc1107750981@163.com"
git config --global user.email "pc1107750981@163.com"

Github 克隆和提交

由于我们要将 Hexo 部署到 Github Pages，所以首先要在 Github 创建一个新的仓库，仓库名设置为：ps-study.github.io。

创建好仓库后，接下来就是将本地安装好的 Hexo 部署到 Github Pages 上。

首先打开 Hexo 目录下的 _config.yml 文件，修改 deploy 选项：

1
2
3
4
deploy:
  type: git
  repository: git@github.com:pc-study/pc-study.github.io.git  #你的仓库地址
  branch: main

接着回到 Blog 文件夹，使用 NPM 安装 Git 部署插件：

1
npm install hexo-deployer-git --save

安装完成后，将本地 Hexo 部署推送至 Github 上：

1
2
3
hexo clean
hexo generate
hexo deploy

执行完成后，打开 https://pc-study.github.io 即可访问。

最近买了个阿里云服务器，结合之前 Hexo 部署到 Github Pages 的经验，尝试将 Hexo 部署到了阿里云上。

搭建过程

本次个人博客大致的搭建步骤如下：

  • 购买阿里云服务器
  • 配置阿里云服务器
  • 服务端安装 Nodejs
  • 服务端安装 Git
  • 服务端安装 Nginx
  • 客户端安装 Hexo
  • 客户端配置免密登录
  • 服务端创建 Git 仓库
  • Hexo 主题配置

购买阿里云服务器

这个比较简单，会花钱就行，尽量找一个新注册的账号，这样可以花几十 money 就可以购买一年的阿里云服务器，例如：

嗯没错，就是很香，购买完之后简单配置一下就可以使用了，本文基于 CentOS7.9 系统搭建，所以大家要继续下去的话也只能选择 CentOS7.9 咯。

配置阿里云服务器

阿里云服务器的配置很简单，主要有：

  • 重置实例密码
  • 配置安全组策略

配置的步骤都很简单，基本就是几分钟的事。

重置实例密码：

配置安全组策略：

配置好之后，复制一下公网IP，就可以开始建站了。

服务端安装 Nodejs

在本地客户端使用 ssh 连接阿里云服务器公网IP：

1
ssh root@公网IP

一键式安装配置 Nodejs：

1
2
3
4
5
6
7
8
9
cd /tmp && wget https://nodejs.org/dist/v17.5.0/node-v17.5.0-linux-x64.tar.xz
tar xf node-v17.5.0-linux-x64.tar.xz
mv node-v17.5.0-linux-x64 /usr/local/node
ln -s /usr/local/node/bin/node /bin/node
ln -s /usr/local/node/bin/npm /bin/npm
echo 'export PATH=/usr/local/node/bin:$PATH' >> /etc/profile
source /etc/profile
node -v
npm -v

执行完就安装成功了。

服务端安装 Git

一键式安装 Git：

1
2
3
4
5
6
7
8
9
10
yum install -y curl-devel expat-devel gettext-devel openssl-devel zlib-devel gcc perl-ExtUtils-MakeMaker
cd /tmp && wget https://www.kernel.org/pub/software/scm/git/git-2.9.5.tar.gz
tar xf git-2.9.5.tar.gz
cd git-2.9.5 && make all prefix=/usr/local/git
make install prefix=/usr/local/git
echo 'export PATH=$PATH:/usr/local/git/bin' >> /etc/bashrc
source /etc/bashrc
git version
git config --global user.name "你的账号"
git config --global user.email "你的邮箱"

执行完就安装成功了，要注意的是客户端也需要安装一下 Git，图形化一直下一步就行。

服务端安装 Nginx

一键式安装 Nginx：

1
2
3
4
5
yum install -y gcc gcc-c++ pcre pcre-devel zlib zlib-devel openssl openssl-devel
cd /tmp && wget http://nginx.org/download/nginx-1.9.9.tar.gz
tar xf nginx-1.9.9.tar.gz
cd nginx-1.9.9 && ./configure
make && make install

配置 Nginx 服务：

1
2
3
4
5
6
7
8
9
10
## 创建 hexo 博客存放位置
mkdir /data/blog
## 修改 Nginx 配置文件
vi /usr/local/nginx/conf/nginx.conf

## 修改配置文件中以下几点
## 1、server_name，修改域名或ip
server_name  服务器公网IP;
## 2、root index.html，修改为 hexo 博客存放的位置
root /data/blog

打开 Nginx 服务：

1
2
3
cd /usr/local/nginx/sbin
# 启动 nginx
./nginx

至此 Nginx 也安装完成。

客户端安装 Hexo

Hexo 也是一键式安装，安装前，设置一下 npm 源：

1
2
3
4
npm config set registry https://registry.npm.taobao.org
## 安装 hexo
npm install -g hexo-cli
hexo -v

本地客户端创建 Hexo 博客目录并初始化启动博客：

1
2
3
4
## 本地创建一个目录用于存放博客
hexo init
hexo g
hexo s

启动之后本地浏览器 localhost:4000 访问一下是否成功。

配置免密登录

配置本地客户端与阿里云服务器端的 ssh 免密登录，方便上传仓库时一键式上传。

在本地客户端生成并上传公共密钥：

1
2
3
4
5
6
## 执行完之后一直回车就行
ssh-keygen
## 上传公共密钥到阿里云服务器
ssh-copy-id root@阿里云公网IP
## 测试是否已免密
ssh root@阿里云公网IP

如果无需密码即可登录，说明已经配置完成。

服务端创建 Git 仓库

服务器上创建一个 Git 仓库，该仓库中新建一个 post-receive 钩子文件。

1
2
3
4
5
6
7
8
cd ~
git init --bare hexo.git
vi ~/hexo.git/hooks/post-receive
## 填写以下内容，其中的--work-tree 为 hexo 博客目录
git --work-tree=/data/blog --git-dir=/root/hexo.git checkout -f
## 授予钩子文件可执行权限
chmod +x ~/hexo.git/hooks/post-receive
chmod -R 777 /data/blog

至此，Git 仓库创建并配置完成，对应的本地客户端也需要配置一下！

在本地计算机 hexo 的工程目录下，找到 _config.yml，对 deploy 参数进行修改，如下图所示

1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repo: root@公网IP:/root/hexo.git
  branch: master

在本地计算机安装插件: hexo-deployer-git 和 hexo-server，插件的作用分别是使用Git自动部署，和hexo本地简单的服务器：

1
2
3
4
5
6
7
8
9
npm install hexo-deployer-git --save
npm install hexo-server
## 配置全局变量
git config --global user.name "你的账号"
git config --global user.email "你的邮箱"
## 生成发布 Hexo 博客
hexo clean
hexo generate
hexo deploy

此时，便可以通过浏览器访问 http://阿里云公网IP 进入 hexo 我的博客主页了。

通过以上3种方式部署 Hexo 博客之后，就拥有了一个最简单的个人博客网站了，下面讲讲博客的简单初始化。

修改网站关键信息

Hexo 初始化后，博客网站有一些关键信息是默认的，需要修改为我们自己的信息。

网站资料

修改网站各种资料，例如标题、副标题和邮箱等个人资料，请修改博客根目录的站点配置文件 _config.yml：

1
2
3
4
5
6
7
8
9
10
11
12
# Site
title: Lucifer三思而后行
subtitle: 'Lucifer三思而后行'
description: ''
keywords:
author: 三笠ぃ
language: zh-CN
timezone: ''

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: https://pc-study.github.io/

导航菜单

修改主题配置文件 _config.butterfly.yml：

1
2
3
4
5
6
7
8
9
10
menu:
  首页: / || fas fa-home
  归档: /archives/ || fas fa-archive
  标签: /tags/ || fas fa-tags
  分类: /categories/ || fas fa-folder-open
  # List||fas fa-list:
  #   Music: /music/ || fas fa-music
  #   Movie: /movies/ || fas fa-video
  友链: /link/ || fas fa-link
  关于我: /about/ || fas fa-heart

博客关键页面生成

博客有一些关键页面需要手动生成。

标签页

进入 Hexo 博客的根目录，执行：

1
hexo new page tags

打开 source/tags/index.md 文件，修改如下：

1
2
3
4
5
---
title: 标签
date: 2022-03-11 12:53:45
type: "tags"
---

分类页

进入 Hexo 博客的根目录，执行：

1
hexo new page categories

打开 source/categories/index.md 文件，修改如下：

1
2
3
4
5
---
title: 分类
date: 2022-03-11 12:56:06
type: "categories"
---

友情链接

进入 Hexo 博客的根目录，执行：

1
hexo new page link

打开 source/link/index.md 文件，修改如下：

1
2
3
4
5
---
title: 友情链接
date: 2022-03-11 12:57:48
type: "link"
---

关于我

进入 Hexo 博客的根目录，执行：

1
hexo new page about

打开 source/about-me/index.md 文件，修改如下：

1
2
3
4
5
---
title: 关于作者
date: 2022-03-11 13:01:21
type: "about"
---

至此，简单的 Hexo 博客框架就完成搭建了，至于更多的美化可以参考：

Butterfly 主题美化合集