前言

由于 Github.io 在许多地区的龟速，几年前因静态网页部署与 Coding 相识，彼时的 Coding 商业定位在我看来还是 Github 的国内替代品（吃政策的软饭，例如百度之于 Google）。几年的光景，在洋葱猴实验室迫真认识了好几位大佬，并成为好友；另一方面，当年的小洋葱猴现在已然成为了手握腾讯投资、与腾讯云深度整合开发产业链的”腾云扣钉”了。

Coding 的 CEO 张海龙之前写过一篇文章分析 Coding 的差异化竞争思路，我感觉非常受教，也推荐给大家看看：为什么 GitHub 免费了 - CODING BLOG。自从把博客的 Hexo 框架从电脑硬盘搬到 Coding 的 CloudStudio 里以后我就没再怎么琢磨过他的 DevOps 工作流了，前两天趁着 Coding 把静态部署整合至腾讯云的 Serverless 服务的契机重新熟悉了一下。

看过我博客关于界面的人可能知道目前我的博客部署采取的就是这样一种模式，只不过相比较而言更加繁琐：先用 Markdow 编辑器写好文章，然后打开 CloudStudio 新建 md 文件导入文章，编译完后把改动通过 Git 存档，再把生成的静态文件下载到本地，通过 cosbrowser 工具上传到腾讯云对象存储，再通过我写的 php 脚本调用 CDN 的 API 刷新缓存，更新的博客网页才会正式上线。就这一段话，我写出来我都觉得累，所以在之前那篇文章中并没有介绍这种搭建方式。

然而 Coding 与腾讯云的整合，为我等不会写自动化构建脚本的小白实现了 Copy-Coder 的至高懒政梦想。

Serverless 模式下的静态博客部署

成本

首先，这篇文章使用的网站部署方式在现有情况下是不完全免费的，当然比起有些土豪萌新动辄 4C8M ECS 搭博客的行为还是极具性价比的。

域名：由于 Coding 分配的默认域名是一长串乱码，所以非常建议买一个自己的独有的域名！怎么买域名这个事简单到我都懒得扔我的aff链接，百度一下吧～有了域名以后可以做除了搭博客之外很多很多的事情。
另外，建议在腾讯云买域名 后就开始备案，备案流程一般需要半个月，并且稍微有些复杂，不过腾讯云有备案专席客服全程帮助，非常贴心。如果不备案，大陆的访问加速服务基本都无法使用，偏离本文标题中的“极速”。
对象存储和CDN：这俩哥们只有像我这种老用户才会有永久免费的用不完的额度啦～腾讯云新用户目前只有6个月免费期，但是不要慌，首先不说你写博客能不能坚挺过六个月，就凭各位自己心里有数的网站访问量，一个月的消费也是很难超过1元钱滴～
实名认证：想要访问速度不拉胯，境内服务少不了，由于众所周知的原因，境内网信服务非实名人员寸步难行。在接下来的步骤里我会跳过所有要求实名认证的步骤。

预计年度花费：cn域名 35元（甚至如果用 .ml 之类免费域名这也可以省去） + 预估 COS+CDN 弹性费用 10 元。

Serverless 概念的提出初衷，就是把复杂的实现方式和硬件封装进后端，而内容创作者和开发者仅仅需要关注自己最核心的工作，因此本文并没有什么高深的技术操作，我也尽量详细的描述每一个步骤，老手建议不读，半桶水建议跳读2333…

准备：博客框架的搭建

