hexo使用github action自动部署至腾讯云开发静态网站托管服务以及github pages

Posted 2023-05-02

参考技术A 原文地址： https://blog.kaygb.com/210.html

谈及静态网站的好处，无非是快速轻量，甚至无需购买服务器，使用github pages或者coding等托管即可实现。同时，jsdelivr可对github公开仓库的静态资源进行加速，并且自带全球cdn，快速，并且完全免费。

近期，我的博客网站也迁移到了hexo，并托管在github pages，由于之前申请过腾讯云开发的9.9元静态网站托管服务，本着不用白不用的原则，我把国内的线路以及博客生成的页面都放在了腾讯云开发静态网站托管服务上。

首先在本地安装hexo环境，配置好主题以及自定义的配置，然后将整个hexo目录推送到github私有仓库。私有仓库在接受到push之后，使用github action进行hexo g和hexo deploy，将生成的静态文件推送到另一个以 用户名.github.io 为名称的仓库。

如你所见，我们需要使用两个github仓库来构建我们的个人博客，其中私有仓库(我们可以将名称设置为blog-source)作为博客源文件保存目录，包含所有的hexo配置文件以及我们的主题文件。

这样的好处就是，我们可以完整保留hexo的目录，不用担心文件丢失的问题，还有就是我们可以直接在github网页端直接进行文章的写作，并且支持原生的github markdown格式。

在我们commit之后 github action会自动帮我们构建以及发布，我们只需要安心写作即可。

这一步可以根据hexo官方文档来进行配置。

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

一个是私有的仓库，用来存放hexo所有的源文件，另一个是公开的以 用户名.github.io 的仓库。

使用ssh-keygen生成一组公私秘钥对

在 Settings -> SSH and GPG keys 添加刚刚生成的公钥，名称随意。

在私有仓库的 Settings -> Secrets 里添加刚刚生成的私钥，名称为 ACTION_DEPLOY_KEY 。

在hexo目录创建 .github 文件夹，并在里面创建 workflows 文件夹，然后在里面新建 blog.yml

贴出我的GitHub action配置文件，后面再进行讲解。

其中，在31至38行内，可以添加自己所使用的hexo插件，如果本地测试的时候使用了此插件，一定要记得将那个插件的npm安装命令写在那里。

云开发Cloudbase提供了可直接使用的action： https://github.com/marketplace/actions/tencent-cloudbase-github-action

在腾讯云开发控制台获取token： https://console.cloud.tencent.com/cam/capi

然后在项目 Setting/ Secrets 里设置 SECRET_ID , SECRET_KEY , ENV_ID 信息

根据文档做出修改然后添加在blog.yml后面

同时，目前我也遇到很多问题，包括到现在为止还无法解决的问题。

一般来说是无法推送 .git 目录的，如果你使用的主题是直接使用git clone下来的，那么一定就会存在 .git 目录，这时我们可以在.gitignore文件内忽略此目录或者直接删除.git文件夹。由于我是直接删掉文件夹，所以另一种方式请大家自行尝试。

其实我最开始是想在公开仓库设置一个github action，在推送到公开仓库之后再由公开仓库的action推送到腾讯云 开发，但是不知道为何hexo deploy的时候无论如何都不会将 .github 文件夹推送上去，即使配置了 skip_render 和 include 也不行，但是我在本地hexo g的时候就可以在public目录生成 .github 文件夹，并且我在网页端公开仓库尝试创建action文件，可以推送成功，但是私有仓库推送之后action文件就会被覆盖，目前暂时无法解决这个问题。

所以只能妥协在同一个仓库进行构建推送，由于处理的文件较多，所以每次的部署都会给我发送一封构建失败的邮件，但它其实是已经部署成功了，我查找了很多的资料，目前暂未解决这个问题，如果您遇到这个问题并且具有解决办法，烦请您告知，非常感谢！

https://juejin.im/post/5da03d5e6fb9a04e046bc3a2

使用Travis-CI自动化部署Hexo博客

使用 Travis-CI 自动化部署 Hexo 博客

Travis CI 是开源的持续集成构建项目，用来构建托管在GitHub上的代码。

架构图如下：

整个流程就是本地编辑*.md文件，然后push到github中source分支，Travis-CI检测到分支更新从而根据配置文件建立虚拟机进行测试/构建，并将结果部署到github中master分支，实现github pages访问。

1. 配置Hexo+GitHub

配置方法省略，参见"使用Hexo+Github搭建个人网站"。

GitHub 仓库分支架构：
  master分支：提供Pages服务
    存放 Hexo 生成的静态文件
  source分支：建议私有仓库
    存放 Hexo 项目文件以及构建配置文件{blog/source/.travis.yml}

更改本地环境配置

cd blog #进入Hexo项目/博客目录
git init #初始化为git仓库
git checkout -b source #创建并切换到 source 分支
git add .
git commit -m "xxx"
git remote add origin [e-mail]:yourname/yourname.github.io.git #关联远程仓库
git push origin source:source #提交本地source分支到远程仓库source分支

2. Travis CI配置

使用GitHub账户登陆Travis CI，它会自动发现GitHub上的已有仓，选择需要执行持续集成的仓库。

本教程为：yourname/yourname.github.io。

A. General设置

进入设置选项，开启以下服务：

Build only if .travis.yml is present 表示“只有当 .travis.yml 存在时才构建”
Build branch updates 表示“当分支更新时构建” 两个选项

B. 配置 Acess Token

还是设置选项，增加一条环境变量{Enviroment Variables}：

name：与github开发者设置中 Personal access tokens 设置一致。

value：在github开发者设置中 Personal access tokens 页面，新建token，并勾选相应权限。

权限：{这里只需要 repo 下全部和 user 下的 user:email 即可}。

不勾选后面的 Display value in build log。

Travis可通过调用此变量获得github的权限，从而将构建后的静态文件push到github。

3. 配置 .travis.yml

在本地环境的源码分支{这里是source分支}的根目录下新增一个 .travis.yml 配置文件，内容如下：

language: node_js
node_js: stable

cache:
    directories:
        - node_modules

before_install:
  - npm install -g hexo-cli

install:
  - npm install
  - npm install hexo-deployer-git --save

before_script:
  - git config --global user.name "user_name" 
  - git config --global user.email "user_email"

script:
  - hexo clean
  - hexo generate

after_script:
  - sed -i "s/gh_token/${token_name}/g" ./_config.yml
  # token_name 为上一步中Travis环境变量中设置的name
  - hexo deploy

branches:
  only:
    - source

修改_config.yml

deploy:
  type: git
  repo: https://[e-mail]/yourname/yourname.github.io.git
  branch: master

4. 日常使用

A.使用 hexo new 新建并编辑文章，或者手动编写md文档放入 source/_post 文件夹

B.使用命令：git push origin source:source 提交

特别说明：

可以使用两个不同仓库进行部署，如：将source部署在一个私有仓库中确保源码安全。

如果使用Coding Pages服务，其自带集成功能，配置方法类似。

如果使用VPS自建Pages服务，可搭建Jenkins实现。