阿里云OSS部署Hexo教程

首发于羽毛工作室官方博客——和有趣的人做尽有趣的事!

如果你也想搭建自己的个人博客(效果类似于你现在看到的这样)那么这篇教程非常适合你。

成本极低,.com域名70/年,阿里云OSS的数据拉取成本也是按量的(约0.12元 /GB/月)

为什么不用WordPress?

14年的时候我折腾过一段时间WP。技术层面,后端运维方面,包括响应式主题的选择等等。给我留下非常不好的体验,失败告终。常言道,跌倒后要学会绕开。所以这次我选择了更加快速、简洁且高效的博客框架HEXO类似于jekyll,本质上都是支持markdown的静态H5页面生成器。不需要数据库,只要把生成的博客放到对应的目录即可。这就意味着它拥有其他博客系统无法比拟的低负载与高速度的特性。也极大的降低了后端的运维成本。

为什么不用jekyll?

jekyll用的liquid语法,确实对我这种业余前端程序员不是很友好。虽然jekyll功能比hexo强大很多,但仔细思考一下,我并没有时间折腾它。

如何搭建HEXO?

感谢zjufangzh分享的hexo史上最全搭建教程! 确实让我省了不少时间。

(一)安装Git、安装Node.js

1、到Git官网 直接点击Download下载
ps:一开始我并没有下载git。因为没有版本控制的需求,个人使用整的那么专业干嘛。多一事不如少一事。直到后面 ' $ hexo init blog ' 的步骤中,不断报错 git clone failed. Copying data instead 我才意识到 win10的cmd工具多么不给力。相比较之下,Git Bash的命令行工具太香了。在博客文件根目录右键 Git Bash Here 也可以很方便的操作部署以及新建文章。

2、Hexo是基于nodeJS编写的,所以需要安装一下nodeJs和里面的npm工具。方法很简单,在 node.js官网 选择LTS版本就行。推荐使用Windows Binary (.zip) 免安装版。因为Windows Installer (.msi) 安装版过程中需要拉扯数据。没有科学上网环境,过程非常心惊胆战,可能会失败。
值得注意的是,(.zip) 免安装版解压后需要手动配置环境变量。百度一下“node.js 配置环境变量”有很多教程,非常简单。

3、检验安装成功
win+r 运行 cmd 输入:

$ node -v
$ npm -v    

正常提示版本号,及安装成功。
以后就可以直接使用git bash来敲命令行了,不用自带的cmd,cmd确实难用。

(二)安装HEXO

1、确保前面git和nodejs安装好后,电脑任意位置,创建一个文件夹blog(名字你说了算,保险起见最好是英文小写),在这个文件夹下直接右键Git Bash Here
输入:

$ npm install -g hexo-cli

耐心等待一下,安装完成,再次出现$符提示可以输入指令时。就是安装好了。这时输入:

 $ hexo -v

正常输出提示版本,表示大功告成。

(三)创建自己的博客

接下来的部分就可以参考 hexo官网说明文档

$ hexo init blog            // 新建名为blog的博客根目录
$ cd blog                   // 切换至blog博客文件根目录
$ npm install           // 初始化 生成依赖文档及文件结构
$ hexo server           //  本地调试模式

至此,在浏览器输入localhost:4000,就能看到令人心动的博客了。
使用ctrl+c可以把本地调试模式关掉。
记得备份blog根目录文件,以便不时之需。

之后关于blog文件夹下的常用操作

$ hexo new "新文章标题"      // 新建文章
$ hexo clean                            // 清除旧public文件夹(博客静态目录)
$ hexo g                                // 生成新public文件夹(博客静态目录)
$ hexo d                                // 部署至指定服务器(参考第五步)

(四)阿里云oss相关设置

这部分不打算展开细讲了。一方面因为网上能搜到很多阿里云OSS如何创建Bucket(存储桶)教程,包括阿里云官方的新手说明文档 也非常白话。另一方面阿里云的后台总是升级功能界面,写出细节也未必能做到手把手的效果。

