Firebase 托管静态博客

2018-07-30

我的博客就是些静态 HTML 文件，一向都部署在自建的 VPS 上，但最近觊觎 CDN 的速度，于是调查一番，选了 firebase 来托管博客。

firebase 提供的免费托管特性如下：

可存储的免费空间为 1 GB
每个月免费流量为 10 GB
可免费自定义域名，并配有免费 SSL 证书（Let’s Encrypt）
免费 CDN
可回滚的部署历史记录 - 犯错也不怕

对我这样每个月不过几千访问量的博客来说，firebase 的免费档应该是绰绰有余。一旦出现不够用的情况，还可以考虑 Blaze 方案 - 即用即付。

创建项目

首先登录 https://console.firebase.google.com 创建一个新项目。注意，创建过程中页面会默认生成一个 Project ID，我们也可以自己填写，它将决定我们的网站托管在 firebase 上的子域名，比如你填入 google，则最后你的博客将托管在 google.firebase.com 域名 - 只不过一旦创建后就不能再修改。

安装 Firebase 命令行工具

我们需要预先安装 firebase-tools，这是一个基于 Node.js 的工具包，我们需要通过 npm 或是 yarn 来安装：

$ yarn global add firebase-tools

安装完成后，命令行下就有 firebase 命令供差遣。

在终端窗口执行 firebase login，浏览器会自动打开一个请求授权的网址。

$ firebase login

初始化 firebase

命令行下登录 firebase 后，切换到博客根目录，初始化：

$ cd sam-blog
$ firebase init
     ######## #### ########  ######## ########     ###     ######  ########
     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
     ######    ##  ########  ######   ########  #########  ######  ######
     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
     ##       #### ##     ## ######## ########  ##     ##  ######  ########

You're about to initialize a Firebase project in this directory:

  /Users/sam/Documents/githubRepos/sam-blog

Before we get started, keep in mind:

  * You are initializing within an existing Firebase project directory

? Which Firebase features do you want to set up for this directory? Press Space to select features, then 
Enter to confirm your choices. (Press <space> to select, <a> to toggle all, <i> to invert selection, and 
<enter> to proceed)
default instance
 ◯ Firestore: Configure security rules and indexes files for Firestore
 ◯ Functions: Configure a Cloud Functions directory and its files
❯◯ Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys
 ◯ Hosting: Set up GitHub Action deploys
 ◯ Storage: Configure a security rules file for Cloud Storage
 ◯ Emulators: Set up local emulators for Firebase products
(Move up and down to reveal more choices)

因为我们只是要托管静态博客，所以选择 Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys。

稍后会让我们关联一个 Firebase 项目，选择我们在 firebase 后台新建的项目。

再往后则是：

? What do you want to use as your public directory? (public)

因为我的静态博客在构建后是放在 dist 目录的，所以这里我填入 dist - 默认为 public 目录。

最终，firebase init 命令会生成两个文件：

firebase.json
.firebaserc

我们主要关心 firebase.json，这里面可以做很多事情，比如设置静态资源的缓存时间：

{
  "hosting": {
    "public": "dist",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "headers": [
      {
        "source": "**/*.@(jpg|jpeg|gif|png|svg|ico)",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "no-cache"
          }
        ]
      },
      {
        "source": "**/*.@(js|css)",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "max-age=31536000"
          }
        ]
      }
    ]
  }
}

预览

在部署之前，我们可以执行 firebase serve 预览一下，省得部署后才发现有问题：

$ firebase serve

=== Serving from '/Users/sam/Documents/githubRepos/sam-blog'...

i  hosting: Serving hosting files from: dist
✔  hosting: Local server: http://localhost:5000

部署

接下来就可以部署：

$ firebase deploy --only hosting

自定义域名

部署完成后，我们就能在 <Project-ID>.firebaseapp.com 这样一个网址访问到博客，接下来就是关联我们的自定义域名。Hosting 面板下有相应操作指南，这里就略过不提。

不过，配置完自定义域名后，我们会有两个网址：

<Project-ID>.firebaseapp.com
你的自定义域名.com

前者是关不掉的。这是一个问题，因为搜索引擎会从两个网址抓取到一样的内容，对 SEO 来讲，这非常糟糕，搜索引擎可能会判断为内容抄袭、重复，导致你的自定义域名被降权。所以最好使用 rel=canonical 之类的方案给搜索引擎一个说明。

比如我的博客首页 HTML 代码中会有这样一行：

<link rel="canonical" href="https://heysam.xyz/"/>

体验

快，比托管在 VPS 上确实快得多。