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

简介: 如何在github的pages部署hexo实现代码提交到仓库自动部署
  1. 在 github 创建一个公开的仓库托管代码。


网络异常,图片无法展示
|


  1. 本地下载安装 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


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


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 分支去


  1. 配置 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.重新推送到仓库下


网络异常,图片无法展示
|


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


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


网络异常,图片无法展示
|


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


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


网络异常,图片无法展示
|


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


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


  1. 说下 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:企业项目开发使用广泛

相关实践学习
基于函数计算快速搭建Hexo博客系统
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个Hexo博客。
相关文章
|
4天前
|
机器学习/深度学习 算法 程序员
GitHub:代码世界的来世今生
GitHub:代码世界的来世今生
15 1
|
4天前
|
Shell 网络安全 开发工具
Github Pages + Jekyll 独立博客一小时快速搭建&上线指南
Github Pages + Jekyll 独立博客一小时快速搭建&上线指南
84 1
|
4天前
|
人工智能 运维 Linux
一文了解IntelliJ IDEA如何使用git上传代码到GitHub(附常见问题解决方案)
一文了解IntelliJ IDEA如何使用git上传代码到GitHub(附常见问题解决方案)
116 0
|
2天前
|
JavaScript 网络安全 开发工具
[保姆级-从0到1]利用hexo+github托管实现搭建个人博客
[保姆级-从0到1]利用hexo+github托管实现搭建个人博客
|
4天前
|
安全 网络安全 开发工具
【GitHub】清空 GitHub 仓库中的所有内容,只保留 `README.md` 文件
【GitHub】清空 GitHub 仓库中的所有内容,只保留 `README.md` 文件
8 2
|
4天前
github设置仓库可见性 私人仓库设置
github设置仓库可见性 私人仓库设置
|
4天前
|
弹性计算 运维 Shell
自动化GitHub仓库活跃度分析
【4月更文挑战第30天】
7 0
|
4天前
|
Linux 网络安全 开发工具
【超详细!超多图!】【代码管理】Python微信公众号开发(3)- 服务器代码上传Github
【超详细!超多图!】【代码管理】Python微信公众号开发(3)- 服务器代码上传Github
33 0
|
4天前
|
存储 安全 Serverless
用 Github Actions 自动部署阿里云函数计算 FC
介绍了如何配置阿里云函数计算(FC)与GitHub Actions集成以实现自动部署。首先在阿里云创建函数,然后在项目根目录创建`s.yaml`文件配置Serverless Devs。接着在GitHub仓库中设置 Secrets 存储阿里云账号信息,并创建名为`aliyun-fc-deploy.yaml`的工作流文件来定义GitHub Actions。当代码推送到`master`分支时,Actions会自动部署到函数计算。最后,成功配置后,提交代码会触发自动部署,并可在GitHub Actions和阿里云控制台查看部署状态。
443 3
|
4天前
|
开发工具 git
对于github不同的分支main或者master,git拉取代码的时候怎么拉取不同分支的代码
对于github不同的分支main或者master,git拉取代码的时候怎么拉取不同分支的代码
24 1