使用Hexo+Firebase搭建平台托管的静态博客
因为想自己搭建博客又不想自己托管(不稳定,数据易丢,需自己处理扩容),所以这段时间研究了一下平台托管的博客,大概有两类方案:
- 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
):
npm install -g hexo-cli
初始化文件夹:
hexo init <folder>
cd <folder>
npm install
初始化完成后,就有了如下的文件目录:
.
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes
其中_config.yml
为配置文件,source
里存放所有的文章,themes
文件夹可以配置不同的主题,大量的主题可以在官网上找到。
写作
初始化完成后,运行
hexo new post <title>
就会在source/_posts
文件夹下生成一篇文章,比如运行了
hexo new post test
就会在上述目录下找到一个名为test.md
的文件,然后就可以在里面用markdown写作了。
运行
写作完成后,在根目录运行命令
hexo g
就会将文章和主题打包在一起生成HTML
文件,生成的文件会放在根目录的public
文件夹下。网站运行所需的所有东西全都被放在这个文件夹下。
同时,也可以运行
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
):
npm install -g firebase-tools
然后运行以下命令来登录,运行完后会弹出一个浏览器窗口:
firebase login
然后再切换到刚才生成的Hexo目录下,运行
firebase init
运行时会让选择要使用什么功能,因为我们使用过的是托管所以这里选择Hosting
,然后会提示选择一个用作公共根目录的目录。这个目录就是放所有静态文件的地方,默认为public
,名字刚好和Hexo生成的静态文件目录名字一样,所以无需更改。
这个命令会在项目目录下创建一个firebase.json
配置文件,可以通过它来自定义托管行为。
部署
最后,完全所有改动后运行
hexo g
这个命令会让Hexo生成public
文件夹,因为Firebase部署的就是public文件夹,所以要先运行Hexo。
然后运行
firebase deploy
部署就完成了,内容将部署至 Firebase项目的默认托管网址:project-id.firebaseapp.com
关联自定义域名
部署完成后,可以通过上述域名访问,也可以自己关联一个域名,详细操作请看文档。
要注意的是,关联后就有了两个域名:
- project-id.firebaseapp.com
- 自定义域名
第一个是无法关闭的。两个域名指向同一个地方对SEO来说是一件很糟糕的事情,会导致在搜索引擎里的权重被降低,所以需要在HTML的<head>
里指定主站,比如我的就是:
<link rel="canonical" href="https://hyrepo.com/"/>
具体更改HTML的方法根据不同的Hexo主题可能有所区别,比如我用的Minos主题就是在/themes/minos/layout/common/head.ejs
下修改。
访问
至此,博客就上线了,可以感觉到明显的提速。同时因为用的不是GihHub,文件可以存到别的代码仓库的私有库里。
示例:Decouple