【玩转腾讯云】使用Hexo在Cloudbase上搭建自己的静态博客
原创【玩转腾讯云】使用Hexo在Cloudbase上搭建自己的静态博客
原创
作者：Mintimate
Mintimate's 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
- Cloudbase下静态网站托管(https://cloud.tencent.com/document/product/876/40270）
- 已经备案域名：如果不绑定自己已经备案的域名，无法开启额CDN加速，且默认域名有访问限制嗷。所以还是建议绑定备案域名。（备案很简单的）
因为Hexo是本地构建静态HTML+CSS+JS，所以你需要在本地部署Hexo配置文件。用来生成静态博客，本地你需要：
- node.js：用来构建Hexo。（推荐使用v12.21版本，最新版本容易构建出bug）
- Git：用来初始化和下载Hexo有关模块
如果你不知道怎么安装node，或者想知道如何安装多版本node，可以参考我之前教程：如何使用NVM安装并管理多版本Node:https://cloud.tencent.com/developer/article/1812323
本地搭建Hexo
安装依赖
首先，我们利用node安装Hexo模块，打开自己电脑的terminal（Windows用户打开CMD或者Powershell即可），输入：
npm -g install hexo有些小伙伴可能求知欲比较强，解释一下：
- npm：node的项目管理根据，类似Python的
pip - g：全局安装
初始化Hexo
我们在你电脑上恰当位置创建一个空的文件夹，terminal/powershell进入改文件夹，输入：
hexo init
Windows可能会出现：
这个时候，需要更改执行策略，以允许本地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主题来入门（教程多，对新手友好）：
按照官方稳定，我们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
会生成public文件夹，这个文件夹就是Hexo系统引擎，感觉你的Hexo配置生成的HTML+CSS+JS静态网站：
当然，可能会乱码。因为需要Web服务器，让index.html作为根目录。所以，这边我们需要把这个文件部署到Web服务器上（Cloudbase静态网站托管）。
我们打开powershell，按照Cloudbase配套工具（tcb指令工具集）：
npm i -g @cloudbase/cli
之后，我们使用tcb连接我们的Cloudbase：
tcb login会自动跳转浏览器，这个时候我们登录我们腾讯云账号：
之后，我们将整个public文件夹，通过tcb上传到静态网站托管目录下：
# 进入刚刚生成的public文件夹内
cd public
# 部署当前目录下所有文件
tcb hosting deploy -e $envId其中，$envId为你Cloudbase的环境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：
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。