手把手教你使用Travis CI自动部署你的Hexo博客到Github上

简介

这年头要是没有个博客都不好意思给别人说你是程序员,我用XX笔记呀,不行吗?不行,这玩意儿要么不能公开分享,要么公开分享要会员,现在到处都是开源,自己学到了东西都不能分享给需要帮助的人,真是伤心呀。那么今天就来聊聊当你用Hexo搭建了博客,怎么自动更新呢,大家都知道Hexo是需要手动生成HTML静态网页的,虽然命令很少,但是每次写完博客先得推送到git然后在生成静态文件,再推送到服务器,想想我这个心也是醉了,不过看到知乎上还有人带着U盘,我只能呵呵了~,你们耐心真好~

那我们今天就来说说怎么使用Travis CI来自动构建你的博客

什么是Travis CI

Travis CI 是目前新兴的开源持续集成构建项目,它与jenkins,GO的很明显的特别在于采用yaml格式,同时他是在在线的服务,不像jenkins需要你本地打架服务器,简洁清新独树一帜。目前大多数的github项目都已经移入到Travis CI的构建队列中,据说Travis CI每天运行超过4000次完整构建。对于做开源项目或者github的使用者,如果你的项目还没有加入Travis CI构建队列,那么我真的想对你说out了。

我的博客架构

也算是一个框架吧

首先我的博客是使用Hexo来搭建的,托管到Github提供的Gitpage服务上的

每次写完博客git push到github,然后Travis自动构建,构建完成后自动推送到Gitpage服务上

生成后的HTML文件和博客的源文件我是放到一个仓库的,只是使用了不同的分支

master:博客的静态文件,也就是hexo生成后的HTML文件,因为要使用Gitpage服务,所以他规定的网页文件必须是在master分支

blog-source:是博客的源代码

当然这样做有隐私问题,因为任何人都能哪的你的博客源码,当然既然是博客,所以就没有这些问题了

启用要构建的项目

首先如果你要使用Travis CI,你必须要GIthub账号(好像Travis CI只支持构建github的项目)和一个项目

使用Github账号登录Travis CI官网,如下图

登录完后会进入如下界面

当然如果你以前没用使用过,所以你登录完是没有上图红框内的内容的,这里是因为我在写这篇博客前已经使用了,所以会有这些内容

接下来我们点击My Repositories旁边的+,意思是添加一个要自动构建的仓库,如下图:

点击后就会来到如下界面:

可以看到这个界面会显示当前github账号的所以项目,如果没有显示,点击右上角的“Sync account”按钮,就可以同步过来了(ps:上次用windows电脑始终同步不过来项目,最后换成mac可以同步了,最后又换回windows也可以了,汗(⊙﹏⊙)b,不太懂,什么个情况)

居然仓库都同步过来了,那么下一步肯定是要开启你需要构建的仓库,可以看到我开启了lifengsofts.github.io这个项目,当然这个也是我就是我的博客啦

开启后我们还需要进行一些配置,操作如下

点击红框的那个菜单按钮,就会出现这样的下拉菜单,我们选择设置,来到这个界面,我们按照如下勾选

Build only if .travis.yml is present:是只有在.travis.yml文件中配置的分支改变了才构建

Build pushes:当推送完这个分支后开始构建

到这一步, 我们已经开启了要构建的仓库,但是还有个问题就是,构建完后,我们怎么将生成的文件推送到github上呢,如果不能推送那我们就不需要倒腾一番来使用Travis CI服务了,我们要的结果就是,我们只要想github一push,他就自动构建并push静态文件到gitpages呢,那么下面要解决的就是Travis CI怎么访问github了

在Travis CI配置Github的Access Token

标题已经说得很明白了吧,我们需要在Travis上配置Access Token,这样我们就可以在他构建完后自动push到gitpgaes了,到这里肯定有人要问了,咋你把用户名密码直接写文件里呢,如果你真有这样的问题,那我只能说呵呵~,但我要告诉你的是写里面肯定是可以push成功的

