开发者社区> 小蓝胖子> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

将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,在域名管理->证书托管->申请签发证书。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
《阿里云 JindoFS+OSS 数据上云实战》电子版地址
为了帮助读者能更全面地了解 JindoFS,我们特地编撰了这本电子书。从架构到场景到实操,全方面解读jindoFS。
0 0
Typora配置阿里云OSS作为图床上传图片
Typora配置阿里云OSS作为图床上传图片
0 0
《阿里云 JindoFS+OSS 数据上云实战》电子版地址下载
为了帮助读者能更全面地了解 JindoFS,我们特地编撰了这本电子书。从架构到场景到实操,全方面解读jindoFS。
0 0
使用 Nginx 作为阿里云对象存储OSS网关,给 OSS “限速”
对象存储 OSS 是经常被用于网盘存储的底层 PaaS 产品之一,但是在接触过程中很多的客户都表示使用对象存储 OSS 就怕流量控制不住,如果是企业网盘万一员工大量下载大容量文件就会导致添加流量账单。那么是否有办法给对象存储“限速”呢?
0 0
谷粒学院(八)阿里云oss | 头像上传 | Nginx(二)
谷粒学院(八)阿里云oss | 头像上传 | Nginx
0 0
谷粒学院(八)阿里云oss | 头像上传 | Nginx(一)
谷粒学院(八)阿里云oss | 头像上传 | Nginx
0 0
《阿里云 JindoFS+OSS 数据上云实战》下载
为了帮助读者能更全面地了解 JindoFS,我们特地编撰了这本电子书。从架构到场景到实操,全方面解读jindoFS。
0 0
阿里云OSS传输加速和CDN有什么区别?
阿里云对象存储OSS传输加速和阿里云CDN的区别
0 0
阿里云OSS PostObject错误及排查详细版本
PostObject使用表单上传文件到OSS。PostObject的消息实体通过 多重表单格式multipart/form-data 编码,详细说明请参看 RFC 2388。Put Object中参数通过HTTP请求头传递,Post Object参数则作为消息体的表单域传递。
0 0
+关注
小蓝胖子
博观而约取,厚积而薄发
文章
问答
文章排行榜
最热
最新
相关电子书
更多
百问百答-OSS (上)
立即下载
百问百答-OSS (下)
立即下载
阿里云 JindoFS+OSS 数据上云实战
立即下载