之前使用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. Java基础知识(持续更新中...)

    1.成员变量:全局变量/字段(Field),不要称之为属性(错误)直接定义在类中,方法外面 1.类成员变量    使用static修饰的变量 2.实例成员变量 没用使用static修饰的变量 局部变量 ...

  2. vue2.0+node.js+mongodb全栈打造商城

    Github地址:https://github.com/ccyinghua/vue-node-mongodb-project 一.构建项目所用: vue init webpack vue-node-m ...

  3. 8.Element-ui日期组件上传到后台日期少一天解决办法

    <el-date-picker type="date" value-format="yyyy-MM-dd" placeholder="转出日期& ...

  4. Python常用模块之os和sys

    1.OS常用方法 os.access(path, mode) # 检验权限模式 os.getcwd() #获取当前工作目录,即当前python脚本工作的目录路径 os.chdir("dirn ...

  5. jquery获取父级元素、子级元素、兄弟元素

    1:$(this).parent(expr) 找父亲节点,可以传入expr进行过滤,比如$("span").parent()或者$("span").parent ...

  6. springboot整合swagger笔记

    首先,在pom.xml中添加依赖 <!--swagger--> <dependency> <groupId>io.springfox</groupId> ...

  7. Cacti 学习笔记

    Cacti是用php语言实现的一个软件,它的主要功能是用snmp服务获取数据,然后用rrdtool储存和更新数据,当用户需要查看数据的时候用rrdtool生成图表呈现给用户.因此,snmp和rrdto ...

  8. vm 中 centOS 7 固定ip设置

    虚拟机中,centOS通过NAT连接,设置固定IP上网. 本地主机 VMware Network Adapter VMnet8  状态信息: 描述: VMware Virtual Ethernet A ...

  9. 基于GTID的MySQL主从复制#从原理到配置

    GTID是一个基于原始mysql服务器生成的一个已经被成功执行的全局事务ID,它由服务器ID以及事务ID组合而成.这个全局事务ID不仅仅在原始服务器器上唯一,在所有存在主从关系 的mysql服务器上也 ...

  10. Scrapy进阶

    当我们使用scrapy框架爬取网站的时候,我们会有一个入口的url,一个名为start_urls,我们爬取的第一个网页是从这一开始的. 需求: 现在我们有一个这样的需求,比如说我们对起始的URL有一个 ...