分享一篇博主Scoful写的:如何将hexo静态博客部署到阿里云OSS上(我就是看了这个开始折腾的)

我个人的经验(踩过的坑)
1、新建解析在域名控制台(原万网)

2、创建新Bucket时,记录名称和位置(例如,华北2-北京)后面第五步部署时会用到。忘记了也没事,可查。

3、Bucket权限记得设置公共读(不是私有、更不是公共读写)

4、Bucket基础设置-静态页面设置。设置默认首页index.html、开通子目录首页、文件 404 规则 选Redirect

5、不着急弄cdn加速,费钱不讨好,cdn缓存刷新规则设置不好,会导致部署后网站没变化,让你怀疑自己是不是操作失误。

6、不着急弄https协议,静态页面没有交互。多此一举反而可能出现错误。

7、关于网上各种教程说需要修改hexo代码适配oss访问规则,解决将index.html从url中显示的问题。都是历史遗留问题了。之前阿里云没有子目录首页的功能,现在有了,只需要开通子目录首页就可以符合hexo生成的静态目录结构。(敲黑板)public文件夹内的全部文件(不是把public文件夹直接拖拽),直接上传到阿里云oss的Bucket根目录(不要放在二级目录里)这样就可以了。并不需要修改hexo代码适配oss访问规则。2021/01/31 14:23:01 亲测有效。

8、下载并安装官方ossbrowser客户端

(五)阿里云OSS一键部署工具

感谢猿宵的分享:《hexo阿里云OSS一键部署工具hexo-deployer-ali-oss使用说明》 为了提供了很大的帮助。具体操作非常简单。

1、在您的hexo项目目录(blog目录)下执行:

$ npm install hexo-deployer-ali-oss --save

耐心等待安装完成。

2、打开hexo项目目录(blog目录)找到配置文件_config.yml 打开修改(近文件末位置)

deploy:
      type: ali-oss
      region: <您的oss 区域代码>
      accessKeyId: <您的oss  accessKeyId>
      accessKeySecret: <您的oss accessKeySecret>
      bucket: <您的bucket name>

(1)其中,您的oss 区域代码,指的是阿里云Region(我有提醒你记录,记得吗?哈哈哈)
官方说明文档 阿里云Region和Endpoint对照表中可以查看。
例如:我的Bucket概览中显示为 华北2(北京)对应的值即 oss-cn-beijing

(2)其中,您的oss accessKeyId 和 oss accessKeySecret 指的是登录官方ossbrowser客户端时输入过的两组串码。在官方文档安全信息管理中可以查看。需要短信验证码。

(3)其中,您的bucket name ,即为创建Bucket的名称(我有提醒你记录,记得吗?哈哈哈)
和区域代码一样,在阿里云oss后台 Bucket列表中可查

(4)修改时要去掉尖括号,最终格式如下

deploy:
      type: ali-oss
      region: oss-cn-beijing
      accessKeyId: accessKeyId
      accessKeySecret: accessKeySecret
      bucket: bucket name

至此之后,一键部署到阿里云oss就设置好了。以后修改了hexo项目目录(blog目录)后,只需要输入:

$ hexo d

即可将项目部署到阿里云oss中的bucket的根目录下。

写在最后的话。

从最终的结果来看,你会发现一切努力都是值得。过程中可能会踩各种坑,但是别焦虑。有百度可以帮你,相信你遇到的问题,有很多人都遇到过。技术难题别来问我,我也是个半吊子。但还是非常愿意和你闲聊交流经验的。欢迎骚扰。

感谢zjufangzh分享的hexo史上最全搭建教程! 后半部分hexo的基本配置,更换主题等等内容,我还没时间啃。等我研究后,会把自己的经验(踩过的坑)也补充进来。

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

推荐阅读更多精彩内容