点击这里去注册 CODING 团队账号：https://e.coding.net/register ，在注册 CODING 账号的时候会用注册邮箱和手机同步自动开通对应的腾讯云账号。
在团队首页，点击左边栏「项目」，然后点击右边的「创建项目」按钮，随意选择一个模板（建议DevOps项目），填写项目名称和 Git 链接后保存，来到项目管理界面。
点击左边栏「代码仓库」，然后点击右边的「新建代码仓库」按钮，填写仓库名称，选择 Git 类型（可以关闭代码扫描）后直接确认，来到代码仓库页面，注意这个仓库的链接，待会会用到。
这时候点击最左上角的头像，回到团队首页，点击左边栏的「CloudStudio」，然后「新建工作空间」，运行环境选择 Node.js，仓库选择空（有基础的同学可以添加SSH公钥后把刚刚创建的空代码仓库的SSH链接复制过来，省去待会手动指定仓库的步骤）。
进入新建的工作空间（需要注意的是白嫖 CODING 的云计算资源每天仅允许运行 4 个小时，否则你得充钱变得更强才行）；有人肯定有扑面而来的亲切感，卧槽这不 VScode 吗……
在工作间页面同时按下CTRL+～（就ESC键下面、数字1左边这个飘带键，记住这个打开终端的按键组合），打开命令行终端。
首先我们安装 cnmp 以避免 GFW 对我们安装依赖的不利网络影响，复制下面这行代码，在命令行界面中右键，就会粘贴上去：npm install -g cnpm --registry=https://registry.npm.taobao.org
出现下面这行字代表安装成功，在安装过程中懂英文的朋友可以经常看到各种黄色 WARN 级别的报错，这种是可以忽略的，如果出现红色的 ERROR 级别报错，则要检查一下问题出在哪里，否则程序多半是不能正常运行的。安装完成后我们输入 cnpm -v 检查一下安装是否成功，出现下面的一堆配置信息代表成功。
接下来安装 Hexo 博客程序：cnpm install hexo-cli -g
出现上图红框中提示表示安装成功，然后终端输入 hexo init 初始化博客的编译环境，这一步由于需要从 Github 上拉取依赖，根据网络环境可能耗费时间不等（我晚上一直卡在这一步，白天才成功QAQ，建议到这一步以后找点别的事去消磨一下二十分钟的光阴）。
看到INFO Start blogging with Hexo!字样表示初始化成功，博客框架就搭建完成了。
还差一点，再安装两个必备插件，分别复制下列的代码，一次运行一行：
cnpm install hexo-server --save
cnpm install hexo-deployer-git --save

博客正式安装完成，现在我们来在线预览一下博客的样子。在工作间页面同时按住CTRL+P，在弹出的框中输入>preview，选择Preview: Generate Preview Config File，如下图，在弹出的文档中，按照如下配置：

# .vscode/preview.yml
autoOpen: false # 打开工作空间时是否自动开启所有应用的预览
apps:
  - port: 4000 # 应用的端口
    run: hexo s # 应用的启动命令
    root: ./ # 应用的启动目录
    name: 博客在线预览 # 应用名称
    description: 博客在线预览 # 应用描述
    autoOpen: false # 打开工作空间时是否自动开启预览（优先级高于根级 autoOpen）

注意：所有涉及到配置文件的编辑一定务必在英文冒号的后面空一格再输入配置项，例如：port:[空格]4000！另外尽量不要输入中文字体及中文标点符号，最大程度避免编译失败可能。

然后再次同时按住CTRL+P，输入>preview，选择Preview: Open Preview Tab，即可打开预览页面。

到这里，最复杂的一步：命令行下博客程序的安装就结束了，怎么样，只要你仍有耐心，是不是挺简单的。

Hexo 的简单认识与操作

1.博客信息的配置

打开 config.yml文件，更改#Site和URL类下的配置，如下图，注意：所有的配置项冒号后面必须先有一个英文空格！
基础英文单词都很好理解，其中URL地址填https://你买的域名地址。

拉到最后，更改#Deployment类下的配置，把在准备阶段第3小步中新建的代码仓库链接复制到 repo:后面，仍然注意冒号后要有空格哟！，另外是复制你自己新建仓库的代码而不是填我的哈！

　

2.博客主题的更换

