cover_image

Travis CI 自动部署 Hexo 博客到 Github Pages

padluo 老罗说AI
2020年03月08日 03:00

padluo

读完需要

6
分钟

速读仅需 2 分钟

如何用 Github 搭建博客中,我们基于 Git 仓库建立了一个分支 blog-source 来管理博客的源码,每次在 source/_post 下创建新文章,利用 GitHub 图床,在 source/images 文件夹中存放文章中需要用到的图片,关于 Github 图床的搭建及使用在以后的文章中讲解。写好博客文章后,只需要git push把博客源码推送到 Github 的远程仓库,Travis CI 便完成自动部署。

1# 创建一篇新文章或新的页面
2hexo new [layout] <title>

1


   

手动部署

使用 Hexo 生成静态文件,自动部署网站,可以执行下列的命令:

1hexo generate --deploy
2# 命令简写
3hexo g -d

这样就可以完成博客的更新了。

2


   

Travis CI 部署 GitHub Pages

2.1


   

创建一个 Github repo 并且同步代码到 GitHub 上

  • 新建一个名称为 <username>.github.io 的 Github repo,这里的<username>是你的用户名称,例如我的 GitHub 用户名是 padluo,我建立的 repo 是padluo.github.io

  • 建立一个分支来管理博客的配置和 Markdown 文件,例如,padluo 建立了一个名称为 blog-source 的分支,管理博客的源代码。

  • 将你的 Hexo 站点文件夹推送到 GitHub 远程仓库的 blog-source 分支中。默认情况下 public 目录将不会被推送到 repository 中,你应该检查 .gitignore 文件中是否包含 public 一行,如果没有请加上。

2.2


   

设置 Travis CI 和 GitHub

  • 将 Travis CI 添加到你的 GitHub 账户中,用 GitHub 账户登录Travis CI即可。

  • 前往 GitHub 的 Applications settings,配置 Travis CI 权限,使其能够访问你的 repository。

  • 你应该会被重定向到 Travis CI 的页面。如果没有,请手动前往Travis CI。

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

  • 回到 Travis CI,前往你的 Settings-repository 的设置页面,在 padluo.github.io 仓库的 Settings-Environment Variables 下新建一个环境变量,Name 为 GH_TOKEN,Value 为刚才你在 GitHub 生成的 Token。确保 DISPLAY VALUE IN BUILD LOG 保持 不被勾选,避免你的 Token 泄漏。点击 Add 保存。

2.3


   

编辑 Travis CI 部署配置文件

在你的本地 Hexo 站点项目根目录中新建一个 .travis.yml 文件,内容如下:

 1sudo: false
2language: node_js
3node_js:
4  - 12 # use nodejs v12 LTS
5cache: npm
6branches:
7  only:
8    - blog-source # 仅从 blog-source 分支构建
9script:
10  - hexo generate # generate static files
11deploy:
12  provider: pages
13  skip-cleanup: true
14  github-token: $GH_TOKEN
15  keep-history: true
16  committer_from_gh: true
17  target_branch: master # 部署到 master 分支
18  on:
19    branch: blog-source
20  local-dir: public

将 .travis.yml 推送到 GitHub 远程仓库中,Travis CI 应该会自动开始运行,并将生成的文件推送到同一 repository 下的 master 分支下。

前往 https://<username>.github.io 查看你的站点是否可以访问。这可能需要一些时间。

参考资料

  1. https://hexo.io/zh-cn/docs/github-pages


微信公众号「padluo」,分享数据科学家的自我修养,既然遇见,不如一起成长。

图片


读者交流电报群

https://t.me/sspadluo


知识星球交流群

图片



继续滑动看下一个
老罗说AI
向上滑动看下一个