基于腾讯云 COS 部署 Hexo 静态博客

实验概述

实验简介

腾讯云 COS 可以托管静态网站。在这个实验中，我们将以 Hexo 静态博客为例，向您演示如何通过 Hexo 博客框架快速生成静态博客，以及如何使用 Hexo 插件将生成的静态博客自动部署至腾讯云 COS。实验目标完成此实验后，可以掌握的能力有：

1. 了解腾讯云 COS 对象存储
2. 了解 Hexo 博客的使用方式
3. 了解通过使用插件将所生成的静态网站部署至腾讯云 COS 的方法

学前建议

1. 具备前端开发的基础知识
2. 具备 Node.js 开发基础
3. 了解 Linux 终端使用的基础知识

实验步骤在本实验中，一共包含六个主要的实验步骤：

1. 实验环境准备
2. 利用 Hexo 生成静态博客
3. 本地部署博客
4. 基于腾讯云 COS 部署静态博客
5. 创建博客文章
6. 实验验证

下面，会依次进行每一步的操作说明。

实验环境准备

切换模式

注：请先从 桌面模式 切换到 终端模式，方法如下

安装 Git

执行以下命令进行 Git 的安装：

yum install git -y

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

git --version

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

安装 Node.js

在终端中，通过执行下方的命令，安装 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 的版本信息验证。验证 node 的版本信息：

node -v

验证 npm 的版本信息
：

npm -v

如果两者的版本信息都能成功展示，说明 Node.js 已经成功安装。

安装 Hexo

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

npm install -g hexo-cli

安装完成后，可以执行下方命令验证 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-cos --save

自动生成博客的静态文件

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

hexo g

3. 本地部署博客

在实验资源面板中，点击 CVM 的【桌面连接】，进入桌面模式：

启动博客

点击左上角的【所有应用程序图标】-【终端模拟器】，执行以下命令，进入 blog 项目文件夹，启动博客项目:

cd ~/blog/ && hexo s

验证博客是否成功启动

博客项目启动后，按下 Ctrl（Windows） / Control（MacOS） 键，并同时点击终端模拟器内的链接来访问项目界面。 项目界面的展示效果类似于下图，则证明博客启动成功：

4. 基于腾讯云 COS 部署静态博客

登录腾讯云 COS 控制台

点击浏览器菜单栏的 腾讯云 cos 控制台书签，即可快速登录腾讯云 COS 控制台： 使用实验资源中给出的子账号，完成用户的登录操作。 本实验不需要完善信息，点击【下次再完善】即可。

修改存储桶配置

在云对象存储控制台，点击【存储桶列表】，打开对应存储桶。 在对应存储桶的左侧列表中，点击【基础管理】-【静态网站】-【编辑】。将【当前状态】按钮打开。此时腾讯云 COS 会提供访问节点，记录此访问节点，后续将会使用此访问节点访问静态博客。将【强制 HTTPS 】按钮打开，当您开启强制 HTTPS 后，在用户访问您的静态网站时，静态网站的访问节点会强制使用 HTTPS 协议方式打开。点击【保存】按钮保存设置。

将静态博客上传至腾讯云 COS 中

在实验资源面板中，点击 CVM 的【登录】，切换至终端模式： 打开 _config.yml 文件，跳转至文件末尾，复制下方代码，粘贴并覆盖原 deploy 选项的代码:

deploy:
type: cos
secretId: yourSecretId
secretKey: yourSecretKey
bucket: yourBucket
region: yourRegion

修改配置

其中 secretId、secretKey 分别按照实验资源提供的Security ID和Security Key填写。 在实验资源面板中，点击 COS 的【登录】 bucket、region 可从实验资源中 COS 的登录提示中获取。 完成编辑后，记得保存文件。

执行以下命令重新生成静态文件，并按照配置文件部署博客：

hexo g -d

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

5. 创建文章

创建文章 markdown 模板

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

cd ~/blog && hexo new first

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

编写 markdown 文件

打开 first.md 文件，编写生成的文章模板:进入编写界面后，自动生成的 markdown 文件如图所示： 在下方编辑自己想要编辑的内容，支持 markdown 语法，例子如图所示： 完成编辑后，记得保存文件。

重新生成静态文件并部署至腾讯云 COS

执行命令，重新生成静态文件并部署至腾讯云 COS ：

cd ~/blog && hexo g -d

执行结果如图所示：

6.实验验证

在实验资源面板中，点击 CVM 的【桌面连接】，进入桌面模式。

验证上传腾讯云 COS 是否成功

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

验证创建文章是否成功

点击存储桶左侧列表中的【基础配置】-【静态网站】，复制其提供的访问节点，粘贴到浏览器并执行。 当访问博客成功，则说明基于腾讯云 COS 部署静态博客成功。当博客中包含发布的文章，则说明创建文章成功。