#前言

当前国内主流服务商的服务器定价都有所下降,并且时常推出拉新活动,新用户总能以极低的价格使用服务器,但如果一台服务器仅仅运行一个访问量不高的个人博客,即便是采用一般意义下最低配置的1核1G服务器,其性能也无法被充分利用。在此背景下可使用腾讯云的CloudBase 静态网站托管,可以快速地部署静态博客,并且使用 CDN(内容分发网络)加快资源的访问速度,其按量付费的模式能够极大提高资源利用率,在某种程度上减少博客投入成本。

#背景

Hexo 是一个快速、简洁且高效的博客框架,其静态网页的渲染工作都可以在本地完成,渲染后的静态文件都在public文件夹下,只需将public文件夹托管即可。腾讯云CloudBase在官方文档中给出了利用云开发搭建Hexo博客的教程,示范如何将本地生成的public文件夹上传到腾讯静态网站托管,并且给出了自动化部署的方案。

该教程简单示范了如何托管文件,但是怎样才能更优雅地使用这一套方案进行博客写作?本文将在上述教程的基础上优化细节,针对新手给出详细、优雅的解决方案。

1.安装Node.js与Git

Node.jsGit是使用Hexo的必备条件,如果你已经具备上述环境,可以跳过这一步,本文仅记录Windows平台下的安装方法,更多平台下的安装请访问文档 | Hexo

(1)Node.js的安装

​ 1.打开:https://nodejs.org/en/download/

​ 2.下载**Windows Installer (.msi)**对应版本

​ 3.运行安装(按照默认选项安装,安装过程中无需修改配置)

(2)Git的安装

​ 1.打开:https://git-scm.com/download/win

​ 2.下载对应版本的Git

​ 3.运行安装(按照默认选项安装,安装过程中无需修改配置)

2.安装Hexo

Hexo更加详细的中文教程可以访问:https://hexo.io/zh-cn/docs/,本文仅记录当前必须用到的Hexo命令,如果你的环境已安装Hexo,可以跳过这一步。

(1)安装Hexo程序

在安装有Node.js与Git的环境中运行以下命令安装Hexo

npm install -g hexo-cli

(2)建立Hexo站点

​ 在电脑的适当位置建立Hexo文件夹,并且记住该文件夹的路径,比如本站建立时的本地位置为:C:\hexo

​ 进入刚刚建立的文件夹

cd C:\hexo

​ 运行以下命令进行初始化:

hexo init

​ 初始化完成后,执行如下命令,启动预览:

hexo s

​ 在浏览器中打开http://localhost:4000,即可看到部署的 Hexo 博客,说明Hexo安装成功

​ 在cmd中通过ctrl+c结束预览

3.创建云开发环境

请参照云开发 CloudBase 搭建 Hexo - 示例教程 的步骤2完成,云环境的创建为可视化操作界面,按照提示完成即可,但是要注意云环境的id,后续操作需要使用。

4.构建Hexo部署文件

在更新hexo网站配置或者创作文章后,都需要运行以下命令生成新的静态网站文件,默认将文件生成在Public文件夹下:

hexo g

5.配置自动化部署

​ Hexo可以实现将静态网站文件一键部署到多个平台,本文主要介绍如何一键部署到Github,并借助Github action实现将Hexo博客自动部署到腾讯云静态网站托管。

(1)安装 hexo-deployer-git

npm install hexo-deployer-git --save

(2)修改配置

​ 先在Hexo文件夹下的 _config.yml 中修改参数

1
2
3
4
5
6
7
deploy:
type: git #采用git模式自动部署
repo: https://github.com/******/****** #注意,上传会完全覆盖这个库的已有内容,若库不存在会自动初始化
branch: master #上传的默认分支名是gh-pages,会触发自动部署Github Page,可以改成其它任意分支名
token: #这里填写在Github申请的token
extend_dirs: .github/ #默认仅上传public文件夹,如果需要上传其它文件夹,请在这里添加。这边.github文件夹需要新建,下面会介绍

