利用firebase打造极速静态博客

之前博客一直是做的动态的，后台页面，添加博文，然后保存后查看博文。但最近VPS感觉不稳定加之价格有点小高（主要是穷），打算将vps上的所有东西都放在云端，使用免费资源（还不是因为穷）。第一步就是从博客开始。

Hexo介绍

Hexo是由台湾的一名大学生创建的静态博客系统，它基于’NodeJs’，生成文章的速度非常快，这也是为什么选择它的原因。当然还有很多其它的系统，但是作为NodeJs阵营的我当然是选择它啦。

Hexo项目搭建

首先，安装官方文档过一遍，在本地安装搭建一个Hexo项目，例如我的HexoBlog。
这时运行hexo server并打开浏览器访问http://localhost:4000应该就可以访问到你搭建后的博客了，如果没有，请仔细阅读文档，重来一遍。
这里我稍微修改了下_config.yml文件，然后添加了deploy模块

deploy:
  type: git
  repo: https://github.com/erguotou520/HexoBlog.git
  branch: gh-pages

这样以后deploy后的public文件夹里的内容会自动提交到gh-pages分支下。

数据迁移

最开始的博客是在Ghost上跑的，后来又是用的pagekit，到现在的Hexo，每次数据迁移都是手动复制粘贴，太麻烦了，即使它们可能提供了一些迁移工具，但是还是会存在不靠谱的情况，所以还是手动复制吧。
这里要提到Hexo的一个好处了，文章是以markdown格式的文件存储，而不是存在数据库中，对于我们是可视的，再配合上后面的git，可以实现文章的历史管理。

结合Github

本地环境搭建好了之前就开始将它推送到github了，为什么放在github？一来是有个存储的地方，二来自带历史版本管理，三来可以实现自动化。
首先，添加hexo的git deploy插件。

npm install hexo-deployer-git --save

接着在项目中添加一些必要的文件，因为Hexo的生成器并没有生成这些文件和内容。

1. 添加.gitignore，把node_modules和.deploy_git添加进来，后者是在添加hexo-deployer-git插件并执行hexo deploy命令时会生成。
2. 补充package.json文件，可以加上description等其它字段，可选
3. 添加README.md说明文件，可选

OK，完成后开始推送。这个时候已经实现了hexo和github的结合，但是现在，每次添加完文章后都需要手动执行hexo generate和hexo deploy，是否可以更简单呢？

与Travis结合

我们可以利用TravisCI的自动化测试来进行自动构建任务。网上也有很多介绍Hexo+Github的文章，简单来说，就是在项目根目录下添加.travis.yml，内容如下

language: node_js

node_js:
  - "6"

branches:
  only:
    - master

before_install:
  - npm install hexo-cli -g
  - git config --global push.default matching
  - git config --global user.name "erguotou"
  - git config --global user.email "[email protected]"
  - sed -i'' "/^ *repo/s~github\.com~${ACCESS_TOKEN}@github.com~" _config.yml

install:
  - npm install

script:
  # - git submodule init      # 用于更新主题
  # - git submodule update
  - hexo clean
  - hexo d -g

cache:
  directories:
    - node_modules

其中{ACCESS_TOKEN}就是下文要介绍的token。

接着在github中生成一个用于自动提交用的token。点击github中头像–>‘Settings’–>Personal access tokens–>Generate new token生成一个给travis用的token（权限我只勾选了repo相关的）。
因为github提供了中使用token进行push的方式，这也是我为什么_config.yml文件中deploy模块用的repo是https地址的原因了。
生成token后将其添加到travis的环境变量中ACCESS_TOKEN=token。
最后提交所有文件，等待TravisCI的构建结果，此时应当完成了与TravisCI结合的功能，如果构建报错，请具体结合报错内容修改。

与Firebase结合

说到现在，我们都还没提到我们的主角Firebase。对于还不了解Firebase的同学建议先去看下网上的介绍。Firebase为我们提供了实时的云端存储和并提供全球CDN服务，我就是要利用它的CDN服务将我们的静态博客挂在CDN上。
首先，全局安装它的cli工具

npm install -g firebase-tools

然后登录firebase

# 不带参数会登录报错
# 如遇到翻墙问题请自行解决
firebase login --no-localhost

接着进入项目根目录，执行

firebase init

安装提示完成初始化，Firebase会自动在项目根目录下创建firebase.json文件，我们保证firebase.json里的public值为public即可，因为public文件夹是hexo生成的博客的目录。

{
  "hosting": {
    "public": "public"
  }
}

此时执行firebase deploy就可以将我们的博客推送上去了。但是我们需要结合TravisCI实现自动部署，所以在.travis.yml中添加firebase的自动部署模块

# 2017-07-10更新
after_success:
  - firebase deploy --non-interactive --token ${FIREBASE_TOKEN}

其中FIREBASE_TOKEN是让TravisCI进行部署时的密钥，它需要我们通过下面的命令来生成

firebase login:ci --no-localhost

登录验证成功后会得到一个token，复制它，在travis中添加环境变量FIREBASE_TOKEN，value为刚复制的token。
最后git提交推送，travis自动构建，firebase自动部署，OK，完美。

Firebase自定义域名

默认firebase会为我们提供一个域名访问地址，但我们一般会用自己的域名来访问。此时按照Firebase Hosting的文档提示，在我们的域名中添加2个txt记录完成域名拥有权的验证，验证完成后等待firebase颁发https证书（我睡了一晚，醒来之后就好了），最后按照提示，将我们自己的域名做一个cname，解析到firebase给我们提供的域名上就可以啦。

总结

本文介绍了Hexo+Github+TravisCI+Firebase搭建一个免费的拥有https的全球cdn加速的静态博客，综合利用了现有的网上资源，整个搭建过程会遇到各种问题，但都被一一解决。当然，Hexo作为静态博客，也会有一些不足，但这些不足我们都可以使用插件系统来实现，这也是后面要做的内容。
后面打算利用Firebase的database功能实现一个简单的博客评论系统，然后是定义一个自己用的主题，默认的太难看啦。后面的还有很长的一段路要走呢～