Hexo部署到阿里云OSS上

发表于 | 更新于: 2020-03-01 | 分类于
字数统计: 1.1k | 阅读时长 ≈ 5 | 评论: | 阅读:

环境

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

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: '<i class="fa fa-angle-left" aria-label="'+__('accessibility.prev_page')+'"></i>',
       next_text: '<i class="fa fa-angle-right" aria-label="'+__('accessibility.next_page')+'"></i>',
       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(
      `<a href="${this.url_for(tag.path)}${suffix}" style="${style}">${transform ? transform(tag.name) : tag.name}</a>`
    );

修改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 %}
    <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
      <a href="{{ url_for(cat.path) }}index.html" itemprop="url" rel="index">
        <span itemprop="name">{{ cat.name }}</span>
      </a>
    </span>
  • 找到for tag in post.tags在href中添加index.html
  {% for tag in post.tags %}
    <a href="{{ url_for(tag.path) }}index.html" rel="tag"><i class="fa fa-tag"></i> {{ tag.name }}</a>
  {% endfor %}

1.7 左侧状态栏日志链接

修改themes\next\layout\_macro\sidebar.swig文件

修改前：<a href="{{ url_for(config.archive_dir) }}">
修改后：<a href="{{ url_for(theme.menu.archives.split('||')[0]) }}">

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: '<oss region>',
  //云账号AccessKey有所有API访问权限，建议遵循阿里云安全最佳实践，部署在服务端使用RAM子账号或STS，部署在客户端使用STS。
  accessKeyId: '<Your accessKeyId>',
  accessKeySecret: '<Your accessKeySecret>',
  bucket: '<Your bucket name>'
})

// 上传的目录
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
0%