之前使用Hexo的时候,都是在本地进行编译和部署的,平时使用的时候觉得没什么,只需要

hexo g
hexo d

两步就可以把博客更新的内容推到GitHub Pages上。但是某些时候可能会遇到你的文件夹中存在一些其他编辑到一半的文章——这时候想要更新博客中的某些内容但同时不想把没写完文章发布出去的话,就必须要先把那几篇文章移到其他地方,更新完复制回去。

这种蠢办法虽然有效但是十分麻烦——所以这次我们要上一些更牛逼的工具,例如——Travis CI。

思路

做这件事的大体思路就是——以 remote 端的仓库为标准,来生成我们我们的博客。我们只需要把需要发布或者更新的内容push到远程仓库,持续集成工具就会帮我们把仓库中的内容clone下来,然后再在它的容器里进行编译、部署的流程。

开始之前首先要说的是,我的博客使用GitHub Pages来托管。源文件存放在 master 分支里,页面文件存放在 gh-pages 分支里。

启用 Travis CI

首先用你的GitHub账户登录Travis CI

登录之后,在你的个人信息页面可以看到你GitHub中的所有仓库(如果没有的话授权一下就有了),找到你的博客所在的仓库,把右边的开关键拨到打开的状态。

点击右边的按钮进入设置页面,在设置页面中我们可以设置什么时候需要CI工具执行Build、配置环境变量、配置定时任务等。

这里推荐把 Build only if .travis.yml is present 这一项打开。

为 Travis CI 配置登录权限

动动脑想一想就能知道——如果我们在一个陌生的容器中执行了编译操作然后想要推送到自己的GitHub仓库中时,是没有权限的——我们既没有配置SSH Key也没有在任何位置输入过密码。这里我们要用一个安全、稳定、便捷的手段来解决权限这个问题。

Access Token是一个好的解决方案。你可以理解成我们为给这个应用程序单独生成了一个口令,这个口令里包含了我们的账户和密码,我们在将要把代码推送到Github仓库的时候,告诉他这个口令,他就会把放行我们的推送请求了。

首先去GitHub给账户添加一个Personal Access Token。打开GitHub,在 Settings 页面中找到 Developer settings ,打开 Personal access tokens 标签页,点击新建一个token。

为这个Token取个名字,然后勾选 repo 这一栏,点击保存。

如果不出意外,保存后屏幕上会显示一行乱码——这就是服务器为你生成的口令。 你需要先把他复制下来,因为在此之后你是看不到这个口令的。你也不必把它记在小本本上,如果有需要再生成一个

我们在Travis CI中把口令设置为一个环境变量。打开刚才Travis CI中blog仓库的设置页面,在环境变量一栏把 access_token 作为一个value填写进去,然后给它取个好听的名字,点击添加。 推荐不要勾选 Display value in build log 不然别人可以在日志里看到你的口令。

可以看到上面那一行是之前添加过的token。正常情况下别人是不会看到你的口令的

在Travis CI服务端需要设置的就是这些,接下来要在仓库中添加Travis CI的配置文件。

添加配置文件

首先要看一下你hexo的配置文件 _config.yml 中部署那一块的配置,以我的为例——

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo: https://github.com/morenyang/blog.git
branch: gh-pages

这里的指定了博客的仓库链接和部署的分支。这里的仓库链接过一会是要被替换成token形式的链接。

在仓库的根目录下,新建一个 .travis.yml 文件,然后将以下内容写进去,并将该改的地方改一下:

language: node_js
node_js: --lts
before_script:
- git config user.name "YOUR_NAME"
- git config user.email "YOUR_EMAIL"
- sed -i'' "s~https://github.com/<yourname>/<reponame>.git~https://${GITHUB_ACCESS_TOKEN}@github.com/<yourname>/<reopname>.git~" _config.yml
script:
- hexo g
- hexo d

说明一下:

  • language 一项指的是容器的运行环境
  • node_js 一项指的是运行环境中node的版本,可以参照 nvm 的版本写法
  • before_script 指的是在执行操作前要运行的命令。
    • 这里我们指定了 git 的一些配置
    • 然后使用sed命令将hexo的配置文件中的部署仓库的链接替换成了access_token形式,其中前面的那一串是你在_config.yml中的链接,后面的那一串是token形式的链接。 ${GITHUB_ACCESS_TOKEN} 就是我们刚才为access_token配置的环境变量中的变量名。 这里记得把yourname和reponame换成你的
  • script 指的就是build的时候需要执行的命令了,这里根据平时的习惯设置为 hexo g 和 hexo d
  • 如果有其他需要,你还可以加入自己的配置,例如设置分支、设置其他环境变量,还有一些生命周期的hook之类的,具体可以去查一下

亲手试一把

到这里我们就大功告成了,在把配置文件推送到远程仓库后,你只需要把你更新的内容推送上去,你就可以在Travis CI的网站中看到实时的编译和部署情况了。

参考

链接:http://yangteng.me/blog/2018/20180517deploy-hexo-with-travis/

