现在同学们写博客有很多渠道和工具可以选择,不想折腾的可以用阿里云博客,CSDN,简书等,开箱即用,体验良好。稍微极客一点的可以选择wordpress,ghost自建博客,就是要自己买服务器,这一套流程玩下来,对建站基础也能做到心中有数了。还有些同学喜欢静态博客,例如jekyll, octopress, hexo等,还有基于react的gatsby也挺酷炫的(正在学习中),这类工具生成的静态博客可以托管在一些第三方的平台上,例如github pages,国内的coding.net,阿里云OSS等。作为阿里系公司的小员工,我选择把静态博客托管在阿里云OSS上,哈哈哈~静态博客工具,这里使用的是hexo,因为使用简单,功能强大。
首先,我假设你已经知道如何用hexo构建静态博客了,具体操作请参考hexo的官方教程即可,真的很简单,我们后面要做的就是把public目录下的文件都按照原有目录结构上传到阿里云OSS上就行。
然后,我们开始折腾OSS。根据官方的指引,创建一个bucket,名字你们看心情。博客一开始应该不会有什么人看的,所以存储类型选择低频访问就好。读写权限要选择公共读,因为是要对外给别人看的。
然后我们要在基础设置里面设置一下静态页面,默认首页填index.html,404可填可不填。保存即可。
下图是我成功配置后的截图,具体如何绑定域名及开启https请参考阿里云官方文档管理域名
hexo g 命令可以将整个静态网站生成在 public 下面,我们可以通过oss的sdk或者图形化的oss-browser客户端来上传文件,直接通过网页上传有文件数量的限制。
要想通过sdk或者客户端访问OSS,需要通过访问控制RAM获取用户的accesskey和secret。如果之前没有开通RAM服务,需要先开通RAM服务。
下载好oss-browser后,我们需要配置登录信息,填入刚才获取到的AccessKey和Secret,Endpoint选择默认的公共云。登录后,就可以看到我们刚刚创建的bucket,点击进入后就可以开始上传下载等操作。
oss-browser客户端支持拖动上传,只要将选中的文件(包括文件夹)拖到客户端界面内,就会自动上传,而且能够保持结构不变。这里,我们先进入到Public目录下,然后全部选中,整个拖到oss-browser界面内。
此时,如果配置好了自定义域名,就可以通过自定义的域名进行方案,如果没有,使用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
方法一样,找到关键词,搜索,搞定。
按照上面的方法,最后找出来的地方是调用了hexo内部的函数list_tags。这个就不是修改主题文件了,而是要修改hexo这个模块里的代码,在这里:node_modules/hexo/lib/plugins/helper/list_tags.js。
这样,在点击文章底部的标签时,就会进入标签对应的文章列表了。
综上,基本就完成了hexo博客和OSS的适配。让我们既能享受到静态博客的便捷高效,也能体验OSS的低成本高可用(国内必须比github pages快)。
后续: