【玩转腾讯云】使用Hexo在Cloudbase上搭建自己的静态博客

作者：Mintimate

博客：https://www.mintimate.cn

Mintimate's Blog，只为与你分享

Hexo Blog

Hexo

为什么要自己建博客？用CSDN、知乎不好么？

首先，CSDN和知乎，基本上是满足写作的需求，但是缺乏个性化。

首先，给大家看看部署在Cloudbase上的Hexo博客Demo：

Mintimate's Blog：https://www.mintimate.cn

自己搭建博客，有更多个性化的空间，比如：自定义CSS/JS，设置自定义页面等等。而且相对于CSDN、知乎这种大平台，自己搭建一个属于自己的网站，培养自己一个小圈子，也是建不错的趣事。

那么，那么多博客引擎，为什么使用Hexo呢？

🪶轻量、易备份

因为Hexo是根据你的配置文件和博客文章，快速构建HTML+CSS+JS的静态网站，所以没有后台这个概念，对服务器资源需求极低。而且相对于Wordpress这样的网站，备份和迁移还需要备份数据库；Hexo的备份，只需要备份你的配置文件和博客文章即可，易于备份和携带。

😄易入门

入门的话，看完这篇文章，你应该可以成功入门。

注意⚠️，是入门简单，如果你想制作出好看的页面，需要自己写CSS、JS，还是需要一定知识储备

为什么用Cloudbase搭建Hexo博客

Cloudbase是腾讯云推出的基础云开发，包括云函数、静态网站托管等。我们这次主要就是使用静态网站托管。主要的理由：

🔧操作简单

如果是部署Wordpress这样的博客，首先就要租服务器，服务器组好后，还要搭建Nginx等Web服务器，最后还要配置PHP、设置数据库等等。

使用云开发Cloudbase的静态网站托管，不要需要自己部署Nginx，而且也有防盗链功能，便于上手。

💰成本低

前文说到Wordpress等博客需要服务器，而Hxeo可以部署到Cloudbase，成本基本上只有流量钱。而服务器动不动几百一个月（学生和特价服务器除外），搭建Hexo到Cloudbase可以说是非常便宜。

环境准备

这次我们部署Hexo到Cloudbase的静态托管，所以需要腾讯云这边，你需要准备：

Cloudbase环境，用空模版即可