可以在 Hexo 官方网站或者百度找到符合自己口味的别人分享的第三方主题样式。
首先找到主题的官方网站，一般是开发这个主题的站长个人博客，或者是 Github，以我参与多次协助纠错的博客主题 maupassant 为例：
下方有主题介绍、详细的安装教程和配置项介绍之类的，一般开发大佬还是比较贴心的（人性化）。
根据教程安装：
首先修改config.yml倒数第二项，把主题名称从默认的landscape改成maupassant；
然后按照主题安装步骤，分别运行三行命令，如上图红框。
注意：在这里我使用cnpm命令替换了教程中默认的npm安装命令，是因为cnpm使用的国内镜像，访问速度快很多，大多数人安装不成功一般都是从境外npm服务器下载依赖过程中出问题。

由于每个主题需要的渲染器、配置项都不同，所以这里没有公式化的教程。如果您更换主题遇到问题，除了可以直接咨询开发者，也可以加入交流群或者问我(＾Ｕ＾)ノ~ＹＯ

3.开始博客写作

在正式开启书写我们第一篇博客文章时，建议可以稍微熟悉一下 Markdown 写作方式（可选）；
掌握基础的几个还是很有必要的：例如 ##小标题、**粗体**、*斜体*、! [图片描述] (https://图片链接)，其他可以用到的时候现查。
Markdown概念和语法的介绍网上一大把，可以自食其力。https://www.zhihu.com/question/20409634

Markdown 编辑器中的图片引入，就需要了解一下图床的概念，图床可以用自己的腾讯云COS，也可以用公用图床，例如 https://sm.ms/。

当然完全不用样式书写文章，单纯的堆砌文字也是可以的～
　

在工作间页面按 CTRL+～，在终端中输入hexo new first-article.md，或者直接在 Source/_post文件夹下新建 first-articel.md 文件，即可在编辑器中写文章啦（可先用别的 Markdown 编辑器写完以后再复制进来）。

4.渲染静态博客网站

当博客配置完成后，可随时将博客现有的内容渲染输出，要注意，未进行静态的渲染的博客只有作者才能看到，渲染完成后会生成静态博客所需的所有文件到根目录的 Public 文件夹。

现在假装我们已经写了一篇文章：Hello World，然后试着渲染一下。

在命令行终端中输入hexo g，等待渲染完成，如下图，新生成的 Public 文件夹里就包含了一个完整博客网站所需的所有文件啦。

网站的存储与展示

现在有了网站内容，就差个平台展示了。

1.推送到代码仓库

使用 Hexo 的 Git Deploy 工具推送已经生成的网站文件到代码仓库，注意一定要先生成(Generate)网站内容，再推送(Deploy)。

在推送之前，要先告诉 Git 服务你是谁，推送到哪个仓库，其中仓库的地址我们之前已经填到 config.yml的repo里了，我们只需分别在终端中运行下列三条命令（不要丢掉英文引号和空格）指定 Git 操作者信息，其中用户名可以随意，但是邮箱地址需要填 Coding 账号的注册邮箱。
git config --global user.name "用户名"
git config --global user.email "邮箱地址"
git config --global credential.helper store

然后运行hexo d，Git 程序在第一次推送文件时需要验证账号密码，账号就是你 Coding 的注册邮箱，密码是注册时填写的密码，在终端输入密码时是不会出现填充符的（也就是一片空白，不用误以为没输入成功），然后回车，验证成功后 Public 文件夹就会立刻推送到你的代码仓库。

现在可以暂时关闭 CloudStudio 的工作间了。

2.基于代码仓库的静态部署

现在我们回到最开始的 Coding 项目管理页面（不到了的话，就重新打开https://e.coding.net）；
进入首页后，点击左边栏「代码仓库」，看到我们刚刚创建的空白代码仓库，现在已经有了刚刚我们hexo d推送的网站文件。

再在左边栏选择「持续部署」 - 「静态部署」栏目（如果没有的话在左下角仓库设置中去打开这个功能的开关）；首次部署先实名认证，然后点击「新建静态网站」，随意填网站名称，除了部署地域，其他项目保持默认即可。

因为前面我前面建议在开始前先把域名做工信部备案，所以如果你的域名已经备案成功，那么现在可以把地域选在内陆城市，否则需要放在香港绕过政策限制。

