云上有“数”系列实验(2)——基于OSS搭建云上个人博客

本文涉及的产品
对象存储 OSS,20GB 3个月
对象存储 OSS,恶意文件检测 1000次 1年
对象存储 OSS,内容安全 1000次 1年
简介: 在本场景中我们将以Hexo静态博客为例,演示如何通过Hexo博客框架快速生成静态博客,以及如何使用Hexo插件将生成的静态博客自动部署至阿里云OSS。

实验地址:https://developer.aliyun.com/adc/scenario/677e399ab6fc4389917e797f4cf515eb?spm=a2c6h.28467912.J_4392155360.4.577b4512o0s34M

实验步骤:

1.准备实验环境。

进入命令行界面,执行以下命令进行 Git 的安装:

yum install git -y

image.png

安装完成后,可以执行下方命令验证 Git 的版本:

git --version

image.png

如果 Git 的版本号可以成功展示,说明 Git 已经成功安装。

在终端中,通过执行下方的命令,安装 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

image.png

image.png

安装完成后,可以进行 node 和 npm 的版本信息验证。

验证 node 的版本信息:

node -v

image.png

验证 npm 的版本信息:

npm -v

image.png

2.利用 Hexo 生成静态博客。

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他标记语言)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。

在终端中,可以通过执行下方的命令,全局安装 Hexo 客户端:

npm install -g hexo-cli

image.png

安装完成后,可以执行下方命令验证 Hexo 的版本及其依赖信息:

hexo -v

image.png

如果 Hexo 的版本及其依赖信息可以成功展示,说明 hexo 已经成功安装。

在终端中执行下方命令,初始化博客项目,同时会安装博客项目所需的依赖包:

cd ~ && hexo init blog --no-clone

image.png

在终端中通过以下命令下载安装 hexo-deployer-cos 插件:

cd ~/blog && npm install hexo-deployer-ali-oss --save

image.png

在终端中执行下方命令,生成静态文件:

hexo g

image.png

3.本地部署博客。

执行以下命令,进入 blog 项目文件夹,启动博客项目:

cd ~/blog/ && hexo s

image.png

验证博客是否成功启动。可以看到界面如下:

image.png

4.基于阿里云OSS部署静态博客。

复制下方地址,在Chromium网页浏览器打开新页签,粘贴并访问OSS控制台。

https://oss.console.aliyun.com/

image.png

进入Bucket权限控制,将Bucket权限改为公共读写。

image.png

进入Bucket文件管理,新增授权。

image.png

授权用户给:所有账号,权限设置为读/写,访问方式设置为HTTP,点击确定。

image.png

将静态博客上传至阿里云OSS 中。

执行如下命令,编辑 _config.yml 文件。

vim _config.yml

按shift加G跳转到文件末尾最后一行,按i键进入编辑模式,复制下方代码,粘贴并覆盖原 deploy 选项的代码:(注意:冒号一定要使用英文冒号,冒号前不能有空格,冒号后必须有一个空格,这是 yml 的固定写法。)

deploy: 
  type: ali-oss
  region: yourRegion      //地域
  accessKeyId: yourSecretId    //子用户名称
  accessKeySecret: yourSecretKey    //子用户密码
  bucket: yourBucket            //bucket名称

执行以下命令重新生成静态文件。

hexo g -d

image.png

执行以下命令进入 blog 项目目录下,创建新文章。

cd ~/blog && hexo new first

image.png

命令执行完毕后,会在 source/_posts 中会生成一个 markdown 文件,本条命令会生成一个“first.md”的文件。

打开 first.md 文件,编写生成的文章模板:

vi source/_posts/first.md

执行以下命令,进入 blog 项目文件夹,启动博客项目:

cd ~/blog/ && hexo s

image.png

切换至浏览器,输入ECS的公网IP地址加端口号4000,访问网站,可以看到博客页面展示了刚刚创建的文章。

切换至命令行,按Ctrl+C退出博客启动。

执行命令,重新生成静态文件并部署至阿里云OSS :

cd ~/blog && hexo g -d

image.png

回到刚才的浏览器界面,点击存储桶左侧列表中的【文件列表】,如果文件列表中包含静态博客生成的静态文件,则说明静态文件通过插件自动上传至阿里云OSS成功,示例图如下:

image.png

至此,上传成功,实验结束。

相关实践学习
借助OSS搭建在线教育视频课程分享网站
本教程介绍如何基于云服务器ECS和对象存储OSS,搭建一个在线教育视频课程分享网站。
相关文章
|
存储 弹性计算 开发工具
基于OSS搭建云上个人博客
阿里云OSS,可以托管静态网站,在这个实验中,我们将以Hexo静态博客为例,向您演示如何通过Hexo博客框架快速生成静态博客,以及如何使用Hexo插件将生成的静态博客自动部署至阿里云OSS。
|
存储 弹性计算 数据管理
云上有“数”系列实验(1)——利用OSS搭建在线教育视频课程分享网
本场景将基于一台配置了CentOS 7.7的ECS实例(云服务器)和OSS资源。通过本教程的操作,您可以在ECS实例上搭建在线教育网站,从OSS中上传数据,可以开通OSS传输加速对OSS数据进行加速访问,并且可以设置生命周期对OSS进行降本增效。
|
JavaScript 网络安全 开发工具
基于OSS搭建云上个人博客-1
基于OSS搭建云上个人博客-1
195 0
基于OSS搭建云上个人博客-1
|
对象存储
基于OSS搭建云上个人博客-2
基于OSS搭建云上个人博客-2
151 0
基于OSS搭建云上个人博客-2
|
弹性计算 对象存储
基于OSS搭建云上个人博客-3
基于OSS搭建云上个人博客-3
150 0
基于OSS搭建云上个人博客-3
|
存储 弹性计算 对象存储
基于OSS搭建云上个人博客-4
基于OSS搭建云上个人博客-4
265 0
基于OSS搭建云上个人博客-4
|
对象存储
基于OSS搭建云上个人博客-5
基于OSS搭建云上个人博客-5
197 0
基于OSS搭建云上个人博客-5
|
存储 对象存储
基于OSS搭建云上个人博客-6
基于OSS搭建云上个人博客-6
125 0
基于OSS搭建云上个人博客-6
|
存储 数据安全/隐私保护 对象存储
阿里云云计算ACP实验考试之使用OSS对图片进行基本处理(下)
阿里云云计算ACP实验考试之使用OSS对图片进行基本处理(下)
391 0
阿里云云计算ACP实验考试之使用OSS对图片进行基本处理(下)
|
存储 弹性计算 JavaScript
基于OSS搭建云上个人博客的实验报告
以Hexo静态博客为例,向您演示如何通过Hexo博客框架快速生成静态博客,以及如何使用Hexo插件将生成的静态博客自动部署至阿里云OSS。