在github上生成Access Token

首先我们来到github的设置界面,点击到Personal access tokens页面,点击右上角的Generate new token按钮会重新生成一个,点击后他会叫你输入密码,然后来到如下界面,给他去一个名字,下面是勾选一些权限

生成完后,你需要拷贝下来,只有这时候他才显示,下载进来为了安全他就不会显示了,如果忘了只能重新生成一个了,拷贝完以后我们需要到Travis CI网站配置下

在Travis CI配置

配置界面还是在项目的setting里面,如下图

至于为什么我们要在这里配置,我想大家肯定应该明白了,写在程序里不安全,配置到这里相当于一个环境变量,我们在构建的时候就可以引用他。

到这里我已经配置了要构建的仓库和要访问的Token,但是问题来了,他知道怎么构建,怎么生成静态文件吗,怎么push的gitpages,又push到那个仓库吗,所以这里我们还需要在源代码的仓库里创建一个.travis.yml配置文件,放到源代码的根目录,如下图

其中内容如下:

language: node_js
node_js: stable

# S: Build Lifecycle
install:
  - npm install

#before_script:
 # - npm install -g gulp

script:
  - hexo g

after_script:
  - cd ./public
  - git init
  - git config user.name "lifengsofts"
  - git config user.email "[email protected]"
  - git add .
  - git commit -m "Update docs"
  - git push --force --quiet "https://${GH_TOKEN}@${GH_REF}" master:master
# E: Build LifeCycle

branches:
  only:
    - blog-source
env:
 global:
   - GH_REF: github.com/lifengsofts/lifengsofts.github.io.git

其中给你需要更换的又git config后面的配置信息

GH_REF的值更改为你的仓库地址

到这一步我们配置已经完成了,现在就是见证奇迹的时候了

Push文章到Github

到这一步,我们可以写一篇文章,添加到你的博客的_posts目录下,如图:

然后commit并push到你的Github上

git push origin blog-source:blog-source

如果不出意外,我们可以就可以在Travis CI网站看到他已经在构建了,如下图:

构建完成后,我们去博客可以看见这个文章了

是不是逼格十足呢

如果我的文章对来带来的帮助,可加我微信,微博,QQ什么啥的交个朋友也是不错的,另外微信,微博都会不定期发一些优质的文章,感谢大家的支持~~,联系方式在我的个人介绍里啦,感谢你的阅读,谢谢~

时间: 2024-08-03 19:31:15

手把手教你使用Travis CI自动部署你的Hexo博客到Github上的相关文章

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

1.Hexo博客的利与弊 Hexo中文 我就默认为看到这篇文章的人都比较了解Hexo博客,也都能够成功手动部署吧.所以第一部分推荐两篇文章一笔带过,让我们快速进入本文的重点内容.实在不知道也不要方先看一看下面推荐的这两篇文章. 手把手教你使用Hexo + Github Pages搭建个人独立博客--令狐葱 Hexo + github 打造个人博客--zdy0_2004 还有一个专栏: Hexo / 总共13篇--水寒 感谢以上文章原创作者的分享,推荐纯属自来水.看完这两篇文章后有没有觉得自己手里

Hexo 博客 之 腾讯云部署过程

写在前面 Hexo 博客搭好了有差不多两周时间了,这期间走了很多弯路,跳了很多坑.一些坑自己 bing 到了答案,找到了解决方法,一些坑则是自己摸索出来的解决方法.现在准备写几篇关于搭建流程.搭建过程中遇到的问题和解决方法.俗话说得好,好记性不如烂键盘嘛. 暂时准备写三篇关于 Hexo 博客搭建的博文: 关于 Hexo 博客 腾讯云部署过程 关于 Hexo 博客 NexT 主题的美化插件设置 点击这里 关于 Hexo 博客 添加域名映射和 https 点击这里 本文介绍 本博客是关于 Hexo

Gitlab CI 自动部署 asp.net core web api 到Docker容器

