效果见 https://zengwu.com.cn
环境
hexo-next: 5.1.4
hexo: 4.2.0
hexo-cli: 3.1.0
os: Windows_NT 10.0.17763 win32 x64
http_parser: 2.8.0
node: 10.16.3
v8: 6.8.275.32-node.54
uv: 1.28.0
zlib: 1.2.11
brotli: 1.0.7
ares: 1.15.0
modules: 64
nghttp2: 1.39.2
napi: 4
openssl: 1.1.1c
icu: 64.2
unicode: 12.1
cldr: 35.1
tz: 2019a
效果见 https://zengwu.com.cn
1. 修改hexo适配oss访问规则
hexo生成的静态博客很多都是以文件夹形式的，然后默认省略了index.html。而对于阿里云的OSS来说，并不会默认访问文件夹下的index.html，所以，生成的时候需要做调整
1.1 文章链接修改
文章的连接直接修改根目录下_config.yml中permalink: p/:abbrlink.html的生成规则，详细可以参考之前写的文章链接持久化
1.2 归档、标签、分类修改
修改主题目录下_config.yml中的menu:加入index.html
menu:
home: /|| home
#about: /about/|| user
top: /top/index.html|| signal
tags: /tags/index.html|| tags
categories: /categories/index.html|| th
archives: /archives/index.html|| archive
# Enable/Disable menu icons.
menu_icons:
enable: true
1.3 文章翻页跳转
打开themes\next\layout\_partials\pagination.swig文件，添加format文件路径
paginator({
prev_text: '',
next_text: '',
mid_size: 1,
format: 'page/%d/index.html',
escape: false
})
1.4 目录分类页中链接修改
打开themes\next\layout\page.swig文件修改list_categories
修改前： {{ list_categories() }}
修改后： {{ list_categories({suffix: 'index.html'}) }}
1.5 标签页中链接修改
next中标签用到了tagcloud而不是list_tags,而tagclud并没有suffix配置，所以，可以仿照list_tags修改一下。
打开node_modules\hexo\lib\plugins\helper\tagcloud.js, 加入suffix配置
修改前：const { transform } = options;
修改后：const { transform , suffix = ''} = options;
在result.push的超链接中加入${suffix}
result.push(
`${transform ? transform(tag.name) : tag.name}`
);
修改tagcloud调用。打开themes\next\layout\page.swig文件修改tagcloud
修改前：{{ tagcloud({min_font: 12, max_font: 30, amount: 300, color: true, start_color: '#ccc', end_color: '#111'}) }}
修改后：{{ tagcloud({min_font: 12, max_font: 30, amount: 300, color: true, start_color: '#ccc', end_color: '#111',suffix: 'index.html'}) }}
1.6 文章内的目录和标签连接
打开themes\next\layout\_macro\post.swig文件
- 找到
for cat in post.categories在href中添加index.html
{% for cat in post.categories %}
{{ cat.name }}
- 找到
{% for tag in post.tags %}在href中添加index.html
{% for tag in post.tags %}
{{ tag.name }}
{% endfor %}
1.7 左侧状态栏日志链接
修改themes\next\layout\_macro\sidebar.swig文件
修改前：
修改后：
2. 部署到阿里云OSS
阿里云OSS国内站点需要绑定备案的域名才可以当静态网站范围。
2.1 登录阿里云账号进入OSS
2.2 新建Bucket
2.3 设置静态页面
设置根目录下index.html为静态页面
2.4 配置域名
2.5 上传文件
清理编译
hexo clean && hexo g
将博客目录下的public目录上传到OSS根目录下
2.6 脚本自动提交
安装阿里oss脚本
npm install ali-oss
在跟目录下创建depoly-to-oss.js文件
const fs = require('fs')
const path = require('path')
const util = require('util')
const OSS = require('ali-oss').Wrapper
const promisifyReaddir = util.promisify(fs.readdir)
const promisifyStat = util.promisify(fs.stat)
const client = new OSS({
region: '',
//云账号AccessKey有所有API访问权限，建议遵循阿里云安全最佳实践，部署在服务端使用RAM子账号或STS，部署在客户端使用STS。
accessKeyId: '',
accessKeySecret: '',
bucket: ''
})
// 上传的目录
const publicPath = path.resolve(__dirname, './public')
// 同步上传文件
async function put(proPath = '') {
const dir = await promisifyReaddir(`${publicPath}${proPath}`)
for (let i = 0; i < dir.length; i++) {
const stat = await promisifyStat(path.resolve(`${publicPath}${proPath}`, dir[i]))
if (stat.isFile()) {
const fileStream = fs.createReadStream(path.resolve(`${publicPath}${proPath}`, dir[i]))
console.log(`上传文件: ${proPath}/${dir[i]}`)
const result = await client.putStream(`${proPath}/${dir[i]}`, fileStream)
console.log(result)
} else if (stat.isDirectory()) {
// 递归子目录
await put(`${proPath}/${dir[i]}`)
}
}
}
put()
编译之后，直接使用上传
node depoly-to-oss.js