之前使用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. Xshell中使用FTP/SFTP工具下载文件

    (1)sftp host_ip,输入用户名/密码 (2)通过cd命令找到远程服务器要拷贝的文件: 通过lcd命令指定本地保存地址. (3)通过get filename拷贝文件 (4)在本地查看,已经可 ...

  2. zepto 基础知识(1)

    1.$() 的用法. 获取元素 $('div') //获取所有页面中的div元素 $('#foo') // 获取ID 为"foo"的元素 创建元素 $("<p> ...

  3. LeetCode 简单 - 最大子序和(53)

    采用动态规划方法O(n) 设sum[i]为以第i个元素结尾且和最大的连续子数组.假设对于元素i,所有以它前面的元素结尾的子数组的长度都已经求得,那么以第i个元素结尾且和最大的连续子数组实际上,要么是以 ...

  4. Java分享笔记:创建多线程 & 线程同步机制

    [1] 创建多线程的两种方式 1.1 通过继承Thread类创建多线程 1.定义Thread类的子类,重写run()方法,在run()方法体中编写子线程要执行的功能. 2.创建子线程的实例对象,相当于 ...

  5. JS的Ajax对象

    //1.得到对象    var ajax = new XMLHttpRequest(); //2.建立连接    ajax.open('post','./2.php',true); /*       ...

  6. java中的基本算法

    整理一下常用的又基础的算法.由于平时的项目比较简单,很少用到算法,但工作不只是眼前的苟且,还有诗和远方. 1.链表 链表用来存储数据,由一系列的结点组成.这些结点的物理地址不一定是连续的,即可能连续, ...

  7. svg在html的使用

    <svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'> <defs&g ...

  8. Java 使用Apache POI读取和写入Excel表格

    1,引入所用的包 <dependency> <groupId>org.apache.poi</groupId> <artifactId>poi-ooxm ...

  9. js实现前端的搜索历史记录

    最近在对接前台页面(WEB端)时,产品要求需记录下客户的搜索记录,我们是前后台完全分离的项目,根本不能保存的session域中,没办法,虽然作为后台开发,遇到需求就自己研究了一通,先看一下最终效果图, ...

  10. 解决百度编辑器ueditor插入视频网址保存不了问题

    问题:如下图,在百度编辑器中插入视频,视频网址可以识别,但是提交内容后视频却显示不了. 解决:这个问题主要是编辑器中会过滤一些html标签,所以可以给标签添加白名单. 修改 ueditor.confi ...