基于OSS搭建云上个人博客
1. 选择实验资源
本实验支持实验资源体验、开通免费试用、个人账户资源三种实验资源方式。
在实验开始前,请您选择其中一种实验资源,单击确认开启实验。
- 如果您选择的是实验资源体验,资源创建过程需要3~5分钟(视资源不同开通时间有所差异,ACK等资源开通时间较长)。完成实验资源的创建后,在实验室页面左侧导航栏中,单击云产品资源列表,可查看本次实验资源相关信息(例如子用户名称、子用户密码、AK ID、AK Secret、资源中的项目名称等)。
说明:实验环境一旦开始创建则进入计时阶段,建议学员先基本了解实验具体的步骤、目的,真正开始做实验时再进行创建。
- 如果您选择的是开通免费试用,下方卡片会展示本实验支持的试用规格,可以选择你要试用的云产品资源进行开通。您在实验过程中,可以随时用右下角icon唤起试用卡片。
说明:试用云产品开通在您的个人账号下,并占用您的试用权益。如试用超出免费试用额度,可能会产生一定费用。
阿里云支持试用的产品列表、权益及具体规则说明请参考开发者试用中心。
2. 创建资源
开始实验之前,您需要先创建实验相关资源。
- 在实验室页面,单击创建资源。
- (可选)在实验室页面左侧导航栏中,单击云产品资源列表,可查看本次实验资源相关信息(例如IP地址、子用户信息等)。
说明:资源创建过程需要3~5分钟(视资源不同开通时间有所差异,ACK等资源开通时间较长)。完成实验资源的创建后,您可以在云产品资源列表查看已创建的资源信息,例如:子用户名称、子用户密码、AK ID、AK Secret、资源中的项目名称等。
实验环境一旦开始创建则进入计时阶段,建议学员先基本了解实验具体的步骤、目的,真正开始做实验时再进行创建。
资源创建成功,可在左侧的资源卡片中查看相关资源信息以及RAM子账号信息
3. 实验环境准备
- 安装 Git
(1)在实验室页面右侧,单击单击 图标,切换至Web Terminal。
(2)执行以下命令进行 Git 的安装:
yum install git -y
(3)安装完成后,可以执行下方命令验证 Git 的版本:
git --version
如果 Git 的版本号可以成功展示,说明 Git 已经成功安装。
- 安装 Node.js
(1)在终端中,通过执行下方的命令,安装 Node.js:
curl -sL https://rpm.nodesource.com/setup_14.x | sudo bash - && sudo yum clean all && sudo yum makecache && sudo yum install -y gcc-c++ make && sudo yum install -y nodejs
安装完成后,可以进行 node 和 npm 的版本信息验证。
(2)验证 node 的版本信息:
node -v
(3)验证 npm 的版本信息:
npm -v
如果两者的版本信息都能成功展示,说明 Node.js 已经成功安装。
4. 利用 Hexo 生成静态博客
Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他标记语言)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。
- 安装 Hexo
(1)在终端中,可以通过执行下方的命令,全局安装 Hexo 客户端:
npm install -g hexo-cli
(2)安装完成后,可以执行下方命令验证 Hexo 的版本及其依赖信息:
hexo -v
如果 Hexo 的版本及其依赖信息可以成功展示,说明 hexo 已经成功安装。
- 初始化博客项目
在终端中执行下方命令,初始化博客项目,同时会安装博客项目所需的依赖包:
cd ~ && hexo init blog --no-clone
初始化成功的终端展示如下:
- 安装 hexo-deployer-cos 插件
在终端中通过以下命令下载安装 hexo-deployer-cos 插件:
cd ~/blog && npm install hexo-deployer-ali-oss --save
- 自动生成博客的静态文件
在终端中执行下方命令,生成静态文件:
hexo g
5. 本地部署博客
- 启动博客
执行以下命令,进入 blog 项目文件夹,启动博客项目:
cd ~/blog/ && hexo s
- 验证博客是否成功启动
(1)在实验室页面右侧,切换至桌面界面。
(2)打开浏览器,输入ECS的IP地址加端口号4000,访问网站。
ECS的IP地址可以在云产品资源查看:
项目界面的展示效果类似于下图,则证明博客启动成功:
6. 基于阿里云OSS部署静态博客
- 配置对象存储OSS
(1)在实验室页面右侧,切换至桌面界面。
(2)双击打开虚拟桌面的Chromium浏览器。
(3)在RAM用户登录框中单击下一步
(4)复制粘贴页面左上角的子用户密码到用户密码输入框,单击登录。
2. 进入OSS控制台
(1)复制下方地址,在Chromium网页浏览器打开新页签,粘贴并访问OSS控制台。
https://oss.console.aliyun.com/
(2)在对象存储OSS管理控制台左侧导航栏中,单击Bucket列表。
(3)在Bucket列表页面,单击Bucket名称。
说明:您可以在云产品资源列表中查看到您的OSS的Bucket名称。
3. 修改存储桶配置
(1)进入Bucket权限控制,将Bucket权限改为公共读写
(2)进入Bucket文件管理,新增授权
(3)授权用户给:所有账号,权限设置为读/写,访问方式设置为HTTP,点击确定。
4. 将静态博客上传至阿里云OSS 中
(1)在实验室页面右侧,单击单击 图标,切换至Web Terminal。
(2)执行如下命令,编辑 _config.yml 文件
vim _config.yml
按shift加G跳转到文件末尾最后一行,按i键进入编辑模式,复制下方代码,粘贴并覆盖原 deploy 选项的代码:
deploy: type: ali-oss region: yourRegion accessKeyId: yourSecretId accessKeySecret: yourSecretKey bucket: yourBucket
其中,您的oss 区域代码,指的是阿里云Region 官方说明文档 https://help.aliyun.com/document_detail/31837.html?spm=a2c4g.11186623.2.12.39972c20YS7sKQ中可以查看。 例如:我的Bucket概览中显示为华东2(上海)对应的值即:oss-cn-shanghai
accessKeyId、accessKeySecret、bucket均可在云产品资源列表中查看
注意:冒号一定要使用英文冒号,冒号前不能有空格,冒号后必须有一个空格,这是 yml 的固定写法。
完成编辑后,按esc输入:wq,保存退出。
5. 执行以下命令重新生成静态文件。
hexo g -d
生成结果如下:
7. 创建文章
- 创建文章 markdown 模板
执行以下命令进入 blog 项目目录下,创建新文章
cd ~/blog && hexo new first
示例图如下:
命令执行完毕后,会在 source/_posts 中会生成一个 markdown 文件,本条命令会生成一个“first.md”的文件。
- 编写 markdown 文件
(1)打开 first.md 文件,编写生成的文章模板:
vi source/_posts/first.md
进入编写界面后,自动生成的 markdown 文件如图所示:
(2)在下方编辑自己想要编辑的内容,支持 markdown 语法,例子如图所示:
按esc输入:wq,保存退出。
- 启动博客查看文章
执行以下命令,进入 blog 项目文件夹,启动博客项目:
cd ~/blog/ && hexo s
切换至浏览器,输入ECS的公网IP地址加端口号4000,访问网站,可以看到博客页面展示了刚刚创建的文章:
- 重新生成静态文件并部署至阿里云OSS
(1)切换至命令行,按Ctrl+C退出博客启动。
(2)执行命令,重新生成静态文件并部署至阿里云OSS :
cd ~/blog && hexo g -d
执行结果如图所示
8. 实验验证
- 在实验室页面右侧,单击单击 图标,切换至Web Terminal。
- 验证上传阿里云OSS是否成功
回到刚才的浏览器界面,点击存储桶左侧列表中的【文件列表】,如果文件列表中包含静态博客生成的静态文件,则说明静态文件通过插件自动上传至阿里云OSS成功,示例图如下:
9. 实验说明
在您开始实验前,请您务必看完如下说明再进行实验,以保证实验流畅性。
- 资源类型
您可以选择领取免费试用额度来开启实验,也可以直接使用个人账号资源来开启实验,我们推荐您领取免费试用额度来开启实验。
免费领用的资源或个人创建的资源都归属于您账号下,请您注意免费资源的到期时间,以及个人资源的费用使用情况。
说明:每个实验所支持的实验资源方式都不相同,实验不一定能满足全部实验资源方式,请根据实验的实际情况,进行选择。
- 如何开始实验
您可以点击右侧的领取免费试用额度,在下方卡片中领用免费资源。具体产品领用步骤,请查看下方。无论您是否领用了免费试用额度,您都可点击我已开通,进入实验,从而开始实验。您未领取的资源,将使用你个人的资源进行创建,请注意费用。
(1)ECS领用步骤:
- 点击卡片中的立即试用
- 在ECS领取界面,勾选服务协议,点击立即试用即可领用。
(2)OSS领用步骤:
- 点击卡片中的立即试用
- 默认配置,勾选服务协议
- 点击立即试用即可领用
10. 配置ECS服务器
本步骤将指导您配置ECS服务器。
若您领用了ECS试用服务,请按照3.1步骤进行ECS创建,创建完成后按照3.3步骤进行ECS配置。
若您未领用ECS试用服务,请按照3.2步骤进行ECS创建,创建完成后按照3.3步骤进行ECS配置。
3.1 领用资源,创建ECS服务器
由于您领取了试用服务,本步骤将指导您创建符合试用条件的ECS,下单后,此ECS按量产生的费用会被试用服务抵扣。
注:下单购买按量的ECS,需确保账户余额不小于100.00元人民币,若余额不足可能会提示无法购买。
- 进入云服务器ECS控制台,如果您使用的是旧版控制台,点击左下方的体验新版,切换至新版控制台。
- 在控制台右侧,可以看到我的免费试用,点击查看下方的试用规则说明(了解试用规则),点击继续创建2核4G实例。
- 页面跳转至自定义购买页面,在如下界面中,选择配置:
- 付费类型:选择按量付费。
- 地域:本实验选择北京。
- 网络及可用区:选择默认专有网络,默认交换机。
(注意:如您之前创建过专有网络和交换机,可选择已有专有网络和交换机,您实际选择的地域和交换机中的可用区会影响您实例资源的选择,您可参照本示例进行实验。本实验OSS使用公网,因此无需保证ECS和OSS创建的地域一致,本实验示例都为北京。)
- 在实例中,系统会自动选择s6 2核4G,此处无需更改:
- 在镜像中,选择公共镜像,选择CentOS,选择CentOS 7.9 64位:
- 在系统盘中,配置默认即可:
- 公网IP:选择分配公网IPv4地址;
- 带宽计费模式:选择按使用流量;
- 带宽峰值:选择1;
- 安全组:选择新建安全组;
- 安全组类型:普通安全组;
- 开通IPv4端口:选择SSH(22),HTTP(80),RDP(3389)。
- 登录凭证选择自定义密码,请输入登录密码,以及确认密码:
- 勾选服务条款,点击确认下单。
- ECS已成功创建,点击管理控制台。
3.2 未领用资源,直接创建ECS资源
- 点击ECS购买链接,进入购买页面。
- 在如下界面中,选择配置:
- 付费类型:您可按照需求选择包年包月或按量付费,此处选择按量付费。
- 地域:本实验选择北京。
- 网络及可用区:选择默认专有网络,默认交换机。
(注意:如您之前创建过专有网络和交换机,可选择已有专有网络和交换机,您实际选择的地域和交换机中的可用区会影响您实例资源的选择,本示例中选择北京,因此可选择下方的2vCPU,8GiB,u1,您可参照本示例进行实验。若您选择其它地域其它可用区,可能没有此资源,您可选用其它资源,本实验OSS使用公网,因此无需保证ECS和OSS创建的地域一致,本实验示例都为北京。)
- 在实例中,筛选2vCPU,8GiB,u1,如下所示选择规格:
- 在镜像中,选择公共镜像,选择CentOS,选择CentOS 7.9 64位:
- 在系统盘中,配置默认即可:
- 公网IP:选择分配公网IPv4地址;
- 带宽计费模式:选择按使用流量;
- 带宽峰值:选择1;
- 安全组:选择新建安全组;
- 安全组类型:普通安全组;
- 开通IPv4端口:选择SSH(22),HTTP(80),RDP(3389)。
- 登录凭证选择自定义密码,请输入登录密码,以及确认密码:
- 勾选服务条款,点击确认下单,即可创建ECS。
- ECS已成功创建,点击管理控制台。
3.3 配置ECS
- 在实例列表中,点击目标实例ID/名称进入实例详情。
- 选择安全组,在所属安全组中,单击管理规则。
- 在如下页面中,选择入方向,单击手动添加。
- 按照如下图所示添加配置规则,并单击保存。
11. 环境准备
- 安装 Git
(1)返回ECS控制台,在实例界面中,找到创建的实例,点击远程连接。
(2)如下所示,在通过Workbench远程连接中,点击立即登录。
(3)在如下所示中,输入之前ECS设置的密码,点击确定。
(4)进入命令行界面,执行以下命令,进行 Git 的安装:
yum install git -y
(5)安装完成后,可以执行下方命令验证 Git 的版本:
git --version
如果 Git 的版本号可以成功展示,说明 Git 已经成功安装。
- 安装 Node.js
(1)在终端中,通过执行下方的命令,安装 Node.js:
curl -sL https://rpm.nodesource.com/setup_14.x | sudo bash - && sudo yum clean all && sudo yum makecache && sudo yum install -y gcc-c++ make && sudo yum install -y nodejs
安装完成后,可以进行 node 和 npm 的版本信息验证。
(2)验证 node 的版本信息:
node -v
(3)验证 npm 的版本信息:
npm -v
如果两者的版本信息都能成功展示,说明 Node.js 已经成功安装。
12. 利用 Hexo 生成静态博客
Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他标记语言)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。
- 安装 Hexo
(1)在终端中,可以通过执行下方的命令,全局安装 Hexo 客户端:
npm install -g hexo-cli
(2)安装完成后,可以执行下方命令验证 Hexo 的版本及其依赖信息:
hexo -v
如果 Hexo 的版本及其依赖信息可以成功展示,说明 hexo 已经成功安装。
- 初始化博客项目
在终端中执行下方命令,初始化博客项目,同时会安装博客项目所需的依赖包:
cd ~ && hexo init blog --no-clone
初始化成功的终端展示如下:
- 安装 hexo-deployer-cos 插件
进入blog目录,在终端中通过以下命令下载安装 hexo-deployer-cos 插件:
cd ~/blog && npm install hexo-deployer-ali-oss --save
- 自动生成博客的静态文件
在终端中执行下方命令,生成静态文件:
hexo g
生成结果如下:
13. 本地部署博客
- 启动博客
执行以下命令,进入 blog 项目文件夹,启动博客项目:
cd ~/blog/ && hexo s
- 验证博客是否成功启动
打开浏览器,输入ECS的公网IP地址加端口号4000,访问网站;项目界面的展示效果类似于下图,则证明博客启动成功:
14. 基于阿里云OSS部署静态博客
若您未领用OSS免费资源,或者是使用个人账号资源,使用OSS会产生费用,请您注意个人资源的费用使用情况,费用详情请参考计费概述。
- 复制下方地址,在浏览器打开新页签,粘贴并访问对象存储OSS控制台。
https://oss.console.aliyun.com/
- 在左侧导航栏中,单击Bucket列表。
- 在Bucket列表页面,单击创建Bucket。
- 在创建Bucket页面,根据页面引导进行创建Bucket,您可自定义Bucket名称,名称全局唯一,Bucket创建成功后名称无法更改;地域选择北京;其他配置保持默认即可,单击确定创建bucket。
创建成功,点击进入Bucket,进入bucket详情页面。
- 创建AccessKey,本实验使用RAM用户的方式创建AccessKey。
注意:阿里云账号的AccessKey泄露会威胁该账号下所有资源的安全。为保证账号安全,强烈建议您给RAM用户创建AccessKey,不要给阿里云账号创建AccessKey。
(1)在权限控制列表,选择访问控制RAM,点击前往RAM控制台:
(2)进入用户,点击创建用户:
(3)输入登录名称,点击确定:
(4)创建成功后,点击用户登录名称,默认会进入用户信息页面-认证管理:
(5)页面往下滑,找到用户 AccessKey,点击创建 AccessKey
(6)创建成功后,请自行保存AccessKey信息
- 切换至权限管理,在个人权限中,点击新增授权,给ram用户新增OSS权限
授权范围默认整个云账号,授权主体默认当前Ram用户,权限选择管理对象存储服务(OSS)权限,点击确定即可授权成功。
- 将静态博客上传至阿里云OSS 中
(1)切换至命令行,按Ctrl+C退出博客启动。
(2)执行如下命令,编辑 _config.yml文件:
vim _config.yml
按shift加G跳转到文件末尾最后一行,按i键进入编辑模式,复制下方代码,自行替换参数值,粘贴并覆盖原 deploy 选项的代码:
deploy: type: ali-oss region: yourRegion accessKeyId: yourSecretId accessKeySecret: yourSecretKey bucket: yourBucket
- type:默认ali-oss,无需修改;
- region:指代地域,例如:华东2(北京)对应的值即:oss-cn-beijing,您可在官方说明文档 https://help.aliyun.com/document_detail/31837.html?spm=a2c4g.11186623.2.12.39972c20YS7sKQ中可以查看;
- accessKeyId、accessKeySecret:上一步创建 AccessKey 时,自行保存的AccessKey Id、AccessKey Secret;
- bucket:为创建OSS Bucket时的Buekct名称。
注意:冒号一定要使用英文冒号,冒号前不能有空格,冒号后必须有一个空格,这是 yml 的固定写法。
完成编辑后,按esc输入:wq,保存退出。
8. 执行以下命令重新生成静态文件。
hexo g -d
生成结果如下:
15. 创建文章
- 创建文章 markdown 模板
执行以下命令进入 blog 项目目录下,创建新文章:
cd ~/blog && hexo new first
命令执行完毕后,会在 source/_posts 中会生成一个名为“first.md”的markdown 文件:
- 编写 markdown 文件
(1)输入以下命令,打开 first.md 文件,编写生成的文章模板:
vi source/_posts/first.md
进入编写界面后,自动生成的 markdown 文件如图所示:
(2)在下方编辑自己想要编辑的内容,支持markdown语法,例子如图所示:
编写完成后,按esc输入:wq,保存退出。
- 启动博客查看文章
执行以下命令,进入 blog 项目文件夹,启动博客项目:
cd ~/blog/ && hexo s
切换至浏览器,输入ECS的公网IP地址加端口号4000,访问网站,可以看到博客页面展示了刚刚创建的文章:
- 重新生成静态文件并部署至阿里云OSS
(1)切换至命令行,按Ctrl+C退出博客启动。
(2)执行命令,重新生成静态文件并部署至阿里云OSS :
cd ~/blog && hexo g -d
执行结果如图所示
16. 实验验证
- 验证上传阿里云OSS是否成功
回到刚才的浏览器界面,点击存储桶左侧列表中的文件列表,如果文件列表中包含静态博客生成的静态文件,则说明静态文件通过插件自动上传至阿里云OSS成功,示例图如下:
17. 清理及后续
清理
完成教程后,请及时清理测试数据和试用资源。
1. ECS提供的试用实例有按量付费实例和包年包月实例。请在阿里云免费试用确认您试用的实例类型,并参考以下规则清理
按量付费实例释放
- 如果无需继续使用实例,可以登录ECS控制台,找到目标实例,在操作列单击 ,搜索并单击释放设置,根据界面提示释放实例。
- 如果需要继续使用实例,请至少在试用到期1小时前为阿里云账号充值,确保账户金额不小于100.00元人民币。到期未续费的实例会因欠费而被自动停机,停机15天内实例将保留,15天后实例和数据都将被自动释放。
包年包月实例释放
- 包年包月实例到期会自动释放,释放实例的同时释放数据。
- 如果需要继续使用实例,请在试用到期前及时续费。到期未续费的实例会因欠费而被自动停机,停机15天内实例将保留,15天后实例和数据都将被自动释放。
2. OSS提供试用时长为3个月的免费资源包,其中标准存储(本地冗余)容量为20GB/3个月,下行流量包为2 GB/3个月,请求包为20万次/3个月,OSS免费试用仅抵扣存储空间内的标准存储(本地冗余)类型文件的存储费用、因访问OSS资源产生的API请求和外网流出流量费用。其他类型存储费用(例如低频访问(本地冗余)容量费用等),使用图片处理服务产生的图片处理费用等均无法抵扣。完成教程后,请参考以下场景处理OSS资源:
- 如果无需继续使用对象存储OSS,可以登录对象存储OSS控制台,在Bucket 列表页面,找到目标Bucket,点击Bucket 名称进入详情,选择删除 Bucket,点击确认删除,即可删除Bucket。
- 如果需要继续使用对象存储OSS,请务必至少在资源包试用到期1小时前为您的阿里云账号充值或购买新的资源包。
- 欠费后如果在延期免停权益额度内,您的服务将不会受到停服影响。
- 欠费后如果超出了延停权益额度,OSS服务将自动停止,且OSS控制台中的Bucket列表将处于不可见状态。而您所占用的Bucket资源仍会继续扣费,因此欠费会累积。
- 如果您在OSS停服后15天内充值补足欠款,OSS服务会自动启用。
- 如果您在OSS停服后15天内未补足欠款,将视为您主动放弃OSS存储服务,阿里云将终止本产品服务条款并停止为您继续提供服务,您保存在阿里云的全部数据将会被清理删除,且清理后数据不可恢复。请注意,数据清理之前仍会继续计费,若您确认不再使用OSS存储服务,请务必删除OSS上的数据。
后续
在试用有效期期间,您还可以根据希望测试的其它业务场景继续使用对象存储OSS。
18. 清理及后续
完成教程后,请及时清理测试数据和试用资源。
1. ECS,完成教程后,请参考以下规则清理实例:
按量付费实例释放
- 如果无需继续使用实例,可以登录ECS控制台,找到目标实例,在操作列单击 ,搜索并单击释放设置,根据界面提示释放实例。
- 如果需要继续使用实例,请至少在试用到期1小时前为阿里云账号充值,确保账户金额不小于100.00元人民币。到期未续费的实例会因欠费而被自动停机,停机15天内实例将保留,15天后实例和数据都将被自动释放。
包年包月实例释放
- 包年包月实例到期会自动释放,释放实例的同时释放数据。
- 如果需要继续使用实例,请在试用到期前及时续费。到期未续费的实例会因欠费而被自动停机,停机15天内实例将保留,15天后实例和数据都将被自动释放。
2. OSS,完成教程后,请参考以下场景处理OSS资源:
- 如果无需继续使用对象存储OSS,可以登录对象存储OSS控制台,在Bucket 列表页面,找到目标Bucket,点击Bucket 名称进入详情,选择删除 Bucket,点击确认删除,即可删除Bucket。
- 如果需要继续使用对象存储OSS,请务必至少在资源包试用到期1小时前为您的阿里云账号充值或购买新的资源包。
- 欠费后如果在延期免停权益额度内,您的服务将不会受到停服影响。
- 欠费后如果超出了延停权益额度,OSS服务将自动停止,且OSS控制台中的Bucket列表将处于不可见状态。而您所占用的Bucket资源仍会继续扣费,因此欠费会累积。
- 如果您在OSS停服后15天内充值补足欠款,OSS服务会自动启用。
- 如果您在OSS停服后15天内未补足欠款,将视为您主动放弃OSS存储服务,阿里云将终止本产品服务条款并停止为您继续提供服务,您保存在阿里云的全部数据将会被清理删除,且清理后数据不可恢复。请注意,数据清理之前仍会继续计费,若您确认不再使用OSS存储服务,请务必删除OSS上的数据。
后续
在试用有效期期间,您还可以根据希望测试的其它业务场景继续使用对象存储OSS。
实验链接:https://developer.aliyun.com/adc/scenario/677e399ab6fc4389917e797f4cf515eb