使用Hexo+Firebase搭建平台托管的静态博客

9月 17 2018 tech

因为想自己搭建博客又不想自己托管（不稳定，数据易丢，需自己处理扩容），所以这段时间研究了一下平台托管的博客，大概有两类方案：

WordPress.com（不是WordPress.org）
静态博客生成器+托管平台

WordPress

需要注意这里说的是WordPress.com而不是WordPress.org，前者是基于WordPress的托管平台，而后者是WordPress这个开源程序本身。

这种方式相当于托管在WordPress.com上，需要付费。虽然有免费套餐，但是免费套餐不能自定义域名，而且有广告，所以基本上很多人会从付费的第一档开始考虑。不过第一档可以选的主题数量有限。

如果不想折腾的话这个方案是个不错的选择，WordPress的优势在于：

在任何地方都可以登录上去写作
很多系统都是内置的，比如留言系统，无需自己操心
有管理系统，可以方便的管理文章、审核留言等

缺点：

需付费且价格不便宜
可以自定义的东西有限
和平台耦合度高，换平台时会比较麻烦

个人觉得这是一个非常容易上手的方案，非常适合没有技术背景或是不想折腾的人群，屏蔽了很多技术细节，不用自己去操心，不过需要考虑到长时间使用的成本问题。

静态博客

第二种是用静态博客生成器（比如Jekyll,Hexo等），以及静态页面托管平台（相当于一个简单的服务器）相结合，写好文章后用生成器生成HTML文件，然后打包上传到托管平台就可以访问。

这种方式的优势在于：

免费
可高度自定义，包括自定义域名
与平台几乎无耦合，可以非常容易的切换平台，而且用户注意不到这一操作
所有内容可以保存在Git上，数据丢失的概率非常低且方便回滚

缺点在于：

需要一定技术基础
只能在配置好环境的终端上本地写作
因为没有数据库所以只能集成第三方的留言系统
无管理界面（有插件但体验一般）

生成器

静态博客生成器，简单来说就是将markdown（或其他语言）文件、主题等东西打包在一起生成HTML文件。生成器的种类有很多，网上有很多他们的介绍以及区别，比如：11个最流行的静态(博客)网站生成工具。

这里不多做对比，因为以下几个原因选择了Hexo:

简单易上手
Build速度快
中文文档丰富

初始化

Hexo的使用非常简单，简单运行的下面的命令安装（需预先安装Node.js）：

1	npm install -g hexo-cli

初始化文件夹：

1
2
3

hexo init <folder>
cd <folder>
npm install

初始化完成后，就有了如下的文件目录：

.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

其中_config.yml为配置文件，source里存放所有的文章，themes文件夹可以配置不同的主题，大量的主题可以在官网上找到。

写作

初始化完成后，运行

1	hexo new post <title>

就会在source/_posts文件夹下生成一篇文章，比如运行了

1	hexo new post test

就会在上述目录下找到一个名为test.md的文件，然后就可以在里面用markdown写作了。

运行

写作完成后，在根目录运行命令

hexo g

就会将文章和主题打包在一起生成HTML文件，生成的文件会放在根目录的public文件夹下。网站运行所需的所有东西全都被放在这个文件夹下。

同时，也可以运行

1	hexo server

这个命令会在本地启动服务器，可以通过http://localhost:4000/来预览效果。

可以看到hexo的使用非常简单。更多详细的说明可以查看官方文档。

托管平台选择

Github Pages

说到静态博客，很多人的第一反应会是Github Pages，这应该也是平台托管的静态博客最初火起来的地方。

GitHub Pages的使用体验很好，与GitHub高度集成，只要简单的在GitHub里创建一个名为[username].github.io的项目你就拥有了自己的GitHub Page，然后就可以通过同名网址来访问。

没有选择GitHub是因为国内网络众所周知的原因导致的访问不稳定，有些页面经常会突然访问不了，并且速度略慢。

国内平台

Coding Page, 码云Page等，优点是速度快中文支持好，缺点是受监管，请自行取舍。这里不作考虑。

Firebase

这里选用了Firebase，它是谷歌旗下一个后端即服务(BaaS)的平台，简单来说就是后端在云端，不用再担心数据库、认证、存储和扩张等，直接调用即可。

目前Firebase提供了非常多的服务，这里我们用到了其中的托管。

托管

免费的托管方案提供了：

1G的储存空间
10G/月的流量

超出后可以付费购买。

关于托管，官方是这样介绍的：

Firebase 托管为您的网页应用提供快速、安全的静态托管。
Firebase 托管是为开发者提供的生产级网页内容托管服务。借助 Firebase 托管，您只需一条命令，便可轻松快捷地将网页应用和静态内容部署到全球内容分发网络。

使用Firebase有很多非常难得的好处：

全球SSD CDN，速度比GitHub快。
一键回滚。Firebase托管使用一键式回滚提供完整的版本控制和管理。
零配置的SSL，自动启动HTTPS。
完美的中文文档支持。

使用Firebase的体验非常好，虽然是谷歌的产品但是提供了非常完整的中文文档支持，而且写得非常简单易懂，同一个代码示例提供多种编程语言的版本，里面的很多功能都能快速上手。

创建项目

首先访问Firebase创建一个项目。

创建时项目ID要注意，它会被用在URL上，如果不想自己定义域名的话以后就会一直用这个ID来作为域名访问。比如ID是myblog，那么域名就会是https://myblog.firebaseapp.com/。

初始化

运行以下命令来安装Firebase（需预先安装Node.js）:

1	npm install -g firebase-tools

然后运行以下命令来登录，运行完后会弹出一个浏览器窗口：

1	firebase login

登录后再切换到刚才生成的Hexo目录下，运行

1	firebase init

运行时会让选择要使用什么功能，因为我们使用过的是托管所以这里选择Hosting，然后会提示选择一个用作公共根目录的目录。这个目录就是放所有静态文件的地方，默认为public，名字刚好和Hexo生成的静态文件目录名字一样，所以无需更改。

这个命令会在项目目录下创建一个firebase.json配置文件，可以通过它来自定义托管行为。

部署

最后，完全所有改动后运行

hexo g

这个命令会让Hexo生成public文件夹，因为Firebase部署的就是public文件夹，所以要先运行Hexo。

然后运行

1	firebase deploy

部署就完成了，内容将部署至 Firebase项目的默认托管网址：project-id.firebaseapp.com

关联自定义域名

部署完成后，可以通过上述域名访问，也可以自己关联一个域名，详细操作请看文档。

要注意的是，关联后就有了两个域名:

project-id.firebaseapp.com
自定义域名

第一个是无法关闭的。两个域名指向同一个地方对SEO来说是一件很糟糕的事情，会导致在搜索引擎里的权重被降低，所以需要在HTML的<head>里指定主站，比如我的就是：

1	<link rel="canonical" href="https://hyrepo.com/"/>

具体更改HTML的方法根据不同的Hexo主题可能有所区别，比如我用的Minos主题就是在/themes/minos/layout/common/head.ejs下修改。

访问

至此，博客就上线了，可以感觉到明显的提速。同时因为用的不是GihHub，文件可以存到别的代码仓库的私有库里。

示例：Decouple

#blog #cloud