2021 静态博客技术选型最佳实践

在搭建这个博客的过程中，碰到了很多问题，有很多技术选型上的选择。

作为本站的第一篇文章，正好记载一下这些信息，希望可以帮到有需求的朋友们。

注意 1：本文不是《从零开始搭建静态博客》 这种教程，而是表达一些技术选型的思考。需要教程的朋友请自行寻找其他资源，根据本文提到的关键字去 百度/必应/谷歌 搜索是个好办法。

注意 2：本文不讨论以下相关话题：代码托管，域名申请，Markdown使用，CDN加速，HTML/CSS，NODEJS技术生态，Hexo框架细节

本文目录：

本站技术选型一览

	技术选型	替代方案
类型	静态博客	动态博客 例如：WordPress
存储	阿里云OSS	Github Pages、AWS S3、Azure Blob、七牛云 Kodo等
框架	Hexo	Jekyll 或 不使用框架
UI	自定义主题	Hexo 默认主题
评论	Valine	参考：第三方评论系统之我见
自动部署	Github Actions	自定义脚本

动态博客 vs. 静态博客

自建博客有两种类型：动态博客 和 静态博客：

• 动态博客一般会有独立的服务器，用来安装后端服务和数据库，每当用户访问博客时浏览器会发送HTTP请求到后端服务，后端服务查询数据库，渲染页面返回给用户的浏览器。对于某些静态资源如JS/CSS/PNG格式的文件，动态博客通常也存储在服务器中，然后采用CDN技术进行加速。
• 静态博客则没有独立的服务器，而是利用支持HTTP(S)协议的文件存储PaaS服务（如阿里云OSS）发布内容，所有的内容必须是静态的，所有用户访问同一页面看到内容应该是完全一样的。如果需要一些动态功能如“评论”等，则必须借助第三方服务。

两者最重要的差异是：动态博客需要计算资源和存储资源，而静态博客通常只需要存储资源。通俗点说，动态博客通常需要一个单独的云服务器，而静态博客不需要。

由此我们可以列出 动态博客 和 静态博客 的一些主要区别：

	动态博客	静态博客
价格	高，需要购买单独的服务器，性能好的云服务器通常十分昂贵，个人很难承担	低，在流量比较少的前期甚至不用花钱 ✅
速度	慢，需要更多的步骤来渲染一个页面，例如查询数据库	快，全部内容都可以进行CDN加速 ✅
功能	丰富，以WordPress为例，基本什么样的插件都可以找到 ✅	受限，只能利用第三方服务来完成某些“动态”功能，例如 评论
维护	难，因为服务器完全由自己管理，需要很多精力调优	简单，我们不需要维护任何服务器 ✅

我们可以看出，动态博客付出了更高的成本换取丰富强大的功能。

然而写博客是个很简单的事情，通常我们不希望为了简单的事情去做很复杂的事。省钱、稳定、速度快才是我们的真需求。

所以我选择使用静态博客，也推荐大家使用静态博客，除非：

1. 你有充足的时间和金钱去折腾
2. 你有较为复杂的需求（例如 注册、登陆 ）

阿里云OSS：省钱、稳定、速度快

在本站技术选型一览中，我提到了存储的技术选型主要有以下选择：

Github Pages、AWS S3、Azure Blob、阿里云OSS、七牛云 Kodo

最主流的应该是Github Pages，我之前也使用过，十分方便快捷，但国内访问速度也十分堪忧。

我最熟悉的则是AWS S3，但考虑到AWS在中国的业务还不算十分成熟，价格也会高一些，所以也被我毙掉了。

Azure Blob，国外产品，我不熟悉，毙掉。

剩下的选择是 阿里云OSS 和 七牛云 Kodo，我都不是很熟悉，但应该都能满足我的需求 - 省钱、稳定、速度快。

我最终选择选择了阿里云，原因如下：

1. 阿里云在国内的市场份额最大
2. 我之前有过使用经验（申请域名，服务器等）
3. 网上关于阿里云OSS搭建静态博客的信息较多

具体使用阿里云OSS搭建静态博客的教程网上有很多，大家自行搜索便是。

在根据教程搭建时，我有几点想提醒一下：

1. 搭建之前记得先申请域名
2. 阿里云OSS 计费系统 还是蛮复杂的，建议充点钱防止免费额度用完博客访问不了，我充值了100元并设置了余额告警
3. OSS使用大陆节点需备案，使用香港节点不需要备案
4. 可以从 “阿里云控制台 -> SSL证书 -> 证书资源包” 申请免费的DigiCert SSL证书 （免费版SSL最多申请20个，只支持单域名绑定，有效期一年）
5. 记得去 “阿里云控制台 -> RAM访问控制” 创建一个 OSS的用户 和 对应的AccessKey，后面自动化部署会用到

Hexo: 不要重复造轮子

其实最开始我并不想使用框架，感觉学习成本很高，而我只想发点文章而已。

不过最终我还是使用了框架来避免造以下我会用到的轮子：

1. 渲染Markdown到HTML
2. 自动生成文章索引
3. 标签与分类功能
4. 灵活的各种插件

如果我自己去利用各种库去实现以上功能，则避免不了经常需要重构保持代码的整洁性。但我并不想花那么多时间自己写一个静态博客框架，而是用更多的时间去写博客。

在框架选择上，我并没有花太多时间纠结，主流的框架应该都能满足我的需求。

