如何在github的pages部署hexo实现代码提交到仓库自动部署
1. 在github创建一个公开的仓库托管代码。
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这是自动化部署流水线脚本。cname是github pages绑定的域名,需要提前做解析cname到wlphp.github.io,wlphp是我的仓库地址,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 推送到远程origin的master分支去
4. 配置Travis CI
打开设置 githubapps https://github.com/wlphp/blog_hexo/settings/installations
设置成允许读取所有仓库代码即可,因为他要拉取你仓库代码,构建成静态文件的。这里就是授权的意思。
然后我们需要在travis ci的wlphp/blog_hexo 设置下环境变量,也就是为了能够在构建的时候把 github-token: $GH_TOKEN 替换下。
https://github.com/settings/tokens
在浏览器内新建一个标签页,前往 GitHub 新建 Personal Access Token,只勾选 repo 的权限并生成一个新的 Token。Token 生成后请复制并保存好。
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x
回到 Travis CI,前往你的 repository 的设置页面,在 Environment Variables 下新建一个环境变量,Name 为 GH_TOKEN,Value 为刚才你在 GitHub 生成的 Token。确保 DISPLAY VALUE IN BUILD LOG 保持 不被勾选 避免你的 Token 泄漏。点击 Add 保存。公钥不直接放到.travis.yml里面也是为了防止泄露。
5.重新推送到仓库下
5. 如果没有出现错误就部署成功了
https的和http的都可以通过自己的域名访问了。
我们来到仓库的设置 pages看下
这个域名是根据cname文件里面的域名自动绑定的。下面还有一个强制https访问。这样我们就部署成功了。
后续在本地hexo添加好新的文章之后,我们只需要把代码推送到github的远程master仓库,就会自动触发Travis CI的流水线,根据他的配置文件.travis.yml自动拉取仓库的master代码,然后构建到根目录的public文件夹,同时cname域名绑定文件也会到public文件夹下面。然后把public下面的编译好的静态文件部署到github pages。
6. 说下github pages的优势
Github pages 上面能够运行纯静态的网站,比如hexo构建之后的产物,比如纯静态的html,css,js等。Gitee pages飞付费版不支持自定义域名,只能使用他的域名,虽然他在国内速度快但是,要求使用自己的域名的时候 gitee pages就没办法了。
Github pages 采用了cdn虽然是海外的ip但是国内也能打开。
不需要考虑费用,域名还不用备案。前后端分离的个人测试项目,前端部分可以放上去。
上文用到的名词解释下:
Github是啥?
GitHub 是一个面向开源及私有 软件项目的托管平台,因为只支持 Git 作为唯一的版本库格式进行托管,故名 GitHub。 GitHub 于 2008 年 4 月 10 日正式上线,除了 Git 代码仓库托管及基本的 Web 管理界面以外,还提供了订阅、讨论组、文本渲染、在线文件编辑器、协作图谱(报表)、代码片段分享(Gist)等功能。目前,其注册用户已经超过350万,托管版本数量也是非常之多,其中不乏知名开源项目 Ruby on Rails、jQuery、python 等。GitHub 去年为漏洞支付了 16.6 万美元赏金。 2018年6月,GitHub被微软以75亿美元的价格收购。
Github pages是啥?
Github Pages 是 github 公司提供的免费的静态网站托管服务,用起来方便而且功能强大,不仅没有空间限制,还可以绑定自己的域名。https://docs.github.com/cn/pages是他的使用文档。https://pages.github.com/ 这是他的官网介绍说明页面。
Hexo是啥?
Hexo是一款基于Node.js的静态博客框架,可以方便的生成静态网页托管在GitHub和Coding上,是搭建博客的首选框架。
Travis CI 是啥?
Travis CI 提供的是持续集成服务(Continuous Integration,简称 CI)。它绑定 Github 上面的项目,只要有新的代码,就会自动抓取。然后,提供一个运行环境,执行测试,完成构建,还能部署到服务器。
持续集成指的是只要代码有变更,就自动运行构建和测试,反馈运行结果。确保符合预期以后,再将新代码"集成"到主干。
持续集成的好处在于,每次代码的小幅变更,就能看到运行结果,从而不断累积小的变更,而不是在开发周期结束时,一下子合并一大块代码。
Travis 要求项目的根目录下面,必须有一个.travis.yml文件。这是配置文件,指定了 Travis 的行为。该文件必须保存在 Github 仓库里面,一旦代码仓库有新的 Commit,Travis 就会去找这个文件,执行里面的命令。
这个文件采用 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进行管理。
源代码有必要管理起吗?
有必要,因为人工的去处理不同的版本,做相应备份会很麻烦。
Git是linux之父当年为了维护linux—linus之前也是手动维护合并把文件发给Linus
linus自己写了一个版本管理的工具(Git)
特点:
Git易于学习, 占用空间小,性能快如闪电。它优于 Subversion、CVS、Perforce 和 ClearCase 等 SCM 工具,
具有便宜的本地分支、方便的暂存区和 多个工作流等功能。
git分为哪几个区?分别是什么?
①工作区(Workspace)是电脑中实际的目录。
②暂存区(Index)类似于缓存区域,临时保存你的改动。
③仓库区(Repository),分为本地仓库和远程仓库。
通常提交代码分为几步:
①git add从工作区提交到暂存区
②git commit从暂存区提交到本地仓库
③git push或git svn dcommit从本地仓库提交到远程仓库
git 与 svn的区别?
svn 集中式代码版本控制管理工具
git 分布式代码版本控制管理工具 git 最流行
集中存放在服务器端 传统 url地址: 账号名:密码
svn集中式的 如果出现svn服务器出现故障 每个用户都不能访问服务器 代码无法同步 git就没有这种问题
git与github、码云、gitlab的关系
github、码云、gitlab都是在线的代码托管平台
他们都支持git管理代码的方式
github.com: 全球最大免费代码托管平台 码云: 国内免费代码托管平台 gitlab:企业项目开发使用广泛
版权声明:若无特殊注明,本文皆为《菜鸟站长》原创,转载请保留文章出处。
本文链接:如何在github的pages部署hexo实现代码提交到仓库自动部署 - http://www.wlphp.com/?post=360