基于Hexo实现一个静态的博客网站

原文首发：https://blog.liuzijian.com/post/8iu7g5e3r6y.html

1.初始化Hexo

Hexo是中国台湾开发者Charlie在2012年创建的一个开源项目，旨在提供一个简单、快速且易于扩展的静态博客生成器。

Hexo的设计理念是轻量级、易用和支持插件扩展，因此它非常适合那些有技术背景的用户，尤其是喜欢使用Markdown和Git进行内容管理的开发者。Hexo使用Node.js构建，并且支持通过主题和插件来扩展功能。

hexo基于Nodejs，所以首先要安装node和npm，最好连git一块安装上

1.全局安装hexo

npm install hexo -g

2.安装完成后，选择一个目录，执行以下命令，生成一个hexo脚手架

hexo init myblog

然后生成脚手架结构如下

myblog/

 ├── node_modules

 ├── scaffolds

 │── scripts

 ├── source/

 │    └── _posts

 │    └── _drafts

 ├── themes

 ├── _config.landscape.yml

 ├── _config.yml

 └── package.json

文件目录解释

node_modules不解释
scaffolds 存放博客内容模板的地方
source 资源文件夹，下面用来放建站需要的各种资源，包括markdown格式的博客原稿，图片，css，js，robots.txt等等
source/_posts 博客的"源码"，里面放我们写作的markdown文件，会被hexo引擎按照一定规则转换成html页面
source/_drafts 草稿，不适合放在_posts里面打包发布的草稿就放在这里
themes 存放第三方主题
_config.yml hexo配置文件
_config.landscape.yml 默认主题landscape的配置文件
package.json不解释

提前剧透：hexo使用过程中，还会经常用到两个文件夹

scripts hexo自定义脚本，在构建过程中执行，用于扩展hexo的功能或实现一些特殊需求
public 构建生成的静态网站，可以直接使用nginx root反代访问

3.启动调试服务器预览

修改_config.yml配置文件

# Site

title: '我的博客'

subtitle: '我的技术博客'

description: '分享一些实用的东西'

author: 'liuzijian'

language: zh-CN

timezone: 'Asia/Shanghai'

然后，运行package.json里面的目标npm run server

npm run server

直到输出提示"Hexo is running at http://localhost:4000/ . Press Ctrl+C to stop."以后，访问127.0.0.1:4000进行预览，浏览器出现这个界面说明启动成功

4.打包部署

运行build目标后，根目录生成了一个public文件夹，就是构建成的静态网站文件，上传服务器并使用nginx代理，访问/index.html即可打开博客首页。也可以研究下Vercel，将整个源码上传GitHub，然后使用Vercel拉取，构建和部署。

npm run build

2.整合主题Fluid

hexo默认自带一个叫landscape的主题，比较简陋，也不美观，所以很多人选择美观且功能强大的第三方主题，在这里，我使用主题fluid来建站。

集成第三方主题到hexo中非常简单，只需要将主题解压放在theme文件夹，复制主题的配置文件到根目录下，然后到hexo配置文件内切换主题即可。

1.下载fluid

项目首页和文档地址: https://hexo.fluid-dev.com/

下载地址: https://github.com/fluid-dev/hexo-theme-fluid/releases

找到最新的1.9.8版本下载连接

https://github.com/fluid-dev/hexo-theme-fluid/archive/refs/tags/v1.9.8.zip

2.集成

将压缩包下载下来，解压，压缩包内文件夹名字叫hexo-theme-fluid-1.9.8，这个就是主题，不过要把解压后的文件夹重命名为fluid，并将这个文件夹放在主题文件夹themes内

myblog/

 ├── ... ...

 ├── themes

 │    └── fluid

然后，打开themes/fluid文件夹，将其中的_config.yml文件复制到别处，重命名为_config.fluid.yml，然后粘贴到项目根目录下即可

注意: themes/fluid下的_config.yml是主题的配置，与脚手架生成在根目录的hexo配置文件_config.yml是不同的，要先复制到别处，改名成_config.fluid.yml，然后拷贝回根目录和hexo的配置文件_config.yml放在一起才能生效

myblog/

 ├── _config.fluid.yml

 ├── _config.yml

 └── ... ...

修改_config.yml，找到以下配置

# Extensions

## Plugins: https://hexo.io/plugins/

## Themes: https://hexo.io/themes/

theme: landscape

修改为以下，然后保存

# Extensions

## Plugins: https://hexo.io/plugins/

## Themes: https://hexo.io/themes/

theme: fluid

再次启动npm run server，浏览器预览博客的效果已经变为主题的风格，即为集成主题成功

主题更多玩法，在主题的官网都有文档说明，主题配置文件_config.fluid.yml内也有详细注释，这里不再详细一一介绍，集成其他主题的方式方法同理。

3.部署评论系统Waline

评论系统一般由主题提供支持，支持的评论系统有许许多多，这里我使用的是Waline，并且采用docker独立部署Waline

Waline的使用部署等可参考官网

1.拉取代码，然后构建镜像

git clone https://github.com/walinejs/waline.git

cd waline

docker build -t lizheming/waline -f packages/server/Dockerfile .

2.使用参数启动镜像，参数根据Waline指定的服务端运行参数而来

常见参数:

OAUTH_URL 变量是因为oauth服务也是我自己私有部署的，如果使用waline公共的则不用这个变量
IPQPS IP评论频次限制
MYSQL_DB 数据库名，使用MySQL部署，需要提前导入数据库脚本，详情查阅waline官网文档
MYSQL_USER 不解释
MYSQL_PASSWORD 不解释
MYSQL_PORT 不解释
SERVER_URL 访问waline系统时的地址前缀，因为docker部署由nginx反代，建议设置为反代后的地址
COMMENT_AUDIT 评论审核，布尔值
SITE_NAME 邮件中展示的网站名
SITE_URL 邮件中展示的网站地址
AUTHOR_EMAIL 发送者邮件地址
SMTP_PASS 邮件服务密码
SMTP_USER 邮件用户名
SMTP_SERVICE 邮件提供商，具体列表可见官方文档

启动命令示例

docker run -d \

-e OAUTH_URL=https://oauth.liuzijian.com \

-e IPQPS=10 \

-e MYSQL_DB=waline \

-e MYSQL_USER=****** \

-e MYSQL_PASSWORD=********** \

-e MYSQL_PORT=3306 \

-e SERVER_URL=https://waline.liuzijian.com \

-e COMMENT_AUDIT=true \

-e SITE_NAME="Liu Zijian's Blog"  \

-e SITE_URL=https://blog.liuzijian.com  \

-e SMTP_PASS=****************  \

-e AUTHOR_EMAIL=****@foxmail.com  \

-e SMTP_USER=******@foxmail.com  \

-e SMTP_SERVICE=QQ  \

-p 8360:8360 \

--network=host \

lizheming/waline

怎样在fluid主题上使用waline评论，主题文档有说明，不再赘述。