如果你腾讯云的账号已经完成认证，那么现在部署成功的网站就会给你生成一个很长很长的访问链接，我们点进去看一下。

成功！这个部署本质上是把代码仓库里的网站内容复制到 Coding 绑定的腾讯云账号下对象存储（COS）的存储桶里，这个对象存储则类似于云服务器的硬盘，其内的内容可以通过各种方式开放给公众访问，甚至你可以用它来做一个不限速的云盘。

PS：以后在 CloudStudio 中新增、修改博客内容以后，可以通过 hexo g -d 一键生成并推送网站静态内容到代码仓库，同时仓库的持续部署功能会自动将仓库的变动内容重新拉取到存储桶部署，而不需要任何手动操作啦~

3.腾讯云 COS + CDN 配置

COS 配置

首先打开腾讯云控制台页面，使用注册 Coding 账号的信息登录腾讯云，然后转入对象存储 - 存储桶管理界面，找到「coding-pages-bucket-xxxxxx」字样。
点进去，选择「基础配置」，确认静态网站处于开启状态。
如果你的买的域名已经完成了备案，那么可以启用大陆访问加速服务：
1、选择「域名与传输管理」，开启加速域名（即CDN，意思是将源站内容复制分发至全国各地区的服务器中，访问网站的用户会自动从就近的服务器中读取数据，而不是直接连接到源站，从而加速访问、减轻源站压力），按下图配置，保存即可。

2、在「自定义加速域名」中添加你购买的域名，然后点击保存上线，去 DNS 解析管理中添加对应的 CNAME 信息即可。
如果未备案或还未成功，那么暂时不能使用 CDN 服务加速，后面的 CDN 配置篇不用看了；选择 COS 左边栏「域名与传输管理」中的「自定义源站域名」，添加自己购买的域名，与上面做法相同，到 DNS 解析管理中添加对应的 CNAME 信息。
稍微等一会，域名解析就会生效，这时候就可以自定义域名访问网站了。如果你开通了加速域名（CDN），那么继续往下走嗷。

CDN 配置

仍然在刚刚的存储桶管理界面，选择左边栏的「函数计算」，选择「CDN缓存刷新函数」下的「添加函数」，如下图，然后保存。现在，每次你在 CloudStuio 中输入 hexo g -d 命令后，更新的博客内容文件都会自动的部署到对象存储桶并自动刷新 CDN 的缓存，网站几乎立刻就完成了更新而无需你手动操作。
转到内容分发网络(CDN)管理界面，选择自己刚刚开通的自定义域名，切换到「访问控制」的「IP访问限频配置」，建议值不超过100/QPS，避免一觉起来由于CC等网络攻击让你一夜破产（我的经验教训）。防盗链有兴趣的可自行琢磨配置，一般不是资源分享类网站无需担心被盗链。、
转到「高级配置」，设置带宽封顶，建议值不超过100/Mbps，并在超出后回应404，不要选回源，以避免一觉起来由于DDOS等网络攻击让你一夜破产（我的经验教训）。
现在网站已经基本搭建完成，可以使用自定义的 CDN 域名作为日常博客域名，开启极速访问体验。有一点忘了强调，这里的自定义 CDN 域名要对应到博客程序 config.yml 配置项中第二项 ‘URL’中的链接。

如果不对要记得改过来，再重新 hexo g -d。
在 CDN 域名管理界面中选择「图片优化」，开启 WEBP 压缩以减少外网流出流量。
(以下为可选配置) 配置HTTPS访问：先在腾讯云SSL证书管理中选择「申请免费证书」,选择默认的亚洲诚信证书，然后按照要求分别填写相关信息，下一步后可用「自动DNS验证」，点击确认申请；
约莫30分钟后会收到 SSL 证书申请成功的通知邮件和短信，然后在 CDN 域名管理界面中选择「Https配置」，开启 SSL 证书，选择腾讯云托管证书后确定，后面的设置可按需更改。