利用Hexo部署个人博客

Hexo 是一个生成静态博客的工具,基于Node。该文章默认您已经熟悉Node相关工具的使用。首先在全局安装hexo:

1
npm install -g hexo-cli

随后新建一个目录用于存放项目,进入目录,执行项目初始化操作

1
2
hexo init .
npm i

目录中的_config.yml文件为项目基础配置文件,建议修改的项目为

1
2
3
title: <站点标题>
language: zh-CN
url: https://<站点域名>

此时在目录下执行hexo server便可在本地预览博客了。

修改主题

Hexo默认的主题并不太好看,因此我们希望使用自己的主题。可以在Hexo的主题库中查找自己喜欢的主题。如果觉得预览图不太满足自己的需求,也可以尝试一下。一般来说,主题会提供丰富的自定义配置,如果还希望更加个性化,甚至可以直接修改模板代码。

点击主题的名称便可以查看该主题的仓库,其中会讲解这个主题的使用和配置方法。此处以本站使用的Fluid主题为例讲解。

在项目下安装主题包

1
npm install --save hexo-theme-fluid

然后在博客目录下创建 _config.fluid.yml,将主题的 _config.yml 内容复制进去。这样就可以修改这个自定义配置文件以覆盖项目的默认配置了。

修改博客配置文件 _config.yml中的 themefluid,使用该主题。

具体的配置在仓库中和文档有比较详细的阐述。

另外,如果希望通过修改模板代码来实现更高度的个性化,可以直接将主题仓库克隆到theme目录下并修改文件夹名称为 fluid,这样便可以直接修改其中的代码了。

文章撰写

完成配置后,在项目根目录执行

1
hexo new <title>

以创建一篇文章,其中title为文章标题,同时也是文件名。直接修改source/_posts目录下的新建文件便可以增加文章内容了。

项目部署

在项目根目录下执行

1
npm run build

即会在项目根目录下生成一个public文件夹,其中的文件是整个静态网站的内容。可以将此文件夹上传到静态网站托管服务上。另外,hexo也支持了自动化将编译后的内容上传到各种地方,这里以上传到git仓库为例。

安装 hexo-deployer-git

1
npm install hexo-deployer-git --save

在_config.yml中添加字段
1
2
3
4
deploy:
type: git
repo: <仓库url>
branch: master

注意,使用git的自动部署功能要求安装有git命令行工具,并且最好配置了全局账户(密钥或者密码),否则每次部署都会要求用户输入用户名和密码。

然后执行

1
2
hexo clean
hexo deploy

稍作等待之后,编译后文件就上传到了仓库中。

git仓库既可以直接利用Github Pages等功能直接提供服务,也可以再链接到AWS、腾讯云之类的其他服务,绑定域名后使用。