阅读 272

通过travis自动部署hexo博客到github pages

原文链接:blog.sjfkai.com/2017/11/04/…

转载请注明出处

如果你曾了解过Hexo, 相信你已经可以通过hexo deploy部署自己的博客到github pages了。

但是,这样我们仅仅可以通过当前电脑来发布博客,如果电脑不在身边,或者不小心把文件删除了,就会很麻烦。

本文教你如何实现把自己写的博客和生成的静态文件同时托管在github

将博客源码托管到github

细心的人可以发现,通过hexo init生成的文件中,已经包含了.gitignore文件。说明hexo开发者也是希望大家把博客源码托管到git上的。

我们可以通过分支来实现,将源码放在master(看个人喜好)分支、将hexo deploy的分支指定为gh-pages分支。具体实现如下:

  1. 如果没有github repository首先需要在github新建一个仓库,点击new repository

  2. hexo init 生成一个新的博客项目

  3. 根据hexo 文档修改配置,使博客可以通过git server预览。

  4. git init

  5. git remote add origin git@github.com:account/blog_repo.git 请将git地址改为1中说到的你自己的仓库地址

  6. git add .

  7. git commit -m "init"

  8. git push origin master -f 将代码推到github master 分支

这时候,我们就把项目托管到了github,当你换了一台电脑,或者不小心把文件删除了的时候,只要重新git clone就可以了。

但是这仅仅只是将代码托管到了github。当我们新完成一篇博客,并把代码pushgithub上的时候,并不会自动deploy

通过travis自动部署

Travis CI是在软件开发领域中的一个在线的,分布式的持续集成服务,用来构建及测试在GitHub托管的代码。

  1. 使用 github 授权登录 Travis CI

  2. Travis CI 中打开博客项目仓库的开关。并在配置中打开Build only if .travis.yml is present选项

  3. github 中创建access token,详细教程:Creating a personal access token for the command line

  4. travis博客仓库的配置中将刚刚生成的token添加到Environment Variables中,name为REPO_TOKEN

  1. 在项目根目录新增.travis.yml文件。配置如下
language: node_js
node_js: stable
branches:
  only:
  - master
cache:
  directories:
  - node_modules
before_install:
- git config --global user.name "sjfkai"
- git config --global user.email "sjfkai@163.com"
- npm install -g hexo-cli
- export HEXO_DEPLOYER_REPO=https://$REPO_TOKEN@github.com/sjfkai/blog.git
install:
- npm i
script:
- hexo clean
- hexo generate
- hexo deploy
复制代码
  1. 修改hexo的配置文件_config.ymldeploy:
# 注意,这里注释掉了repo, 因为我们需要在ci中通过环境变量 HEXO_DEPLOYER_REPO 配置
deploy:
  type: git
  # repo:
  branch: gh-pages
复制代码
  1. git add .

  2. git commit -m "add travis ci"

  3. git push origin master

这时候你会发现travis ci显示该项目处于running状态。 等最后变为 passed 状态后。github pages就已经自动部署成功了。

博主源码

github.com/sjfkai/blog


欢迎关注公众号 “大前端开发者”。给你带来更多的前端技术与资讯

关注下面的标签,发现更多相似文章
评论