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

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

实验概述

实验简介

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

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

学前建议

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

实验步骤在本实验中,一共包含六个主要的实验步骤: 基于腾讯云 COS 部署 Hexo 静态博客

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

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

实验环境准备

切换模式

注:请先从 桌面模式 切换到 终端模式,方法如下 基于腾讯云 COS 部署 Hexo 静态博客

安装 Git

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

yum install git -y

基于腾讯云 COS 部署 Hexo 静态博客 安装完成后,可以执行下方命令验证 Git 的版本:

git --version

如果 Git 的版本号可以成功展示,说明 Git 已经成功安装。 基于腾讯云 COS 部署 Hexo 静态博客

安装 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 已经成功安装。 基于腾讯云 COS 部署 Hexo 静态博客

安装 Hexo

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

npm install -g hexo-cli

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

hexo -v

基于腾讯云 COS 部署 Hexo 静态博客 如果 Hexo 的版本及其依赖信息可以成功展示,说明 hexo 已经成功安装。

2. 利用 Hexo 生成静态博客

初始化博客项目

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

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

初始化成功的终端展示如下: 基于腾讯云 COS 部署 Hexo 静态博客

安装 hexo-deployer-cos 插件

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

cd ~/blog && npm install hexo-deployer-cos --save

 

自动生成博客的静态文件

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

hexo g

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

3. 本地部署博客

在实验资源面板中,点击 CVM 的【桌面连接】,进入桌面模式: 基于腾讯云 COS 部署 Hexo 静态博客

启动博客

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

cd ~/blog/ && hexo s

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

验证博客是否成功启动

博客项目启动后,按下 Ctrl(Windows) / Control(MacOS) 键,并同时点击终端模拟器内的链接来访问项目界面。 基于腾讯云 COS 部署 Hexo 静态博客 项目界面的展示效果类似于下图,则证明博客启动成功: 基于腾讯云 COS 部署 Hexo 静态博客

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

登录腾讯云 COS 控制台

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

修改存储桶配置

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

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

在实验资源面板中,点击 CVM 的【登录】,切换至终端模式: 基于腾讯云 COS 部署 Hexo 静态博客 打开 _config.yml 文件,跳转至文件末尾,复制下方代码,粘贴并覆盖原 deploy 选项的代码:

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

修改配置

其中 secretId、secretKey 分别按照实验资源提供的Security IDSecurity Key填写。 基于腾讯云 COS 部署 Hexo 静态博客 在实验资源面板中,点击 COS 的【登录】 基于腾讯云 COS 部署 Hexo 静态博客 bucket、region 可从实验资源中 COS 的登录提示中获取。 基于腾讯云 COS 部署 Hexo 静态博客 完成编辑后,记得保存文件。

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

hexo g -d

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

5. 创建文章

创建文章 markdown 模板

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

cd ~/blog && hexo new first

示例图如下: 基于腾讯云 COS 部署 Hexo 静态博客 命令执行完毕后,会在 source/_posts 中会生成一个 markdown 文件,本条命令会生成一个“first.md”的文件。

编写 markdown 文件

打开 first.md 文件,编写生成的文章模板:进入编写界面后,自动生成的 markdown 文件如图所示: 基于腾讯云 COS 部署 Hexo 静态博客 在下方编辑自己想要编辑的内容,支持 markdown 语法,例子如图所示: 基于腾讯云 COS 部署 Hexo 静态博客 完成编辑后,记得保存文件。

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

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

cd ~/blog && hexo g -d

执行结果如图所示: 基于腾讯云 COS 部署 Hexo 静态博客

6.实验验证

在实验资源面板中,点击 CVM 的【桌面连接】,进入桌面模式。 基于腾讯云 COS 部署 Hexo 静态博客

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

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

验证创建文章是否成功

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



微信扫描下方的二维码阅读本文

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

免责声明:文章部分图片文字资源来自互联网,由小梦云服 | 腾讯云合作伙伴整理发布,如侵犯您的版权,请与我们联系删除,谢谢合作!

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

在线咨询
电话:18111668110(同V) 微信咨询
关注微信
关注微信
分享本页
返回顶部