GitLab Pages 部署 Hexo 博客

发表于 更新于 分类于 本文字数： 444 阅读时长 ≈ 4 分钟

使用 Hexo 创建第一篇博客

1
2
3
hexo: 7.2.0
hexo-cli: 4.3.2
node: 21.7.1

开始

项目初始化

指定文件夹初始化，新建hexo项目

1
2
3
$ hexo init <folder>
$ cd <folder>
$ npm install

执行完成后，目录结构如下

1
2
3
4
5
6
7
8
.
├── _config.yml					# hexo 配置文件
├── package.json				# hexo 依赖文件
├── scaffolds					# 模版目录
├── source
|   ├── _drafts					# 归档目录
|   └── _posts					# 博客目录
└── themes					# 主题目录

对于各个文件、目录更多详情，请移步 Hexo官方文档：建站

新建第一篇博客

1
2
# 如果没有设置 layout 的话，默认 post
$ hexo new [layout] --path [path/title] "title"

更多命令，请移步 Hexo官方文档：指令

本地运行 hexo

1
2
3
$ hexo server
# 或者
$ npm run server

执行命令，当看到截图所示，则说明项目启动成功 🎉

使用 GitLab Pages 部署 Hexo 博客

新建 maozzi.gitlab.io 仓库

浏览器输入 gitlab URL 并登录 https://gitlab.com/，
创建一个仓库，名称必须为 {username}.gitlab.io，我的username（登录用户名），
这样才能使用 https://maozzi.gitlab.io访问。

如图：

新建 CI/CD 配置文件(YAML文件)

在 hexo 博客项目根目录下新建 .gitlab-ci.yml 文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# The Docker image that will be used to build your app
image: node:21.7.1
# Functions that should be executed before the build script is run
before_script:
  - npm install hexo-cli -g
  - npm install
  - hexo generate
pages:
  script:
    - hexo generate
  artifacts:
    paths:
      # The folder that contains the files to be exposed at the Page URL
      - public
  rules:
    # This ensures that only pushes to the default branch will trigger
    # a pages deploy
    - if: $CI_COMMIT_REF_NAME == $CI_DEFAULT_BRANCH

验证

从两个方面验证。

验证 URL 访问

浏览器输入URL：https://{username}.gitlab.io，我的仓库名称为 maozzi.gitlab.io，
则浏览器输入 https://maozzi.gitlab.io，

验证 gitlab CI/CD 工作流

进入 gitlab ，maozzi.gitlab.io 仓库-> 构建 -> 流水线

  • 如果为绿色，说明成功
  • 如果为红色，说明失败，点击查看详情寻找错误原因