[转]使用 Travis CI 部署你的 Hexo 博客的更多相关文章

  1. iOS中 为 iOS 建立 Travis CI 韩俊强的博客

    每日更新关注:http://weibo.com/hanjunqiang  新浪微博! 你是否曾经试着为 iOS 项目搭建一台支持持续集成的服务器,从我的个人经验而言,这可不是一个轻松的活.首先需要准备 ...

  2. 使用Travis CI自动部署Hexo博客

    自从使用GitHub Pages和Hexo来发布博客之后,不得不说方便了许多,只需要几个简单的命令博客就发布了.但在不断的使用中发现每次的发布操作也挺耗时的. 我一般的操作是将平时整理好的md文件放到 ...

  3. Hexo 博客 之 腾讯云部署过程

    写在前面 Hexo 博客搭好了有差不多两周时间了,这期间走了很多弯路,跳了很多坑.一些坑自己 bing 到了答案,找到了解决方法,一些坑则是自己摸索出来的解决方法.现在准备写几篇关于搭建流程.搭建过程 ...

  4. linux 搭建hexo博客

    搭建环境: CentOS 6.5 1.安装git的编译包 yum -y install gcc zlib-devel openssl-devel perl cpio expat-devel gette ...

  5. 利用Serverless应用搭建Hexo博客

    本文将介绍如何使用火爆的Serverless应用,15分钟快速搭建Hexo博客.以腾讯云提供的Serverless应用–云开发为例: 步骤1:安装 CloudBase CLI 以及本地部署 Hexo ...

  6. 利用Travis IC实现Hexo博客自动化部署

    1.Hexo博客的利与弊 Hexo中文 我就默认为看到这篇文章的人都比较了解Hexo博客,也都能够成功手动部署吧.所以第一部分推荐两篇文章一笔带过,让我们快速进入本文的重点内容.实在不知道也不要方先看 ...

  7. 基于 Github Actions 自动部署 Hexo 博客

    前言 前不久使用了 Hexo 搭建独立博客,我是部署在我的腾讯云轻量应用服务器上的,每次都需要 hexo deploy 然后打包.上传.解压和刷新 CDN,非常麻烦.我的服务器配置也不高 2C2G 无 ...

  8. 使用 Azure 静态 Web 应用服务免费部署 Hexo 博客

    一.前言 最近在折腾 Hexo 博客,试了一下 Azure 的静态 Web 应用服务,发现特别适合静态文档类型的网站,而且具有免费额度,支持绑定域名.本文只是以 Hexo 作为示例,其他类型的框架也是 ...

  9. 史上最详细“截图”搭建Hexo博客并部署到Github

    http://jingyan.baidu.com/article/d8072ac47aca0fec95cefd2d.html 大家也搭建过博客,很多时候,按着教程来做就可以了,但是我当时为了搭建Hex ...

随机推荐

  1. SpringMVC知识点总结

    1. SpringMVC概述        SpringMVC是一个WEB层框架,主要用来负责与页面的交互.        SpringMVC是Spring家族的一大组件.Spring整合Spring ...

  2. jsp页面的传值(list)

    jsp页面与xml文件对应的关系: 例:网页上jsp的url为----purchase_app_btn.do? 对应xml文件下的 <action path="/purchase_ap ...

  3. django-单表操作

    #######单表操作######## 前面视图层,模板层.路由层都写了大概,项目肯定是会和数据库打交道,那就讲讲orm的单表查询吧,直接写过一点点,不太全面. 1.项目刚创建好,我们需要在setti ...

  4. 【SHOI2015】脑洞治疗仪(恶心的线段树,区间最大子段和)

    题目描述: 曾经发明了自动刷题机的发明家 SHTSC 又公开了他的新发明:脑洞治疗仪——一种可以治疗他因为发明而日益增大的脑洞的神秘装置. 为了简单起见,我们将大脑视作一个 01 序列.11代表这个位 ...

  5. hdu 3966 Aragorn's Story : 树链剖分 O(nlogn)建树 O((logn)²)修改与查询

    /** problem: http://acm.hdu.edu.cn/showproblem.php?pid=3966 裸板 **/ #include<stdio.h> #include& ...

  6. jsonp跨域请求360数据乱码解决办法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  7. http协议中的状态码(status code),超文本传输协议状态码

    HTTP协议,又叫超文本传输协议. 在项目的开发过程中,前后端交互,这个用的是最多的,在后端给我的的接口调用时,我们往往先查看这个协议的状态码,状态码正常了,才进一步去看我们从后太拿的数据,是否为我们 ...

  8. 【linux下dhcp服务的简单搭建及优化部署】

    dhcp server: 1::vim /etc/sysconfig/network-scripts/ifcfg-scfg:配置 server的 static IP: 2:vim /etc/dhcpd ...

  9. webpack4提升180%编译速度

    前言 对于现在的前端项目而言,编译发布几乎是必需操作,有的编译只需要几秒钟,快如闪电,有的却需要10分钟,甚至更多,慢如蜗牛.特别是线上热修复时,分秒必争,响应速度直接影响了用户体验,用户不会有耐心等 ...

  10. 发送post请求几种常见content-type类型

    application/x-www-form-urlencoded 这应该是最常见的 POST 提交数据的方式了.浏览器的原生 form 表单,如果不设置 enctype 属性,那么最终就会以 app ...