如何在github的pages部署hexo实现代码提交到仓库自动部署

2022年7月25日 0条评论

如何在github的pages部署hexo实现代码提交到仓库自动部署

1. 在github创建一个公开的仓库托管代码。

2. 本地下载安装hexo

npm install hexo-cli -g

hexo init blog_hexo

cd blog_hexo

npm install

第一个命令全局安装hexo命令，第二步下载hexo到本地，第三步进入hexo目录，第四部安装依赖，第三步和第四部如果不是本地跑起来非必须。

然后把.travis.yml这个拷贝到根目录。把cname文件拷贝到source目录，.travis.yml这是自动化部署流水线脚本。cname是github pages绑定的域名，需要提前做解析cname到wlphp.github.io，wlphp是我的仓库地址，githubpages是根据这个cname文件做域名绑定的，cname文件里面就只写一个你cname到仓库地址.github.io的一个域名，而且自定义的域名支持一键https的也是。为啥came文件要放到source目录呢？因为在流水线部署的时候执行hexo generate 命令会构建打包后的静态文件放到根目录的public文件夹，放到source里面会自动被打包到public文件夹，部署的时候是部署public文件夹。.travis.yml这个文件内容如下

sudo: false

language: node_js

node_js:

- 14 # use nodejs v10 LTS

cache: npm

branches:

only:

- master # build master branch only

script:

- hexo generate # generate static files

deploy:

provider: pages

skip-cleanup: true

github-token: $GH_TOKEN

keep-history: true

on:

branch: master

local-dir: public

3. 把本地的代码推送到仓库

Git init 初始化仓库

Git remote add origin https://github.com/wlphp/blog_hexo.git

Git add .

Git commit -m ‘first commit’

Git push -u origin master 推送到远程origin的master分支去

4. 配置Travis CI

打开设置 githubapps https://github.com/wlphp/blog_hexo/settings/installations

设置成允许读取所有仓库代码即可，因为他要拉取你仓库代码，构建成静态文件的。这里就是授权的意思。

然后我们需要在travis ci的wlphp/blog_hexo 设置下环境变量，也就是为了能够在构建的时候把 github-token: $GH_TOKEN 替换下。

https://github.com/settings/tokens

在浏览器内新建一个标签页，前往 GitHub 新建 Personal Access Token，只勾选 repo 的权限并生成一个新的 Token。Token 生成后请复制并保存好。

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x

回到 Travis CI，前往你的 repository 的设置页面，在 Environment Variables 下新建一个环境变量，Name 为 GH_TOKEN，Value 为刚才你在 GitHub 生成的 Token。确保 DISPLAY VALUE IN BUILD LOG 保持不被勾选避免你的 Token 泄漏。点击 Add 保存。公钥不直接放到.travis.yml里面也是为了防止泄露。

5.重新推送到仓库下

5. 如果没有出现错误就部署成功了

http://hexo.github.wlphp.com/

https的和http的都可以通过自己的域名访问了。

我们来到仓库的设置 pages看下

这个域名是根据cname文件里面的域名自动绑定的。下面还有一个强制https访问。这样我们就部署成功了。

后续在本地hexo添加好新的文章之后，我们只需要把代码推送到github的远程master仓库，就会自动触发Travis CI的流水线，根据他的配置文件.travis.yml自动拉取仓库的master代码，然后构建到根目录的public文件夹，同时cname域名绑定文件也会到public文件夹下面。然后把public下面的编译好的静态文件部署到github pages。

6. 说下github pages的优势

Github pages 上面能够运行纯静态的网站，比如hexo构建之后的产物，比如纯静态的html，css，js等。Gitee pages飞付费版不支持自定义域名，只能使用他的域名，虽然他在国内速度快但是，要求使用自己的域名的时候 gitee pages就没办法了。

Github pages 采用了cdn虽然是海外的ip但是国内也能打开。

不需要考虑费用，域名还不用备案。前后端分离的个人测试项目，前端部分可以放上去。

上文用到的名词解释下：

Github是啥？

GitHub 是一个面向开源及私有软件项目的托管平台，因为只支持 Git 作为唯一的版本库格式进行托管，故名 GitHub。 GitHub 于 2008 年 4 月 10 日正式上线，除了 Git 代码仓库托管及基本的 Web 管理界面以外，还提供了订阅、讨论组、文本渲染、在线文件编辑器、协作图谱（报表）、代码片段分享（Gist）等功能。目前，其注册用户已经超过350万，托管版本数量也是非常之多，其中不乏知名开源项目 Ruby on Rails、jQuery、python 等。GitHub 去年为漏洞支付了 16.6 万美元赏金。 2018年6月，GitHub被微软以75亿美元的价格收购。

Github pages是啥？

Github Pages 是 github 公司提供的免费的静态网站托管服务，用起来方便而且功能强大，不仅没有空间限制，还可以绑定自己的域名。https://docs.github.com/cn/pages是他的使用文档。https://pages.github.com/ 这是他的官网介绍说明页面。

Hexo是啥？

Hexo是一款基于Node.js的静态博客框架，可以方便的生成静态网页托管在GitHub和Coding上，是搭建博客的首选框架。

Travis CI 是啥？

Travis CI 提供的是持续集成服务（Continuous Integration，简称 CI）。它绑定 Github 上面的项目，只要有新的代码，就会自动抓取。然后，提供一个运行环境，执行测试，完成构建，还能部署到服务器。

持续集成指的是只要代码有变更，就自动运行构建和测试，反馈运行结果。确保符合预期以后，再将新代码"集成"到主干。

持续集成的好处在于，每次代码的小幅变更，就能看到运行结果，从而不断累积小的变更，而不是在开发周期结束时，一下子合并一大块代码。

Travis 要求项目的根目录下面，必须有一个.travis.yml文件。这是配置文件，指定了 Travis 的行为。该文件必须保存在 Github 仓库里面，一旦代码仓库有新的 Commit，Travis 就会去找这个文件，执行里面的命令。

这个文件采用 YAML 格式。下面是一个最简单的 Python 项目的.travis.yml文件。

language: python

script: true

上面代码中，设置了两个字段。language字段指定了默认运行环境，这里设定使用 Python 环境。script字段指定要运行的脚本，script: true表示不执行任何脚本，状态直接设为成功。

Travis 默认提供的运行环境，请参考官方文档。目前一共支持31种语言，以后还会不断增加。