2017-02-09: 新增了 Firebase 自定义域名部分

前言

在上一篇里我介绍了我自己写的基于 Angular 的静态博客框架 Solomon。那么，在一个博客框架初步完成之后，下一步就是要实现博客部署。因为是静态博客，所以部署方面就省事了很多，只需要有免费静态页面搭建托管服务即可。这方面比较流行的是 GitHub Pages，此外 Google 新推出的 Firebase 也是不错的选择。不过显而易见的，Firebase 在国内的体验并不好，所以我这里只作为一个备用方案。

此外，为了避免每次更新博客都需要在有开发环境的电脑上进行，我还用了 Travis-CI 以实现自动编译和自动部署。

介绍

GitHub Pages 是 GitHub 推出的静态页面托管服务，可以选择 GitHub 提供的默认域名 github.io 或者是自定义域名。此外，GitHub Pages 还支持自动使用 Jekyll 生成网站。

不过我的项目用的是 Angular，只能直接部署 HTML 等纯静态文档了，这也是我下面选择用 Travis-CI 自动部署的原因。

Firebase 官网的介绍是：

The tools and infrastructure you need to build better apps and grow successful businesses.
构建更出色应用和成功地扩大业务所需的工具和基础架构。

简单的来说，Firebase 是一个帮助开发者构建移动应用的平台，Firebase 适用于 Android、iOS 和 Web 平台，它的功能包括用户分析的解决方案 Firebase Analytics、实时数据库 Realtime Database、用户验证 Authentication 和云信息 Cloud Messaging 等。

这里我们用到的是 Firebase 众多的功能的其中一种：静态托管 Hosting。和 GitHub Pages 一样，Firebase 也提供默认域名 firebaseapp.com 和自定义域名。另外 Firebase Hosting 中内置了 SSL，所以即使使用自定义域名也可以启用 HTTPS。

初始化 & 设置 & 部署

新建一个 GitHub Pages 的过程非常简单，只需要在你的 GitHub 上新建一个名为 username.github.io 的 repository。

注意：username 部分必须和你的 GitHub Username 完全相同。

然后你需要将你新建的 GitHub Pages 取回本地：

$ git clone https://github.com/username/username.github.io

将你的 HTML 等静态文件放进 username.github.io，接着运行

$ git add .
$ git commit -m "Initial commit"
$ git push -u origin master

还没有静态文件？运行
$ echo '<p>Hello World!</p>' > index.html
生成一个吧！

最后用浏览器打开 https://username.github.io 即可看到你的 GitHub Pages 已经部署好了。

相比 GitHub Pages，Firebase 的配置相对要繁琐一些，首先你需要登录到 Firebase 并在 Firebase Console 中新建一个 Project。

新建好 Project 之后，让我们转到命令行，运行如下的命令，分别安装 firebase 工具，登录到 firebasee 和初始化：

$ npm install -g firebase-tools
$ firebase login
$ firebase init

在初始化界面我们依次选择：Hosting（托管）、你的项目的名字、默认、填写你的需要部署的文件夹的名字（Angular 项目默认是 dist）、默认。

完成设置之后，部署很简单了，只需要运行：

$ firebase deploy

即可部署到你的 firebase 上。

自动编译

尽管 GitHub Pages 和 Firebase 的部署都十分的简单：在本地生成文本后，只需要一行命令就可以部署。但是如我上面所说，有的时候如果我们身边没有配好开发环境的电脑的话，本地生成就成了大问题。

所幸，我们可以用 Travis-CI 提供的持续整合服务来实现自动编译和自动部署。

Travis-CI 名字中的 CI 指的是 Continuous integration（持续整合），意思是在开发时只要有变更，就会持续整合进主线中。
要实现的自动整合，就需要有服务器持续的监听项目库的变化，发生变化（例如 git commit）时，自动运行测试和部署的脚本。
Travis-CI 提供分布式的持续集成服务，用于测试在 GitHub 上托管的代码。

