云服务器 99 / 年,新老同享(可以99/年续费),开发者力荐特惠渠道,新客户在享受9折
阿里云推广

如何在github的pages部署hexo实现代码提交到仓库自动部署

  • 内容
  • 评论
  • 相关

1. github创建一个公开的仓库托管代码。

图片1.png

2. 本地下载安装hexo

npm  install  hexo-cli -g

hexo  init  blog_hexo

cd  blog_hexo

npm  install

第一个命令全局安装hexo命令,第二步下载hexo到本地,第三步进入hexo目录,第四部安装依赖,第三步和第四部如果不是本地跑起来非必须。

然后把.travis.yml这个拷贝到根目录。把cname文件拷贝到source目录,.travis.yml这是自动化部署流水线脚本。cnamegithub pages绑定的域名,需要提前做解析cnamewlphp.github.iowlphp是我的仓库地址,githubpages是根据这个cname文件做域名绑定的,cname文件里面就只写一个你cname到  仓库地址.github.io的一个域名,而且自定义的域名支持一键https的也是。为啥came文件要放到source目录呢?因为在流水线部署的时候执行hexo  generate 命令会构建打包后的静态文件放到根目录的public文件夹,放到source里面会自动被打包到public文件夹,部署的时候是部署public文件夹。.travis.yml这个文件内容如下

sudo: false

language: node_js

node_js:

  - 14 # use nodejs v10 LTS

cache: npm

branches:

  only:

    - master # build master branch only

script:

  - hexo  generate # generate static files

deploy:  

  provider: pages

  skip-cleanup: true

  github-token: $GH_TOKEN

  keep-history: true

  on:

    branch: master

  local-dir: public

3. 把本地的代码推送到仓库

Git  init  初始化仓库

Git  remote  add  origin   https://github.com/wlphp/blog_hexo.git

Git  add  .

Git  commit   -m  first commit

Git  push  -u origin master  推送到远程originmaster分支去

4. 配置Travis CI

打开设置  githubapps  https://github.com/wlphp/blog_hexo/settings/installations

图片2.png

设置成允许读取所有仓库代码即可,因为他要拉取你仓库代码,构建成静态文件的。这里就是授权的意思。

图片3.png

然后我们需要在travis ciwlphp/blog_hexo 设置下环境变量,也就是为了能够在构建的时候把 github-token: $GH_TOKEN 替换下。

https://github.com/settings/tokens

在浏览器内新建一个标签页,前往 GitHub 新建 Personal Access Token,只勾选 repo 的权限并生成一个新的 TokenToken 生成后请复制并保存好。

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x

图片4.png

 

回到 Travis CI,前往你的 repository 的设置页面,在 Environment Variables 下新建一个环境变量,Name GH_TOKENValue 为刚才你在 GitHub 生成的 Token。确保 DISPLAY VALUE IN BUILD LOG 保持 不被勾选 避免你的 Token 泄漏。点击 Add 保存。公钥不直接放到.travis.yml里面也是为了防止泄露。

图片5.png

5.重新推送到仓库下

图片6.png

5. 如果没有出现错误就部署成功了

http://hexo.github.wlphp.com/  

图片7.png

https的和http的都可以通过自己的域名访问了。

我们来到仓库的设置 pages看下


图片8.png

这个域名是根据cname文件里面的域名自动绑定的。下面还有一个强制https访问。这样我们就部署成功了。

 

后续在本地hexo添加好新的文章之后,我们只需要把代码推送到github的远程master仓库,就会自动触发Travis CI的流水线,根据他的配置文件.travis.yml自动拉取仓库的master代码,然后构建到根目录的public文件夹,同时cname域名绑定文件也会到public文件夹下面。然后把public下面的编译好的静态文件部署到github  pages

6. 说下github pages的优势

Github pages 上面能够运行纯静态的网站,比如hexo构建之后的产物,比如纯静态的htmlcssjs等。Gitee pages飞付费版不支持自定义域名,只能使用他的域名,虽然他在国内速度快但是,要求使用自己的域名的时候 gitee pages就没办法了。

Github pages 采用了cdn虽然是海外的ip但是国内也能打开。

不需要考虑费用,域名还不用备案。前后端分离的个人测试项目,前端部分可以放上去。

上文用到的名词解释下:

Github是啥?

