Hugo + Firebase + Gitlab 自动化部署你的网站

又折腾了一下博客，这次把博客搭在 Firebase 上面，并使用了 Gitlab CI。博客仓库主分支接收到推送事件后， 会自动生成 Hugo 博客静态文件，并通过 Firebase SDK 部署到 Firebase Hosting。整个流程舒畅无比， 这种感觉还是很爽的。

瞎扯

博客生成器依旧使用 Hugo，不得不说 Hugo 生成网站是真的快，各种插件和主题也是很多，可以很方便地自定义自己的博客。

这次迁移到 Firebase，主要是对 Google Cloud Platform 以及 Firebase 一系列生态的体验和尝试。

Firebase 对移动应用的帮助真的非常大，能快速对接第三方登录系统，有实时的数据库，不需要后端支持就可以拥有存储系统，并运行云端的函数， 我正在使用的 Hosting(静态网站托管)也是其中一项，Hosting 能自动开启 SSL，不需要自己配置。同时搭配的一系列数据分析和 A/B 测试服务， 对应用成长作用巨大。

这些是需要的

• Git
• Gitlab 账号，并建好仓库。
• Hugo，可以本地预览。
• Firebase 账号。

步骤

如果只需要本地部署 Firebase，那么可以直接看 官网 的教程。

1. 创建 Firebase 项目

在 Firebase控制台创建好项目，步骤就不细说了。

2. 本地部署 Firebase 项目

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

// 安装 Firebase 工具
$ npm install -g firebase-tools

// 登录之前创建的项目
$ firebase login

// 初始化项目
$ firebase init

// 生成网站静态文件并部署
$ hugo && firebase deploy

接着 Firebase 项目中应该有了发布记录，可以用访问看看有没有变化。

3. 编写 Gitlab CI 配置文件

在仓库根目录添加 .gitlab-ci.yml 文件，内容如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

image: nohitme/hugo-firebase

before_script:
  - hugo version
  - firebase --version

hugo_firebase:
  stage: deploy
  only:
    - master
  except:
    - dev
  script:
  - rm -rf public
  - hugo
  - firebase deploy --token ${FIREBASE_TOKEN}

镜像使用的是 nohime 这位兄弟的。

4. 获取 Firebase CI Token

1

$ firebase login:ci

这个过程需要翻墙，特别要注意不要泄露了 Token。

5. Gitlab 配置

在 gitlab 仓库设置中添加上一步获取的 token，变量名是 FIREBASE_TOKEN

6. 推送仓库

commit 并 push 到 gitlab，此时在 gitlab 仓库中的 CI/CD 菜单就能看到构建的项目了。

感兴趣的可以尝试一波哟！