HEXO+阿里云OSS+CDN超流畅静态网站部署

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

现在就开始操作吧!

博客迁移:wordpress->hexo

大概的步骤就是如下:

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

安装hexo

1

2

3

4

sudo npm install -g hexo

hexo init blog

cdblog

npm install

从wordpress后台导出所有内容


把该xml传到服务器hexoblog目录

1

scp  zouhongzhao.wordpress.2019-08-06.xml name@ip:/home/www/hexoblog/

迁移数据

1

npm install --save hexo-migrator-wordpress

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

准备阿里云账号

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

一个成功通过备案的域名

创建OSS存储桶

我这里已经创建过命名为 15v-blog 的 bucket 所以提醒我重名.

区域, 如果没有特殊要求(需要和已有的服务器同一区域, 以便于内网访问)的话, 创建离你的地理位置比较近的区域, 上传速度快一点, 😹国内其实也没有太大的区别.

存储类型为标准存储, 因为博客的资源需要经常被访问

读写权限, 我的读写权限为公共读, 你可以配置为私有, 不过私有的访问起来需要凭证, 麻烦点, 可以配置为公共读, 然后设置 referer(在基础设置 -> 防盗链) 来限制访问, 一定不能设置为公共读写.

填写完成之后点击确定, 创建完成.

OSS 的概览:

配置 CDN

进入 CDN 控制台点击这里:

填写信息:

加速域名, 填写你需要加速的域名, 如www.jjbiji.com

业务类型为图片小文件类型

源站类型为 OSS, 选择刚刚在上方创建的 OSS 的域名

需要 HTTPS, 端口选择 443 端口, 否则选择 80 端口就可

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

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

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

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

配置 CNAME:

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

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

记录类型 必须指定为 CNAME

主机记录填写要加速的域名, 我这里就填了blog

解析线路默认就好

记录值填写在 CDN 域名管理中分配的域名, 就是刚刚复制的域名

TTL 值, 为域名记录的最长缓存时间, 默认的10分钟也可

点击确认, 添加成功.

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

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

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

how-to-secure-nginx-with-let-s-encrypt-on-centos-7

how-to-secure-nginx-with-let-s-encrypt-on-ubuntu-18-04

how-to-secure-nginx-with-let-s-encrypt-on-debian-8

how-to-secure-apache-with-let-s-encrypt-on-centos-7

how-to-secure-apache-with-let-s-encrypt-on-ubuntu-18-04

how-to-secure-apache-with-let-s-encrypt-on-debian-8

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

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

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

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

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

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

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

很重要:修改链接地址

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

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

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

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

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

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

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

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

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

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

只需要将整个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

constfs =require('fs')

constpath =require('path')

constutil =require('util')

constOSS =require('ali-oss').Wrapper

constpromisifyReaddir = util.promisify(fs.readdir)

constpromisifyStat = util.promisify(fs.stat)

// 阿里 OSS access key 拥有对 OSS 的全部权限

constALIOSSKEY = {

key:'**********',

secret:'***************'

}

constclient =newOSS({

// 请填写你的 Bucket 对应的 region

region:'*******',

  accessKeyId: ALIOSSKEY.key,

  accessKeySecret: ALIOSSKEY.secret,

// 请填写对应的 Bucket 名字

bucket:'15v-blog'

})

constpublicPath = path.resolve(__dirname,'./public')

asyncfunctionrun(proPath =''){

constdir =awaitpromisifyReaddir(`${publicPath}${proPath}`)

for(leti =0; i < dir.length; i++) {

conststat =awaitpromisifyStat(path.resolve(`${publicPath}${proPath}`, dir[i]))

if(stat.isFile()) {

constfileStream = fs.createReadStream(path.resolve(`${publicPath}${proPath}`, dir[i]))

console.log(`上传文件:${proPath}/${dir[i]}`)

constresult =awaitclient.putStream(`${proPath}/${dir[i]}`, fileStream)

console.log(result)

}elseif(stat.isDirectory()) {

awaitrun(`${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 不收任何费用

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,053评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,527评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,779评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,685评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,699评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,609评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,989评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,654评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,890评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,634评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,716评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,394评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,976评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,950评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,191评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,849评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,458评论 2 342

推荐阅读更多精彩内容