GitHub 是一个面向开源及私有 软件项目的托管平台,因为只支持 Git 作为唯一的版本库格式进行托管,故名 GitHubGitHub 2008 4 10 日正式上线,除了 Git 代码仓库托管及基本的 Web 管理界面以外,还提供了订阅、讨论组、文本渲染、在线文件编辑器、协作图谱(报表)、代码片段分享(Gist)等功能。目前,其注册用户已经超过350万,托管版本数量也是非常之多,其中不乏知名开源项目 Ruby on RailsjQuerypython 等。GitHub 去年为漏洞支付了 16.6 万美元赏金。 20186月,GitHub被微软以75亿美元的价格收购。

Github pages是啥?

Github Pages github 公司提供的免费的静态网站托管服务,用起来方便而且功能强大,不仅没有空间限制,还可以绑定自己的域名。https://docs.github.com/cn/pages是他的使用文档。https://pages.github.com/ 这是他的官网介绍说明页面。

Hexo是啥?

Hexo是一款基于Node.js的静态博客框架,可以方便的生成静态网页托管在GitHubCoding上,是搭建博客的首选框架。

Travis CI 是啥?

Travis CI 提供的是持续集成服务(Continuous Integration,简称 CI)。它绑定 Github 上面的项目,只要有新的代码,就会自动抓取。然后,提供一个运行环境,执行测试,完成构建,还能部署到服务器。

持续集成指的是只要代码有变更,就自动运行构建和测试,反馈运行结果。确保符合预期以后,再将新代码"集成"到主干。

持续集成的好处在于,每次代码的小幅变更,就能看到运行结果,从而不断累积小的变更,而不是在开发周期结束时,一下子合并一大块代码。

Travis 要求项目的根目录下面,必须有一个.travis.yml文件。这是配置文件,指定了 Travis 的行为。该文件必须保存在 Github 仓库里面,一旦代码仓库有新的 CommitTravis 就会去找这个文件,执行里面的命令。

这个文件采用 YAML 格式。下面是一个最简单的 Python 项目的.travis.yml文件。

language: python

script: true

上面代码中,设置了两个字段。language字段指定了默认运行环境,这里设定使用 Python 环境。script字段指定要运行的脚本,script: true表示不执行任何脚本,状态直接设为成功。

Travis 默认提供的运行环境,请参考官方文档 。目前一共支持31种语言,以后还会不断增加。

下面是一个稍微复杂一点的.travis.yml

language: python

sudo: required

before_install: sudo pip install foo

script: py.test

上面代码中,设置了四个字段:运行环境是 Python,需要sudo权限,在安装依赖之前需要安装foo模块,然后执行脚本py.test

具体参考官方文档:https://docs.travis-ci.com/user/languages/python/

Git是啥?

Git是一款分布式源代码管理工具(版本控制工具)

我们写的代码需要使用Git进行管理。

源代码有必要管理起吗?

有必要,因为人工的去处理不同的版本,做相应备份会很麻烦。

Gitlinux之父当年为了维护linux—linus之前也是手动维护合并把文件发给Linus

linus自己写了一个版本管理的工具(Git)

特点:

Git易于学习, 占用空间小,性能快如闪电。它优于 SubversionCVSPerforce ClearCase SCM 工具,

具有便宜的本地分支、方便的暂存区和 多个工作流等功能。

git分为哪几个区?分别是什么?

工作区(Workspace)是电脑中实际的目录。

暂存区(Index)类似于缓存区域,临时保存你的改动。

仓库区(Repository),分为本地仓库和远程仓库。

通常提交代码分为几步:

①git add从工作区提交到暂存区

②git commit从暂存区提交到本地仓库

③git pushgit svn dcommit从本地仓库提交到远程仓库

git svn的区别?

svn 集中式代码版本控制管理工具

git 分布式代码版本控制管理工具 git 最流行

集中存放在服务器端 传统 url地址: 账号名:密码

svn集中式的 如果出现svn服务器出现故障 每个用户都不能访问服务器 代码无法同步 git就没有这种问题

gitgithub、码云、gitlab的关系

github、码云、gitlab都是在线的代码托管平台

他们都支持git管理代码的方式

github.com: 全球最大免费代码托管平台 码云: 国内免费代码托管平台 gitlab:企业项目开发使用广泛


本文标签:

版权声明:若无特殊注明,本文皆为《菜鸟站长》原创,转载请保留文章出处。

本文链接:如何在github的pages部署hexo实现代码提交到仓库自动部署 - http://www.wlphp.com/?post=360

发表评论

电子邮件地址不会被公开。 必填项已用*标注