为什么要写这个? 在一个系统长大的过程中会经历不断重构升级来满足商业的需求,而一个严谨的商业系统需要高效.稳定.可扩展,有时候还不得不考虑成本的问题.我希望能找到比较完整的开源解决方案来解决持续集成.监控报警.以及扩容和高可用性的问题.是学习和探索的过程分享给大家,也欢迎同行的人交流. 先来一个三步曲,我们将完成通过GitLab CI 自动部署 net core web api 到Docker 容器的一个示例.这是第一步,通过此文您将了解如何将net core web api 运行在Docker

码云上部署hexo博客框架

title: 码云上部署hexo博客框架 Hexo框架在码云上实现个人博客 本文受 https://www.jianshu.com/p/84ae2ba1c133 启发编写 本地调试 安装完Node.js https://nodejs.org/en/ 安装git bash工具 https://gitforwindows.org/ 在目录下建立博客文件夹,同时cd进目录 右键 git bash here 输入命令 npm install -g hexo-cli 查看是否安装成功,输入命令 hexo

将hexo博客同时部署发布托管到github和coding

title: 将hexo博客同时部署发布托管到github和coding date: 2018-08-30 00:12:11 tags: - 博客 - git - coding - hexo - 博客优化 categories: 搭建博客 --- 前言 之前我们把hexo托管在github,但是毕竟github是国外的,访问速度上还是有点慢,所以想也部署一套在国内的托管平台,之前查资料听说gitcafe,但是听说gitcafe已经被coding收购了,所以就决定部署到coding. 查询了多方资

将Hexo博客部署到云主机

摘要: 在云主机上搭建一个 git 裸仓库,然后使用 nginx 作为网页服务器,就可以轻松将 Hexo 博客通过 git 部署到云主机上. 这是一个忧伤的故事 我的博客KiwenLau之前部署在Coding Pages上,挺不错的,还可以一键启用 HTTPS.作为一个喜欢折腾的人,我突然打算使用 CDN 加速一下访问速度,然而,国内的 CDN 服务要求网站必须备案.特意邮件问了 Coding 的客服,看来他们近期是不打算支持备案的,于是我就不得不考虑弄个云主机来玩玩了. 后来,Coding P

U盘便携式hexo&博客搭建&极速纯净低bug主题推荐&部署到coding&SEO优化搜索

指南:U盘便携式hexo&博客搭建&极速纯净低bug主题推荐&部署到coding&SEO优化搜索 U盘便携式hexo随处写博客 简述:在任意一台联网的电脑上续写hexo博客,一个U盘+几个网站即可搞定.便携式hexo,其免去Nodejs 和 Git 的安装和配置还包含了配置和懒人脚本.好处就是省事.简单.方便 便携式hexo下载及使用方法,由 HEXO Portable | 比特萌信息技术 免费提供服务.(这里使用的版本是1.0.3) 几个网站: 折腾选用:hexo中文文档

搭建自己的技术博客系列(二)把 Hexo 博客部署到 GitHub 上

1.在GitHub上建一个新仓库 ? 2.配置Git的SSH KEY 生成SSH添加到GitHub 回到你的git bash中, git config --global user.name "yourname" git config --global user.email "youremail" 这里的yourname输入你的GitHub用户名,youremail输入你GitHub的邮箱.这样GitHub才能知道你是不是对应它的账户. 可以用以下两条,检查一下你有没

github travis-ci持续部署hexo博客

引言 目前我的博客源码是在coding上的,因为有很方便的持续部署,但是coding目前还不提供push文件的开放API. 因为最近做了一个一键分发平台,将博客分发到简书.CSDN等等的平台,但是我的博客主站需要用git提交,我想将博客主站也通过一键分发平台提交, 而且github提供push文件的开放API,所以计划将博客源码放到github上,网上发现travis-ci支持私有仓库的持续部署,所以就尝试了一下. 步骤 1.登录travis-ci.com https://travis-ci.c