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

本文涉及的产品
对象存储 OSS,20GB 3个月
对象存储 OSS,恶意文件检测 1000次 1年
对象存储 OSS,内容安全 1000次 1年
简介:

现在同学们写博客有很多渠道和工具可以选择,不想折腾的可以用阿里云博客,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,在域名管理->证书托管->申请签发证书。
相关实践学习
借助OSS搭建在线教育视频课程分享网站
本教程介绍如何基于云服务器ECS和对象存储OSS,搭建一个在线教育视频课程分享网站。
相关文章
|
28天前
|
存储 安全 对象存储
手把手教你搭建阿里云图床(PicGo+Typora+阿里云OSS),新手小白一看就会
本文详细介绍了怎样帮助新手小白从注册,购买阿里云OSS,到一步一步配置OSS做为图床,和PicGo、Typora软件连接,配置好关联之后,在使用Typora写文章时,如果需要插入图片,只需要将图片复制粘贴到Typora的编辑区域,就会自动通过PicGo上传到指定图床,自动复制外网能访问的URL并展示,简直不要太方便,极大的解决了编辑文章时复制处理图片链接的痛点。
147 2
手把手教你搭建阿里云图床(PicGo+Typora+阿里云OSS),新手小白一看就会
|
1天前
|
Java 应用服务中间件 Linux
在阿里云服务器上部署Tomcat详细图文详解
本文介绍了在阿里云服务器上安装和配置JDK和Tomcat的步骤。首先,需要注册阿里云账号并进行实名认证,然后购买并设置服务器。接着,通过File Zilla连接服务器,创建Java和Tomcat的安装目录,并将JDK和Tomcat的tar.gz文件上传到服务器,解压并重命名。之后,配置JDK的环境变量,将catalina.sh复制到/etc/init.d/目录下,并修改相关配置。最后,启动Tomcat并配置安全组规则,确保可以通过公网访问。
|
2天前
|
弹性计算 JavaScript Java
阿里云服务器搭建部署宝塔详细流程
以下是内容的摘要: 本文主要介绍了在阿里云上创建和配置服务器环境的步骤,包括注册阿里云账号、实名认证、购买和设置服务器、域名的获取与备案、以及使用宝塔面板安装和配置环境。首先,用户需要注册阿里云账号并进行实名认证,选择合适的服务器配置。接着,购买服务器后,要准备并备案域名,以便通过友好的网址访问网站。在服务器上安装宝塔面板,可以方便地管理和配置LAMP/LNMP/Tomcat/Node.js等应用环境。完成这些步骤后,用户还需要在宝塔面板中安装MySQL、Redis等数据库,部署Java或Vue项目,并配置相关端口。最后,将前端项目打包上传至服务器,并设置站点,即可实现网站的上线。
|
2天前
|
应用服务中间件 Linux 开发工具
如何在阿里云服务器快速搭建部署Nginx环境
以下是内容的摘要: 本文档主要介绍了在阿里云上购买和配置服务器的步骤,包括注册阿里云账号、实名认证、选择和购买云服务器、配置安全组、使用Xshell和Xftp进行远程连接和文件传输,以及安装和配置Nginx服务器的过程。在完成这些步骤后,你将能够在服务器上部署和运行自己的网站或应用。
|
4天前
|
NoSQL 关系型数据库 MySQL
阿里云服务器部署项目流程
本文主要讲解阿里云服务器的部署,如何选择配置等
|
4天前
|
存储 Java API
阿里云oss简介和使用流程
本文档介绍了如何准备阿里云OSS(对象存储服务)并开始使用它。首先,需要注册阿里云账号并进行实名认证,然后购买OSS资源包。在阿里云控制台中,可以创建和管理OSS存储空间(称为“Bucket”)。接着,文章简要介绍了阿里云OSS,它是一个基于云端的对象存储服务,提供高可靠性、高性能、低成本和易于使用的特性。 在阿里云OSS控制台,用户可以进行文件的上传和下载操作。通过API,开发者可以使用各种编程语言(如Java)来创建、删除Bucket以及上传、下载和删除文件。例如,Java代码示例展示了如何创建Bucket、上传文件、删除文件以及下载文件到本地的操作。
|
7天前
|
Java 应用服务中间件 Linux
阿里云服务器部署多个tomcat
阿里云服务器部署多个tomcat
|
11天前
|
开发工具 对象存储
阿里云OSS文件上传
阿里云OSS文件上传
53 0
|
11天前
|
存储 缓存 Java
阿里云OSS实战从入门到大神
说起阿里云OSS,那作用和功能都是非常强大的,它可以存放图片,音频,视频等资源文件,这些资源文件,你不必存放到服务器的硬盘里,这样既可以节省服务器硬盘空间,又可以降低服务器的读写压力,非常适合大并发的架构。
52 0
|
23天前
|
存储 对象存储 容器
阿里云OSS对象存储基础入门
阿里云OSS对象存储基础入门
87 0