本地部署Hexo博客并托管至腾讯云云开发CloudBase

2022-10-26 16:36:23 浏览数 (1)

前天看见张益达使用腾讯云静态网站托管搭建了一个Hexo博客,自己便忍不住也想折腾,终于折腾了一早上也使用Hexo搭建了个人博客,刚开始使用的是腾讯云自动部署,但是因为自己不会换主题而放弃,最后使用本地部署的。

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。

环境安装

1.Node.js安装

在本地安装Node.js:官网下载

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

运行安装过程中请按照默认选项安装,无需修改配置。

2.CloudBase CLI安装

确保Node.js安装成功后,使用npm命令安装 cloudbase/cli

打开命令行终端,输入如下命令:

代码语言:javascript复制
npm i -g @cloudbase/cli

测试是否安装成功命令:

代码语言:javascript复制
cloudbase -v

Hexo部署

你可以依据Hexo官方文档安装:

https://hexo.io/zh-cn/docs/

或直接按照如下方式安装:

打开命令提示符,执行命令:

代码语言:javascript复制
npm i -g @cloudbase/cli hexo-cli

等待执行完毕后,在本地新建名称为Hexo的文件夹,在起文件夹内打开命令提示符,执行如下命令初始化Hexo:

代码语言:javascript复制
hexo init

在初始化过程中,可以看到如下输出:

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

代码语言:javascript复制
hexo s

执行后在浏览器打开' localhost:4000' ,即可看到已经部署成功的Hexo博客。

此时说明你的博客已经在本地部署成功,博客的相关信息修改请参照Hexo官方文档操作。

云开发环境创建

登录你的腾讯云开发控制台,单击立即创建并使用,新建一个环境来进行部署。

在新建环境窗口中,根据实际需求填写环境名称,选择按量计费,单击立即开通即可开通环境。

开通成功之后,单击环境名称,进入环境总览页面。如下所示:(获取到自己的环境ID)

单击左侧菜单栏中的静态网站托管,在页面中单击开启使用,开通静态托管服务。

当您能看到如下界面时,即说明开通成功。

托管到腾讯云

初始化云开发 CLI

在本地打开命令提示符,执行如下命令:

代码语言:javascript复制
cloudbase login

执行命令后稍等一会,系统将拉起浏览器授权,请登录创建云开发环境的账号,进行确认授权。

构建Hexo部署文件

打开命令提示符,在创建的 Hexo 文件夹中,执行如下命令:

代码语言:javascript复制
Hexo g

Hexo 将会生成部署文件,默认将文件生成在 Public 文件夹下:

执行如下命令,将 Hexo 部署到云开发静态托管中(其中EnvId替换为您创建的环境 ID)。

代码语言:javascript复制
cloudbase hosting deploy public -e EnvID

自定义域名

此时回到腾讯云开发控制台-静态网站托管页面,在此页面也可以看见已经上传的静态网页文件。

在配置信息中找到默认域名,打开后即可看见已经部署成功的博客。

你也可以点击基础配置,添加自定义域名,修改浏览器缓存配置及访问配置等。

后续发布更新

后续对本地的博客进行修改,或者增减页面,更换主题等操作,只需要都在本地进行,且预览无误后再按照以下步骤更新至腾讯云CloudBase。

执行命令清理缓存文件:

代码语言:javascript复制
hexo clean

执行命令生成文件:

代码语言:javascript复制
hexo g

执行命令预览:

代码语言:javascript复制
hexo s

预览无误后执行命令上传:

代码语言:javascript复制
cloudbase hosting deploy public -e 环境ID

注意:与博客操作有关的命令,均要在刚开始创建的博客本地文件夹执行,且使用 Node.js command prompt或使用后面文章中提到的 git bash执行。

Git一键部署

除了CloudBase,你还可以将博客一键部署至Github、Gitee、Coding等平台,这里只给出Gitee的部署教程。

安装Git

Git Bash是一款git的命令行工具,支持Mac、Linux和Windows,git主要用于版本控制。

Git下载地址:https://git-scm.com/download/win

安装完后需要执行如下命令,安装Hexo关于git的管理组件:

代码语言:javascript复制
hexo-delopyer-git

Gitee仓库

注册Gitee账号,地址:https://gitee.com/

创建一个仓库,仓库的名称随便写,仓库的路径要和用户名(个人空间地址)。

创建公钥

在本地博客文件夹内打开 git bash输入命令:

代码语言:javascript复制
ssh-keygen -t rsa -C "你的邮箱"

然后连续3次回车,最终会生成一个文件在用户目录下,打开C盘用户目录,找到id_rsa.pub文件,记事本打开并复制里面的内容。

打开gitee个人设置里面的安全设置SSH公钥,标题随便取,粘贴刚刚复制好的密钥内容,点击确认即可。

配置连接地址

打开刚建立好的博客仓库,点击克隆/下载,复制里面的SHH链接。

然后进入本地博客目录,打开配置文件 _config.yml,找到里面的 deploy,把刚刚复制的SSH链接粘贴在对应的位置。

代码语言:javascript复制
deploy:
type: git
repo: git@gitee.com:yuezeyi/blog.git
branch: master

后执行:

代码语言:javascript复制
# 清理缓存
hexo clean
# 生成文件
hexo g
# Git上传
hexo d

然后返回Gitee,可以看到仓库里面已经有很多文件了,说明已经上传成功。

自己遇到的炕:

解决方法:

这是因为在创建git文件夹的时候信息不完善导致的,此时在命令行中执行:

代码语言:javascript复制
git config --global user.email "你的邮箱"
git config --global user.name "你的名字"

然后再清理缓存重新生成文件上传即可!

0 人点赞