最终选择了Hexo，只考虑了这几点原因：

1. Hexo是比较新的主流框架
2. Hexo自称可扩展性比较强
3. Hexo网络搜索出来的内容比较多

最终使用下来，感觉还可以，只有一点让我不爽：Hexo文档 写的太烂了！！！

自定义主题：颜值即正义

Hexo 有331个默认主题

推荐大家选择其中一个自己喜欢的主题，这样是最方便的。

然而，我个人对UI的要求比较高，也有对UI修改的一些想法，所以我没有选择默认主题，而是使用了自定义主题。

如果你和我一样对CSS有一定了解并且希望自己“装修”博客，那么你可以参考以下信息。

自定义的过程大概是这样的：

1. 网上寻找漂亮的 HTML5 模版，这个选择范围就比广了，总能找到自己喜欢的风格
2. 修改 HTML5 模版，主要是换一下背景图片，调整一下<p>标签行间距等，这个可以后面发现哪里不好看慢慢改
3. 根据HTML5模版制作 Hexo自定义主题, 主要是使用EJS定义以下几个页面：index页面，404页面，post页面以及page页面。Hexo文档写的太烂了，建议找一个默认主题的源码参考着改。

制作自定义主题时可以参考下面两篇文章：

• hexo是怎么工作的
• Hexo主题开发经验杂谈

Valine：交流是刚需

由于是静态博客，所以我们必须使用第三方的服务来支持评论功能。

目前静态博客评论主要使用以下几种方案：

1. PaaS评论服务，例如Disqus, LiveRe 来必力
2. 基于Github Issue的评论系统，例如Gitalk，Vssue
3. 基于LeanCloud的评论系统，例如Valine

更多的内容和分析，我觉得《第三方评论系统之我见》这篇文章已经总结的很好了，我就不赘述了。

我最终选择了第三种方案，使用Valine作为本站的评论系统。

不过说实话，我觉得上述方案都不太好用，下面是我的一些看法：

1. 关于第一种方案，其实是最合适的。不过国内竟然没有一家像样的PaaS评论系统，国外的通常网速堪忧（感觉是个商机）
2. 关于第二种方案，相当于曲线救国方案，速度慢，用户体验差
3. 关于第三种方案，体验最好，不过目前的功能差了一些，想要实现反垃圾评论，发邮件等功能比较麻烦，而且LeanCloud感觉并不是很靠谱。

有时间的话我倾向于基于阿里云Serverless服务造个类似第三种方案的轮子

2021/04/12: LeanCloud 莫名账号丢失，登陆不上去了，所以不得不移除了评论功能 😓。如果真的需要评论功能，建议自己造轮子 或 使用动态博客

Github Actions: 自动化部署

如果你使用Github托管静态博客的代码，那么Github Actions是你自动化部署的不二选择！

最终可以达到的效果是：代码merge到main分支，自动将最新的博客发布到OSS上。

具体使用可以参考这篇文章：《Hexo + GitHub Actions 完美打造个人博客》

如果你也使用阿里云OSS作为博客的存储, 可以参考我的workflow代码:

name: Publish to https://blog.osfpu.com
on:
  push:
    branches:
      - main
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
    - name: 1. git checkout...
      uses: actions/checkout@v1
    - name: 2. setup nodejs...
      uses: actions/setup-node@v1
    - name: 3. install hexo...
      run: |
        npm install hexo-cli -g
        npm install
    - name: 4. hexo generate public files...
      run: |
        hexo clean
        hexo g
    - name: 5. Install ossutil
      uses: manyuanrong/setup-ossutil@v2.0
      with:
          endpoint: "oss-cn.aliyuncs.com"
          access-key-id: ${{ secrets.OSS_KEY }}
          access-key-secret: ${{ secrets.OSS_SECRET }}
    - name: 6. Upload to OSS 
      run: ossutil cp public/ oss://my-bucket/ -r -f

如果你没有使用Github托管静态博客的代码，推荐使用。否则你就需要自己造轮子了，而且不一定那么好用。

其他小技巧

1. 可以使用多个全角空格 控制 Markdown 表格宽度（多个半角空格会被markdown渲染引擎自动删至一个空格）
2. 使用vscode-markdown插件使用快捷键提高写文效率
3. 使用pngquant压缩桌面截图大小，参考这里
4. 使用hexo-toc为markdown生产目录
5. 可以在header中加入以下代码强制HTTP转HTTPS:

if (location.host !== 'localhost:XXXX' && location.protocol !== 'https:') {
    location.replace(`https:${location.href.substring(location.protocol.length)}`);
}

文末总结

终于肝完这篇文章，尽管还有很多不足，但本着80/20法则的精神还是发出来了。

下面是针对全文的一个总结：

1. 推荐使用 静态博客 而不是 动态博客
2. 省钱、稳定、速度快 是博客存储服务的核心需求， 阿里云OSS 是个好选择
3. 使用静态博客框架 避免重复造轮子，推荐主流框架 Hexo
4. 使用 Hexo自定义主题 创造属于你的独一无二的漂亮界面
5. 目前国内没有好用的静态博客评论解决方案，如果真的需要评论功能，建议自己造轮子 或 使用动态博客
6. Github Actions 是自动化部署的不二选择
7. 总结了一些小技巧

希望通过本文的帮助，你也可以搭建出属于你自己的静态博客！

2021年02月17日