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

  1. 云栖社区>
  2. 博客>
  3. 正文

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

steven日成 2018-10-17 11:21:37 浏览3437
展开阅读全文

现在同学们写博客有很多渠道和工具可以选择,不想折腾的可以用阿里云博客,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,在域名管理->证书托管->申请签发证书。

网友评论

登录后评论
0/500
评论
steven日成
+ 关注