1. 腾讯云云开发Cloudbase
2. Cloudbase下静态网站托管(https://cloud.tencent.com/document/product/876/40270）
3. 已经备案域名：如果不绑定自己已经备案的域名，无法开启额CDN加速，且默认域名有访问限制嗷。所以还是建议绑定备案域名。（备案很简单的）

因为Hexo是本地构建静态HTML+CSS+JS，所以你需要在本地部署Hexo配置文件。用来生成静态博客，本地你需要：

1. node.js：用来构建Hexo。（推荐使用v12.21版本，最新版本容易构建出bug）
2. Git：用来初始化和下载Hexo有关模块

如果你不知道怎么安装node，或者想知道如何安装多版本node，可以参考我之前教程：如何使用NVM安装并管理多版本Node:https://cloud.tencent.com/developer/article/1812323

安装node，最好为node v12版本

本地搭建Hexo

安装依赖

首先，我们利用node安装Hexo模块，打开自己电脑的terminal（Windows用户打开CMD或者Powershell即可），输入：

npm -g install hexo

有些小伙伴可能求知欲比较强，解释一下：

• npm：node的项目管理根据，类似Python的pip
• g：全局安装

安装Hexo模块

初始化Hexo

我们在你电脑上恰当位置创建一个空的文件夹，terminal/powershell进入改文件夹，输入：

hexo init

初始化Hexo博客

Windows可能会出现：

error

这个时候，需要更改执行策略，以允许本地PowerShell脚本在未签名的情况下运行。远程脚本需要签名。：

钩上并保存

之后再运行hexo init即可。

如果出现：

fatal: unable to access 'https://github.com/hexojs/hexo-starter.git/': OpenSSL SSL_read: Connection was reset, errno 10054

一般是因为无法连接GitHub，需要自行解决嗷。

初始化完成后：

初始化完成后

启动Hexo

这个时候，我们输入

hexo s

即可启动内建服务，查看Hexo博客：

启动内建服务器

内建服务器

这个时候，Hexo是交互模式，根据配置实时构建（根据source目录下文件实时构建，主题文件不参与实时构建）

更换主题

一个好的博客，往往需要好的主题。自带的主题，过于简单，所以我们可以换个主题，帮助你快速构建好看的博客网站，个人推荐使用Next主题来入门（教程多，对新手友好）：

• Next主题：https://github.com/theme-next/hexo-theme-next

按照官方稳定，我们Git项目到博客目录下theme文件夹下：

git clone https://github.com/theme-next/hexo-theme-next themes/next

注意目录

当然，你也可以到Next主题项目的发布页面，手动下载后，解压改名为Next文件夹，并移动到theme文件夹下即可。

修改Hexo配置文件，激活Next主题：

修改主题配置

最后，保存。并用hexo s启动内建服务器查看效果。

书写文章

关闭hexo的内建服务器，我们在hexo目录下，输入：

hexo new "文章名称"

其中，文章名称最好为全英文。

之后，在hexo目录下source/_posts下，即可看见刚刚创建的文章。以.md即为，为Markdown文件。同时兼容HTML、CSS以及JS语法。

高级美化

Hexo的美化，官方文档用了进万字详解。不同主题配置也不一样，所以所限与篇幅，本文主要讲Hexo的部署和搭建，细节部分，如具体的美化，搭建可以用搜索引擎去了解，也可以看官方文档。比如：

• Hexo官方中文文档:https://hexo.io/zh-cn/docs/
• Next官方主题文档:https://github.com/theme-next/hexo-theme-next/tree/master/docs/zh-CN

当然，也有很多其他主题。比如我自己用的：Hexo Fluid主题：https://hexo.fluid-dev.com/docs/

部署到Cloudbase

Hexo如果停留在本地搭建，那就不是博客了……最多是个高级点的记事本。所以，我们需要部署到云端，比如Cloudbase的静态网站托管。

方法一：手动部署

我们搭建好后，在hexo目录下，执行：

hexo g

执行hexo g

会生成public文件夹，这个文件夹就是Hexo系统引擎，感觉你的Hexo配置生成的HTML+CSS+JS静态网站：

打开并以浏览器运行

当然，可能会乱码。因为需要Web服务器，让index.html作为根目录。所以，这边我们需要把这个文件部署到Web服务器上（Cloudbase静态网站托管）。

我们打开powershell，按照Cloudbase配套工具（tcb指令工具集）：

npm i -g @cloudbase/cli

安装tcb

之后，我们使用tcb连接我们的Cloudbase：

tcb login

会自动跳转浏览器，这个时候我们登录我们腾讯云账号：

授权

登录成功

之后，我们将整个public文件夹，通过tcb上传到静态网站托管目录下：

# 进入刚刚生成的public文件夹内
cd public
# 部署当前目录下所有文件
tcb hosting deploy -e $envId

其中，$envId为你Cloudbase的环境ID：

环境ID

部署

此时，访问静态网站托管页面，即可查看：

有内容了嗷

绑定自定义域名，或者使用临时域名即可访问：

访问

当然，再次构建public需要上传Cloudbase的话，只需要：

# 删除Cloudbase上所有内容
tcb hosting delete -e envId
# 重新在新构建的public目录下推送
tcb hosting deploy -e $envId

方法二：自动部署

自动部署，就是安装插件，实现hexo在打包时候，可以自动清楚Cloudbase上静态网站托管里的内容，并自动重新部署。

首先，安装npm install hexo-deployer-tcb模块：

注意目录

之后，打开hexo配置文件（hexo安装目录下的_config.yml文件）,添加：

deploy:
  type: tcb
  secretId: yourSecretId
  secretKey: yourSecretKey
  envId: yourEnvId

其中：

• secretId和secretKey：可以在这里获得:https://console.cloud.tencent.com/cam/capi

之后，在生成public文件的同时，进行自动推送

# 生成public文件夹，并推送到Cloudbase
hexo g -d

此时，访问静态网站托管页面，即可查看：

有内容了嗷

绑定自定义域名，或者使用临时域名即可访问：

访问

Cloudbase高级配置

设置防盗链

Cloudbase的静态网站托管，相当于一台Nginx Web服务器简化版。你可以在里面添加防盗链功能，避免网站流量大幅度不正常削减：

防盗链

配合云函数，实现动态功能

Hexo虽然是静态的，但是本身支持JavaScript的使用。配合Cloudbase的云函数功能，可以实现动态网站的功能，如：评论系统、流量统计。

使用云函数配合，给博客实现评论

具体可以参考：twikoo评论系统

总结

配合Hexo，其实已经满足个人写作需要了。因为个性化不同，使用文章主要讲Hexo的部署和构建。具体的细节美化，可以对照网络上前人的经验。有问题，可以评论区留言。

Hexo部署到Cloudbase的Demo：

Mintimate's Blog