首先，登录到 Travis-CI 并且为项目开启自动编译：

然后，在我们的 Repo 中加入 .travis.yml 文件，用来描述编译的步骤。我的 .travis.yml 目前长这样：

language: node_js
node_js:
  - "6.1"

branches:
  only:
    - master

before_script:
  - yarn
  - npm install -g firebase-tools
  - npm install -g angular-cli

script:
  - ng build --prod

after_success:
  - firebase deploy --token $FIREBASE_TOKEN
  - cd dist
  - git init
  - git config user.name "PoiScript"
  - git config user.email "poiscript@gmail.com"
  - git add .
  - git commit -m "Committed via Travis-CI"
  - git push -f -q https://PoiScript:$GITHUB_TOKEN@github.com/PoiScript/poiscript.github.io

notifications:
  email:
    on_failure: change
    on_success: change

简单的介绍一下各项配置：

language：这里是定义你的语言，而且还可以规定你的语言的版本，例如这里是node 6.1。在选择语言版本的时候，最好先到 Travis CI User Documentation 里确定 Travis CI 是否提供；
before_script：在这里命令会在开始编译之前运行。由于我的项目用的是 yarn 所以这里我直接运行 yarn 命令安装依赖。然后我又用 npm 全局安装了 angular-cli 和 firebase-tools，因为接下来的编译和部署会用到他们；
script：这里是编译的命令。--prod 表示生产模式；
after_success：这里放编译之后运行的代码，换言之就是部署的代码。具体的内容我们放到下面讲。

写好 .travis.yml 之后，在之后的每一次更新里，Travis 都会帮你 clone 下来进行编译或测试。如果一切正常的话，Travis 的 Build 就会显示成 Passing。

自动部署

自动编译好了之后，接下来就需要自动部署了，为了安全起见我们当然不能直接把我的 GitHub 和 Google 密码交出去，所以我们需要 Token（令牌）。

GitHub 的 Token 是在 Personal access tokens 页面。点击 Generate New Token 之后输入这个 Token 描述（例如：Travis-CI），然后选择该 Token 的权限，我们只选择一个 public_repo。

最后点击 Generate Token 之后，就会显示出我们生成好的 GitHub 的 Token 啦。

注意 Personal access tokens 出现了之后要立即复制，因为它只会出现一次。

获得 Firebase 的 Token 则是需要在命令行里运行：

$ firebase login:ci

在浏览器里验证身份之后，就可以获得你的 Token 了。

那么 Token 应该怎么用呢？肯定是不能直接写到 .travis.yml 里的。所幸，Travis-CI 提供了全局变量的功能，在 Travis-CI 的设置界面里，我们把我们的 Token 填进去：

然后在我们的就可以通过 $GITHUB_TOKEN 和 $FIREBASE_TOKEN 的方式获得我们的 Token。而且如果你没有勾选 Display value in build log 的话，也不会显示在 log 里：

通过 Token 部署 Firebase 也是一样简单，只需要在 after_success 里添加：

- firebase deploy --token $FIREBASE_TOKEN

部署到 GitHub 则是这么写：

- cd dist
- git init
- git config user.name "GIT_NAME"
- git config user.email "GIT_EMAIL"
- git add .
- git commit -m "Committed via Travis-CI"
- git push -f -q https://username:$GITHUB_TOKEN@github.com/username/username.github.io

在 git push 的时候，切记要加上 -q，不然会显示出 URL 那么你的 Token 也就泄漏了。

自定义域名

上面提到过部署在 GitHub Pages 和 Firebase 之后，可以使用它们的默认域名 github.io 和 firebaseapp.com。

GitHub Pages 就是 username.github.io，例如我的是 https://poiscript.github.io；Firebase 则是：项目名-编号.firebaseapp.com，像我这里的就是 https://solomon-c8973.firebaseapp.com。

Firebase 默认的域名很不好看对吧？Google 分配怎么一个域名感觉就是逼人换域名一样，那么接下来我们就来换成我们自己的域名。