关于本博客使用的构建方案

写作流程

如果有程序员朋友应该会对这套流程感觉熟悉，这跟我们平时在有 CD （持续部署）的环境下写代码差不多——专心码字，写完提交并推送到远程仓库，喝杯茶的时间就可以看到发表后的文章。
这套技术方案采用了什么技术我会在文章的最后提及，先让我们看看它的优势和具体组成。

方案优势

对程序员友好

像写代码一样写博客——这是我使用这个方案部署博客最大的感受。每次写一篇博客，我只需要使用命令新建一篇文章，然后提交到 GitHub。接下来博客就会自动更新。你甚至还可以利用 Git 进行版本管理。

静态页面

静态页面的部署不需要一个独立服务器，在很多云厂商甚至代码托管平台都有提供免费的静态托管服务。而且静态页面无需繁琐的后台管理，你只要专注于写作。

存低储成本

这同样是静态站点带来的好处之一。博客这样的内容展示为主的站点并不会产生很多数据——除了评论系统。得益于评论的数据量不大，我们可以在下文见到一些云服务商提供了免费且够用的数据存储服务。

全自动构建并部署

当你需要手动构建你的博客时，构建和部署的时长问题会特别突出，因为构建完成后你还有部署的工作需要做。而一旦你的构建和部署都成为自动化流程后，你需要推送（push）你的新文章，其他的工作交由自动构建部署平台去完成。而你可以去喝杯咖啡什么的。至于构建部署需要花费一杯咖啡或者两杯咖啡的时间就变得无足轻重了，因为你已经从繁琐而重复的工作中解放。

不错的访问速度

由于 Velcel 提供良好的 CDN 加速服务，所以你的网站不管在海内外都能有还算不错的访问速度。

不需要备案

由于域名可以从境外域名商购买，部署服务器也在境外，所以你不是非得在国内备案。但我不是鼓励你发布违法信息，请做一个遵纪守法的公民。:)
当然风险仍然存在：

1. 你的域名有可能遭到 DNS 污染，不过这是小概率事件；
2. Vercel 的 IP 有时候也可能被封禁，好消息是 Vercel 会对此类情况进行紧急修复。

这其中的利弊需要自己衡量。

我的技术选型

博客框架——Hexo

Hexo 是一个静态博客框架，很简单的就能生成一个静态站点所需的一切，同时还有很多主题可选，这是它很大的优势。而我选择 Hexo 的另一个原因是它基于 Nodejs 技术栈，这对一个主方向前端的工程师来说更有亲和力。

备选：Hugo

Hexo被人吐槽的一个缺点是当文章数量超过一定量级后构建（build）时间会很长，而与此同时它的竞品 Hugo 则快得多。这是因为 Hexo 是用 Nodejs 写的，而 Hugo 则是用 Go 实现的，很明显单从性能而言，在编译和构建这个场景上 Go 比 Nodejs 更合适。好在自动化构建的场景下构建时间不是第一考虑要素。

代码托管——Github

使用什么代码托管平台取决于下文所说的 Vercel 支持什么。毫无疑问 GitHub 是使用最广泛的代码托管平台 ;)

备选：GitLab、Bitbucket

由于众所周知的原因，GitHub 可能在国内不太稳定。

构建&部署——Vercel

Vercel 是一个静态站点托管以及 Serverless 平台。它支持从代码仓库自动化执行你设定的构建脚本，并将构建后的静态站点部署到它的服务器。由于 vercel支持 GitHub 账号授权登录和已经预置常见项目类型（包括 Hexo）的构建脚本，所以它上手非常快，只需要10分钟就能完成一个已有项目的构建和部署配置。

备选：GitHub Actions + GitHub Pages、Jenkins + Nginx + VPS
Vercel 对前端项目部署非常友好，你甚至无需写脚本。

加速——Vercel

Vercel 自带强大的 CDN，所以这个方案下你无需再找 CDN 服务。

备选：Cloudflare
如果你的博客部署在国外服务器，那么你应该找一个对国内网络环境友好的 CDN 服务商。

评论系统

评论系统的缺失毫无疑问会让博客的交流功能打折扣，我们的选择是一个依托 LeanCloud 实现的评论插件 Waline，利用了 LeanCloud 提供的对象存储服务。LeanCloud 的对象存储在不超过 1GB 空间和每日3万次请求内都是免费的（不保证时效性），对于评论系统这种场景已足够使用，此外还有一个评论后台管理服务，同样利用 Vercel 部署就可以了。

备选：Disqus、Valine、Utterances
评论插件的选择多到甚至可以再写一篇短文。如果你有更好的推荐不妨留言告诉我

搭建步骤

创建 Hexo 项目

1. 安装 Hexo 所需的开发环境 Node.js；

2. 进入命令行终端，访问你想要放置项目的位置并安装 Hexo；

   npm install -g hexo

3. 然后新建一个项目；

   hexo init <你的博客项目名>

4. 进入你的项目文件夹；

   cd ./<你的博客项目名>

5. 安装你喜欢的 Hexo 的主题，我选择的是 Fluid；

   npm install --save hexo-theme-fluid

6. 修改 _config.yml 文件，编辑你的个人信息、博客设置，指定博客主题。如果你选定了一个 Hexo 主题，请参考主题使用手册对其进行配置；

7. 使用 npx hexo new <文章标题>生成新文章，在生成的 markdown 随意写一篇博文。（如果一篇文章都没有可能影响博客效果的显示）；

8. 你可以在命令行终端使用 npx hexo server 查看你的博客的效果，并调整设置。

   初始化代码仓库并托管

9. 安装 git，设置好用户名和邮箱；

10. 进入博客目录，初始化为 git 代码仓库；

    git init

11. 在 GitHub 新建一个公开（public）空白项目；

