将hexo静态博客部署到阿里云OSS上

现在同学们写博客有很多渠道和工具可以选择，不想折腾的可以用阿里云博客，CSDN，简书等，开箱即用，体验良好。稍微极客一点的可以选择wordpress，ghost自建博客，就是要自己买服务器，这一套流程玩下来，对建站基础也能做到心中有数了。还有些同学喜欢静态博客，例如jekyll, octopress, hexo等，还有基于react的gatsby也挺酷炫的（正在学习中），这类工具生成的静态博客可以托管在一些第三方的平台上，例如github pages，国内的coding.net，阿里云OSS等。作为阿里系公司的小员工，我选择把静态博客托管在阿里云OSS上，哈哈哈~静态博客工具，这里使用的是hexo，因为使用简单，功能强大。

使用hexo构建静态博客

首先，我假设你已经知道如何用hexo构建静态博客了，具体操作请参考hexo的官方教程即可，真的很简单，我们后面要做的就是把public目录下的文件都按照原有目录结构上传到阿里云OSS上就行。

创建并配置OSS

创建OSS

然后，我们开始折腾OSS。根据官方的指引，创建一个bucket，名字你们看心情。博客一开始应该不会有什么人看的，所以存储类型选择低频访问就好。读写权限要选择公共读，因为是要对外给别人看的。

设置静态页面

然后我们要在基础设置里面设置一下静态页面，默认首页填index.html，404可填可不填。保存即可。

配置域名

下图是我成功配置后的截图，具体如何绑定域名及开启https请参考阿里云官方文档管理域名

上传静态站点

hexo g 命令可以将整个静态网站生成在 public 下面，我们可以通过oss的sdk或者图形化的oss-browser客户端来上传文件，直接通过网页上传有文件数量的限制。

开通RAM服务

要想通过sdk或者客户端访问OSS，需要通过访问控制RAM获取用户的accesskey和secret。如果之前没有开通RAM服务，需要先开通RAM服务。

创建用户

保存AccessKey和AccessKeySecret

配置oss-browser并上传

下载好oss-browser后，我们需要配置登录信息，填入刚才获取到的AccessKey和Secret，Endpoint选择默认的公共云。登录后，就可以看到我们刚刚创建的bucket，点击进入后就可以开始上传下载等操作。

oss-browser客户端支持拖动上传，只要将选中的文件（包括文件夹）拖到客户端界面内，就会自动上传，而且能够保持结构不变。这里，我们先进入到Public目录下，然后全部选中，整个拖到oss-browser界面内。

检查能否通过域名访问

此时，如果配置好了自定义域名，就可以通过自定义的域名进行方案，如果没有，使用OSS的公网访问域名也是可以的。同学们可以随便操作下，然后应该会发现有些地方不对：

• 当你点击文字标题想进入文章的时候；
• 当你点击阅读全文的时候；
• 当你点击文章底部标签的时候；
• 当你在侧边选择分类的时候；
• 当你在文章底部选择下一篇的时候；
  你会发现网站最后都进入了主页，即默认的index.html。

修改hexo代码适配oss访问规则

举个栗子，hexo站点的默认访问路径类似这样：
http://localhost:4000/archives/
也就是访问的路径都是不带有index.html的, 但是OSS的访问路径必须为绝对路径, 必须包含index.html, 否则会导致一直访问的都是 OSS中配置的默认首页。hexo提供的默认主题，包括该站点使用的indigo主题都没有该配置项。特别是标签部分，需要修改hexo模块内的listTagsHelper函数，其实思路很简单，就是找到正确的地方，添加一个index.html即可。

修改文章标题处的代码

通过检查标题元素，我们找到了post-title-link这个类型。

在编辑器中搜索，我用的是vscode，推荐给大家，确实挺好用的。找了title.ejs文件中，在如下的位置，手动添加index.html就好了。

保存，我们可以通过hexo s本地启动服务检查一下。在本地查看时，是不会出现在oss上的情况的，但是我们可以查看点击标题时的地址栏，最后是不是多了一个index.html呢。可以再次hexo g，然后上传新的静态站点。要先删除原来的目录。

修改阅读全文处的代码

我们使用上面的方法，检查元素，找到对应的文件，添加index.html一样搞定。

修改侧边栏的归档、标签、分类

我们需要在当前主题的_config.yml文件内修改，如下图。

修改标签页中的标签栏

打开themes/indigo/layout/_partial/tags-bar.ejs，找到每个标签的连接处，添加index.html

修改prev和next处的代码

方法一样，找到关键词，搜索，搞定。

最后，修改标签的链接

按照上面的方法，最后找出来的地方是调用了hexo内部的函数list_tags。这个就不是修改主题文件了，而是要修改hexo这个模块里的代码，在这里：node_modules/hexo/lib/plugins/helper/list_tags.js。

这样，在点击文章底部的标签时，就会进入标签对应的文章列表了。
综上，基本就完成了hexo博客和OSS的适配。让我们既能享受到静态博客的便捷高效，也能体验OSS的低成本高可用（国内必须比github pages快）。

后续：

• 都用了阿里云OSS了，再加个CDN也是理所当然的嘛，静态资源多的时候建议开启。
• 个人和初创公司建站可以省去ECS或者虚拟主机的产品和运维成本。
• OSS支持免费的https，在域名管理->证书托管->申请签发证书。