如何在 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 种语言，以后还会不断增加。

下面是一个稍微复杂一点的.travis.yml。

language: python

sudo: required

before_install: sudo pip install foo

script: py.test

上面代码中，设置了四个字段：运行环境是 Python，需要 sudo 权限，在安装依赖之前需要安装 foo 模块，然后执行脚本 py.test。

具体参考官方文档：https://docs.travis-ci.com/user/languages/python/

Git 是啥？

Git 是一款分布式源代码管理工具(版本控制工具)

我们写的代码需要使用 Git 进行管理。

源代码有必要管理起吗？

有必要，因为人工的去处理不同的版本，做相应备份会很麻烦。

Git 是 linux 之父当年为了维护 linux—linus 之前也是手动维护合并把文件发给 Linus

linus 自己写了一个版本管理的工具(Git)

特点：

Git 易于学习， 占用空间小，性能快如闪电。它优于 Subversion、CVS、Perforce 和 ClearCase 等 SCM 工具，

具有便宜的本地分支、方便的暂存区和 多个工作流等功能。

git 分为哪几个区？分别是什么？

①工作区(Workspace)是电脑中实际的目录。

②暂存区(Index)类似于缓存区域，临时保存你的改动。

③仓库区(Repository)，分为本地仓库和远程仓库。

通常提交代码分为几步：

①git add 从工作区提交到暂存区

②git commit 从暂存区提交到本地仓库

③git push 或 git svn dcommit 从本地仓库提交到远程仓库

git 与 svn 的区别？

svn 集中式代码版本控制管理工具

git 分布式代码版本控制管理工具 git 最流行

集中存放在服务器端 传统 url 地址： 账号名：密码

svn 集中式的 如果出现 svn 服务器出现故障 每个用户都不能访问服务器 代码无法同步 git 就没有这种问题

git 与 github、码云、gitlab 的关系

github、码云、gitlab 都是在线的代码托管平台

他们都支持 git 管理代码的方式

github.com: 全球最大免费代码托管平台 码云: 国内免费代码托管平台 gitlab:企业项目开发使用广泛