12. 绑定远程仓库；

    git remote add origin git@github.com:xxx/my_blog.git

13. 提交改动并推送到 GitHub 仓库（在此之前记得把 node_modules/ 添加到 .gitignore 文件）。

    git add .
    git commit -m "init"
    git push -u origin/master

自动构建与部署

1. 前往 Vercel 注册一个账号；
2. 进入 Overview 菜单，点击 New Project 按钮；
3. 如果你已经绑定过 GitHub 授权，那么可以直接导入仓库（Import Git Repository），如果没有可以点击 Add GitHub Account 添加 GitHub 授权；
4. 在 GitHub 授权页面请注意 Repository access 选项，此处可以设置允许 Vercel 访问哪些仓库，在这里选择你的博客项目（或者偷懒选择 All repositories ，虽然不太建议这么做）；
5. 授权完毕返回 Vercel 页面，你会看到 可以选择构建托管的项目，选中你的博客 Import；
6. 进入设置界面，在这里注意在 FRAMEWORK PRESET 的设置项选择 Hexo（或者你用 Hugo 则稍作改变），其他的使用默认设置并点击 Deploy 即可；
7. 等构建完成后选择 Go To Dashboard 你可以看到类似 my_blog-eight.vercel.app 的地址，点击即可访问你的博客。

购买域名

其实到上一步为止，你的博客已经能够在互联网正常运行了。但如果你嫌弃 Vercel 给你的域名过于丑陋难记，那我们需要付出一顿（或几顿）饭钱来给自己的博客添置一个简单好记的域名。

首先确定你是否打算备案。如果备案，大可选择国内的域名商，反之则应该选择一个国外的域名服务商。国外的域名服务商首年往往没有国内域名服务商那么便宜，但相比之下有更多的域名后缀可选。长远来看，首年的折扣对总体费用影响并不大，我们应该考虑的是续费费用和管理难度。

因域名商不同，购买域名的步骤无法一概而论，此处就不赘述。

域名解析

域名解析需要在域名管理平台跟 Vercel 分别做配置。你可以从 Vercel 开始入手，他会提供一定的指引。

1. 打开 Vercel 上你的博客项目，点击 View Domains 按钮来到域名设置页；

2. 在提示 mywebsite.com 的文本框里输入你购买好的域名，点击 Add 按钮；

3. 弹出的窗口会询问你关于 <myblog>.com 和 www.<myblog>.com 哪个作为域名哪个自动重定向的选择，此处默认选项即可；

4. 我们可以看到除了 Vercel 自带的域名之外，<myblog>.com 和 www.<myblog>.com 也被添加到域名解析了。但解析没有成功，因为还需要我们把 Vercel 的 DNS 服务加到域名管理平台处；

5. 如下信息是 Vercel 提示我们需要加到域名管理平台的信息。如何添加 DNS 需要根据自己的平台自行探索或者搜索；

   Type	Name	Value
   A	@	76.76.21.21
   CNAME	www	cname.vercel-dns.com

6. 添加完成后，一般几分钟内 DNS 信息就会刷新，此时回到 Vercel 刷新相关域名，可以看到解析成功了。

添加评论系统

• 通常而言在 Hexo 集成评论系统需要 Hexo 主题提供一定的配置支持，如果你选择的主题支持了 Waline 那可以参考主题文档进行配置。
• NexT 主题虽然不提供 Waline 的支持但 Waline 官方提供了 @waline/hexo-next 的 NPM 包来支持引入 Waline。
• 如果你的主题不支持 Waline 不妨邮件或者提 issue 与主题制作者沟通，甚至能力足够的话可以提 PR 来达到目的。
• 如果以上方案都无法达成目的，那么建议更改评论系统的选型。

关于技术架构——Jamstrack

这个博客的技术选型基于一种被称为 Jamstack 的架构。这个架构最初被命名为 JAMStrack，意为 JavaScript，API，Markup。以本博客技术栈为例，我们可以看到我们使用了 Hexo 这类静态站点生成器（SSG）根据 Markdown 文件生成了一个静态站点，并由 Vercel 实时发布到 CDN。而静态站点中的少量动态功能（评论系统）则由 JavaScript 以及借助 LeanCloud 构建的 API 共同完成。
随着 Jamstrack 技术栈的发展，它的定义已经与最初不同，不过我们还是能总结出一些大概的特点：

• 预渲染——这既是优点也是缺点，预渲染带来了良好的速度和 SEO，但也仅适用于博客，公司官网等展示性站点；
• 解耦——Jamstrack 对前后端解耦十分彻底，提倡使用第三方服务或者自构建 API 实现动态功能有效控制系统复杂度；
• 自动工作流——Jamstrack 充分利用了 GitHub Action、Vercel 等服务商建立起无人值守的“构建——更新”的工作流程；
• 无传统服务器——在 Jamstrack 的典型技术选型中，前端静态站点会直接托管到 CDN，动态功能通常会选择 第三方 API、云函数、对象存储服务等新型技术提供后端服务与数据存储，摆脱亲自管理服务器的时间成本；
• 良好的拓展性——由于 CDN、云存储、云函数的特性，在访问量激增时可以通过向云服务商增加付费的方式无痛扩容。

拓展思考——Serverless

现在我们把 Hexo 框架换成其他的前端项目（Vercel 同样支持 Next.js、Nuxt.js、以及传统的基于 Webpack 的前端项目等），我们可以发现：随着 Serverless 之类的技术思想兴起，现在的前端工程师可以无压力地构建并上线一个项目。让一个前端工程师专注于用户界面构建或让一个内容站长专注于内容创作，这就是这项技术带来的生产力提升。

参考链接

• 《零成本搭建现代博客之搭建篇》- bmpi
• 《Jamstack介绍》- jiansheng