(3)配置Github actions脚本

①建立脚本文件

在C:\hexo下新建.github文件夹,在.github文件夹下建立workflow文件夹,在workflow文件夹下建立main.yml文件,这个文件的前缀可以自定,后缀必须为.yml或者.yaml。

上述操作可以直接使用Windows的可视化文件管理器操作,也可以尝试在cmd中输入以下命令

1
2
3
4
5
6
7
8
9
10
11
cd C:\hexo #进入C盘下的hexo文件夹

mkdir .github #新建.github文件夹

cd .github #进入.github文件夹

mkdir workflow #新建workflow文件夹

cd workflow #进入workflow文件夹

type nul>main.yml #新建一个名为main.yml的空文件

②配置脚本

打开上一步中建立的main.yml,将以下内容复制到其中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
on: [push] # push 代码时触发
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v2
- name: Use Node.js
uses: actions/setup-node@v2
with:
node-version: '14'
# 使用Node.js14
- name: 安装npm
run: npm install
# 安装npm
- name: 安装cloudbBase工具
run: npm i -g @cloudbase/cli
# 安装 CloudBase CLI
- name: 登陆CloudBase
run: tcb login --apiKeyId ${{ secrets.SECRET_ID }} --apiKey ${{ secrets.SECRET_KEY }}
# 登陆CloudBase
- name: 删除所有原有文件
run: yes | tcb hosting delete -e ${{ secrets.ENV_ID }}
# 删除腾讯云静态网站托管的所有文件
- name: 上传新文件
id: deployStatic
uses: TencentCloudBase/cloudbase-action@v1.1.1
with:
# 云开发的访问密钥 secretId 和 secretKey
secretId: ${{ secrets.SECRET_ID }}
secretKey: ${{ secrets.SECRET_KEY }}
# 云开发的环境id
envId: ${{ secrets.ENV_ID }}
# Github 项目静态文件的路径
staticSrcPath: ./
# 将Github的根目录下所有文件部署到腾讯云静态网站托管

③配置Github actions的Secrets

上述main.yml中使用了3个环境变量,分布是SECRET_ID、SECRET_KEY、ENV_ID。

SECRET_ID与SECRET_KEY指的是腾讯云API密钥,可以在腾讯云控制台-访问管理-访问秘钥-API秘钥管理中申请与查看

ENV_ID指的是腾讯云环境的id,可以在创建的腾讯云环境中查看

准备好上述3个变量值后,请前往项目 Github 文件夹的Settings标签页,在项目的Secrets中分别配置 SECRET_IDSECRET_KEYENV_ID

6.写作与自动部署

(1)写作

hexo new post <文章名>命令

上述命令会在source/_posts文件夹下生成<文章名>.md的文件,hexo支持markdown语法,修改该文件的内容即可。

也可以直接在source/_posts文件夹下新建<文章名>.md文件。

(2)生成静态网站文件

hexo clean

上述命令是清除缓存文件 (db.json) 和已生成的静态文件 (public),若进行了更换主题等操作,需要执行该命令,若仅新增了文章,则可以不用执行该命令。

hexo g

上述命令是生成网站静态文件

hexo s

上述命令是预览生成的网站,确认更改是否生效。打开http://localhost:4000/即可,如需取消预览,只需在cmd窗口按下ctrl+c

hexo d

上述命令是将public文件夹以及_config.yml文件中extend_dirs中提到的文件夹上传到github中。

由于本文上述步骤配置了.github/workflow/main.yaml文件,所以在将代码push到github是会触发Github actions,该脚本会先删除腾讯云静态网站中的已有文件,再讲新生成的文件上传到腾讯云静态网站

7.总结

按照上述步骤使用hexo,本地无需安装其它更多的环境,仅需在cmd窗口中执行hexo d,即可实现将hexo博客内容自动托管到腾讯云静态网站托管,极大方便了hexo博客的使用。