【基于OSS搭建云上个人博客笔记】

基于OSS搭建云上个人博客

和ECS前面一样

---

前言

一、安装 Git

（1）在实验室页面右侧，单击图标，切换至Web Terminal。
（2）执行以下命令进行 Git 的安装：

yum install git -y

（3）安装完成后，可以执行下方命令验证 Git 的版本：

git --version

二、安装 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 已经成功安装。

---

三、安装 Hexo

（1）在终端中，可以通过执行下方的命令，全局安装 Hexo 客户端：

npm install -g hexo-cli

（2）安装完成后，可以执行下方命令验证 Hexo 的版本及其依赖信息：

hexo -v

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

2.利用 Hexo 生成静态博客

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

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

初始化成功的终端展示如下：

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

cd ~/blog && npm install hexo-deployer-ali-oss --save
# 可以用npm audit fix 来修复漏洞

自动生成博客的静态文件
在终端中执行下方命令，生成静态文件：

hexo g

四、启动博客

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

cd ~/blog/ && hexo s

验证博客是否成功启动

IP+4000

五、基于阿里云OSS部署静态博客

连接ECS服务器
（1）在实验室页面右侧，切换至桌面界面。
先了解自己的bucket

（3）在RAM用户登录框中单击下一步，并复制粘贴页面左上角的子用户密码到用户密码输入框，单击登录。

2. 进入OSS控制台

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

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

（2）在对象存储OSS管理控制台左侧导航栏中，单击Bucket列表。

在Bucket列表页面，单击Bucket名称。

说明：您可以在云产品资源列表中查看到您的OSS的Bucket名称。

修改存储桶配置

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

---

进入Bucket文件管理，新增授权

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

其中，您的oss 区域代码，指的是 中可以查看阿里云Region 官方说明文档。 例如：我的Bucket概览中显示为华东2（上海）对应的值即：oss-cn-shanghai

注意：冒号一定要使用英文冒号，冒号前不能有空格，冒号后必须有一个空格，这是 yml 的固定写法。

完成编辑后，按esc输入:wq，保存退出。

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

hexo g -d

六、创建文章

创建文章 markdown 模板
执行以下命令进入 blog 项目目录下，创建新文章

cd ~/blog && hexo new first

示例图如下：

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

编写 markdown 文件
(1)打开 first.md 文件，编写生成的文章模板:

vi source/_posts/first.md

(1）进入编写界面后，自动生成的 markdown 文件如图所示：

(2) 在下方编辑自己想要编辑的内容，支持 markdown 语法，例子如图所示：

按esc输入:wq，保存退出。

(3)重新生成静态文件并部署至阿里云OSS

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

cd ~/blog && hexo g -d

执行结果如图所示：

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