由于最近正在参与开发公司的分布式对象产品,虽说我不是专业的存储技术专家,但是对象存储怎用的总是要明白的吧。正巧,我的博客将于近期空间到期,于是乎,我就借此机会,把我的博客空间有wordpress改为hexo,同时,将博客部署在阿里云的OSS对象存储中,并且开启CDN加速,实测访问速度嗖嗖的,关键是还比原来的IDC空间要便宜的多,算下来,一年的费用也就9块钱,简直太爽了!

现在就开始操作吧!

博客迁移:wordpress->hexo

大概的步骤就是如下:

参考: [wordpress迁移到hexo的不完全]: http://blog.mallol.cn/2018/ffde19de.html

  1. 安装hexo

    1
    2
    3
    4
    sudo npm install -g hexo
    hexo init blog
    cd blog
    npm install
  2. 从wordpress后台导出所有内容

    从wordpress后台导出所有内容

  3. 把该xml传到服务器hexoblog目录

    1
    scp  zouhongzhao.wordpress.2019-08-06.xml name@ip:/home/www/hexoblog/
  4. 迁移数据

1
npm install --save hexo-migrator-wordpress

以下参考:https://www.jianshu.com/p/d29fab938bcc

准备阿里云账号

  1. 一个阿里云账号并且开通了对象存储服务, CDN 服务

  2. 一个成功通过备案的域名

创建OSS存储桶

image-20190827222322793
我这里已经创建过命名为 15v-blog 的 bucket 所以提醒我重名.
区域, 如果没有特殊要求(需要和已有的服务器同一区域, 以便于内网访问)的话, 创建离你的地理位置比较近的区域, 上传速度快一点, 😹国内其实也没有太大的区别.
存储类型为标准存储, 因为博客的资源需要经常被访问
读写权限, 我的读写权限为公共读, 你可以配置为私有, 不过私有的访问起来需要凭证, 麻烦点, 可以配置为公共读, 然后设置 referer(在基础设置 -> 防盗链) 来限制访问, 一定不能设置为公共读写.
填写完成之后点击确定, 创建完成.

img

OSS 的概览:

img

配置 CDN

进入 CDN 控制台点击这里:

img

填写信息:

  • 加速域名, 填写你需要加速的域名, 如 www.jjbiji.com
  • 业务类型为图片小文件类型
  • 源站类型为 OSS, 选择刚刚在上方创建的 OSS 的域名
  • 需要 HTTPS, 端口选择 443 端口, 否则选择 80 端口就可

选择 443 端口之后会出现 回源默认不携带SNI信息 什么是 SNI?, 等会儿要配置 CDN 的 HTTPS 证书, 这里可以忽略这个提示.

img

提交之后进入审核阶段并获取阿里云分配的 CNAME:

提交之后会进入审核阶段, 稍等一会儿(很快), 就会审核通过.

审核通过状态为配置中, 稍等一会儿, 等待阿里云系统分配 CNAME, 分配完成:

img

配置 CNAME:

回到域名管理, 可以看到加速域名对应的 CNAME, 点击复制

img

点击 CNAME 复制, 进入云解析 DNS 配置域名解析, 点击这里:

img

  • 记录类型 必须指定为 CNAME
  • 主机记录填写要加速的域名, 我这里就填了 blog
  • 解析线路默认就好
  • 记录值填写在 CDN 域名管理中分配的域名, 就是刚刚复制的域名
  • TTL 值, 为域名纪录的最长缓存时间, 默认的10分钟也可

img

点击确认, 添加成功.

不需要 HTTPS, 关于阿里云的配置这里就结束了 -> goto HEXO 配置

配置 HTTPS, 需要给自己的加速域名申请一个 HTTPS 证书

DO 有很好的教程, 这里就不重复了

回到 CDN -> 域名管理, 点击配置:

img

配置 HTTPS, 选择开启, 选择自定义上传证书, 给证书起个名字

将申请的 HTTPS 证书的公钥和私钥分别拷贝到对应的输入框内

img

以 centos 7 + nginx 申请的 Let’s Encrypt 为例

fulllchain.pem 为公钥, privkey.pem 为私钥.

img

下面还有是否强制 HTTP -> HTTPS. 15v网全站采用 HTTPS.

img

点击确定, HTTPS 证书将会很快生效.

很重要:修改链接地址

也就是访问的路径都是不带有 index.html 的, 但是 OSS 的访问路径必须为绝对路径, 必须包含 index.html, 否则会导致一直访问的都是 OSS 中配置的首页, NEXT 主题的配置也没有该配置项, 可以修改源码已满足要求.

首先, 修改 archives 的访问地址, 这个的配置在 NEXT 的配置文件中 themes/next/_config.yml:

img

你可以选择直接修改, 或者是在自己的项目的配置文件中覆盖主题的配置文件, 详情请见 https://hexo.io/docs/configuration.html#Overriding-Theme-Config, 中文的文档中没有这一节哦.

第二步, 修改首页博客文的链接, 也就是这里的链接:

img

找到 theme/next/layout/_macro/post.swig, 在 a 链接的后面加上 index.html:

img

第三部, 修改文章底部的链接:

img

找到 theme/next/layout/post.swig, 在 a 链接的后面加上 index.html:

img

至此, 关于 HEXO 的配置也已经完毕, 接下来如何将生成的静态站点上传至 OSS

自动化脚本上传静态站点至 OSS

hexo generate 可以将整个静态网站生成在 public 下面

img

只需要将整个 public 目录上传至 OSS 即可, 但是要保持目录结构.

看一下我写的自动化脚本

需要安装模块 ali-oss

nodejs 版本需要 10.x+

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
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)

// 阿里 OSS access key 拥有对 OSS 的全部权限
const ALIOSSKEY = {
key: '**********',
secret: '***************'
}

const client = new OSS({
// 请填写你的 Bucket 对应的 region
region: '*******',
accessKeyId: ALIOSSKEY.key,
accessKeySecret: ALIOSSKEY.secret,
// 请填写对应的 Bucket 名字
bucket: '15v-blog'
})

const publicPath = path.resolve(__dirname, './public')

async function run(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 run(`${proPath}/${dir[i]}`)
}
}
}

run()

如何获取 OSS key 可以看阿里云的官方文档 -> https://help.aliyun.com/document_detail/31932.html?spm=a2c4g.11186623.2.5.aSV1iO

阿里云的 OSS 的 Nodejs 的 SDK 文档可以看这里 -> https://help.aliyun.com/document_detail/32068.html?spm=a2c4g.11186623.6.748.tuA8lS

如果不想了解脚本源码, 你可以将该脚本放置在 hexo 生成的项目根目录下, hexo generate 生成静态站点之后, node depoly-to-oss.js 可以将 public 目录下的文件上传至对应的 OSS Bucket, 并保持整个目录的结构.

上传文件至 OSS 不收任何费用