如何在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:企业项目开发使用广泛

相关文章
|
8月前
|
开发工具 git C++
【够用就好002】外行第一次发布github项目仓库
#deepseek#自学 记录外行学习代码的历程 今天是上传自己的工具代码到github仓库,一直以来是伸手党克隆别人的项目,今天在deepseek的辅导下上传自己的内容。
|
2月前
|
人工智能 自然语言处理 安全
Milvus x n8n :自动化拆解Github文档,零代码构建领域知识智能问答
本文介绍了在构建特定技术领域问答机器人时面临的四大挑战:知识滞后性、信息幻觉、领域术语理解不足和知识库维护成本高。通过结合Milvus向量数据库和n8n低代码平台,提出了一种高效的解决方案。该方案利用Milvus的高性能向量检索和n8n的工作流编排能力,构建了一个可自动更新、精准回答技术问题的智能问答系统,并介绍了部署过程中的可观测性和安全性实现方法。
|
2月前
|
存储 人工智能 自然语言处理
让你拥有一个AI大脑,这个32.1k Github项目是你不错的选择,支持PDF、Markdown、代码、视频成为你的知识内容
Quivr 是开源全栈 RAG 平台,助你打造“第二大脑”,支持多文档类型与多种 LLM,实现智能搜索与聊天。具备语义检索、本地部署、隐私保护等功能,适用于个人知识管理与企业知识库,界面简洁易用,是高效智能问答的理想选择。
146 0
|
5月前
|
JSON JavaScript API
MCP 实战:用配置与真实代码玩转 GitHub 集成
MCP 实战:用配置与真实代码玩转 GitHub 集成
1288 4
|
4月前
|
Linux 网络安全 开发工具
在Linux下配置gitee与Github的远程仓库
注意,git push后,是输入你的账号与密码。这个步骤可以通过特殊设置省去,但是一开始还是不要太省。
244 0
|
9月前
|
开发工具 git
如何操作github,gitee,gitcode三个git平台建立镜像仓库机制,这样便于维护项目只需要维护一个平台仓库地址的即可-优雅草央千澈
如何操作github,gitee,gitcode三个git平台建立镜像仓库机制,这样便于维护项目只需要维护一个平台仓库地址的即可-优雅草央千澈
494 69
如何操作github,gitee,gitcode三个git平台建立镜像仓库机制,这样便于维护项目只需要维护一个平台仓库地址的即可-优雅草央千澈
|
6月前
|
文字识别 网络协议 开发工具
GitHub封锁?推荐5个国产的Git仓库替代平台
近日,GitHub对中国区IP的部分限制引发了广泛关注。未登录用户被拒,已登录用户功能受限,南北网络环境差异更显“内卷”。为应对这一挑战,本文推荐了多个国产Git平台:Gitee(码云)、GitCode(CSDN旗下)、CODING(腾讯系)、CodeUP(阿里云支持)及微信代码管理工具。这些平台功能全面、稳定性强,是开发者迁移项目的理想选择。通过同步代码、配置CI/CD流水线等简单步骤,可确保项目平稳过渡。此次事件提醒我们,掌握核心技能与支持国产平台同样重要!
3786 11
|
7月前
|
人工智能 网络安全 开发工具
vscode代码推送到github库菜鸡专用教程
vscode代码推送到github库菜鸡专用教程
|
7月前
|
开发工具 git
vscode推送项目到github仓库故障解决1
本文介绍了如何优雅解决本地仓库与远程仓库历史记录不一致的问题,并提供避免未来问题的最佳实践。核心在于理解问题根源(如历史记录差异和常见原因),采用推荐的解决方案(先本地初始化再关联远程仓库),并遵循一致的工作流程、团队协作规范及熟悉 Git 命令。通过强制推送或合并无关历史记录等方式处理现有冲突,同时养成良好习惯以预防类似问题。
|
9月前
|
Devops Shell 网络安全
git使用之如何将一套代码同时推送至github|gitee|gitcode|gitlab等多个仓库-含添加ssh-优雅草央千澈完美解决-提供整体提交代码
git使用之如何将一套代码同时推送至github|gitee|gitcode|gitlab等多个仓库-含添加ssh-优雅草央千澈完美解决-提供整体提交代码
379 16
git使用之如何将一套代码同时推送至github|gitee|gitcode|gitlab等多个仓库-含添加ssh-优雅草央千澈完美解决-提供整体提交代码

热门文章

最新文章