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

相关文章
|
21天前
|
安全
Deploy Github Pages With GPG Signing
This article is also posted on my blog, feel free refer to it for the latest revisions: [Deploy Github Pages With GPG Signing](https://blog.timerring.com/posts/deploy-github-pages-with-gpg-signing)
110 70
|
1月前
|
开发工具 git
如何操作github,gitee,gitcode三个git平台建立镜像仓库机制,这样便于维护项目只需要维护一个平台仓库地址的即可-优雅草央千澈
如何操作github,gitee,gitcode三个git平台建立镜像仓库机制,这样便于维护项目只需要维护一个平台仓库地址的即可-优雅草央千澈
186 69
如何操作github,gitee,gitcode三个git平台建立镜像仓库机制,这样便于维护项目只需要维护一个平台仓库地址的即可-优雅草央千澈
|
1月前
|
Devops Shell 网络安全
git使用之如何将一套代码同时推送至github|gitee|gitcode|gitlab等多个仓库-含添加ssh-优雅草央千澈完美解决-提供整体提交代码
git使用之如何将一套代码同时推送至github|gitee|gitcode|gitlab等多个仓库-含添加ssh-优雅草央千澈完美解决-提供整体提交代码
85 16
git使用之如何将一套代码同时推送至github|gitee|gitcode|gitlab等多个仓库-含添加ssh-优雅草央千澈完美解决-提供整体提交代码
|
2月前
|
机器学习/深度学习 人工智能 自然语言处理
PeterCat:一键创建开源项目 AI 问答机器人,自动抓取 GitHub 仓库信息、文档和 issue 等构建知识库
PeterCat 是一款开源的智能答疑机器人,能够自动抓取 GitHub 上的文档和 issue 构建知识库,提供对话式答疑服务,帮助开发者和社区维护者高效解决技术问题。
188 7
PeterCat:一键创建开源项目 AI 问答机器人,自动抓取 GitHub 仓库信息、文档和 issue 等构建知识库
|
2月前
|
人工智能 前端开发 Linux
github是怎么用的,如何下载仓库
github是怎么用的,如何下载仓库
|
4月前
|
开发工具 git Python
代码管理记录(二):Github代码上传实操
本文是关于如何使用Git将本地代码上传到GitHub的实操指南。介绍了Git的基本概念、安装方法,并通过详细的步骤指导用户从GitHub创建仓库到使用Git命令初始化、添加、提交代码,最终将代码推送到远程仓库。同时,还汇总了一些常见的错误及其解决方法。
124 2
代码管理记录(二):Github代码上传实操
|
4月前
|
JSON 缓存 JavaScript
使用 jsDelivr 免费加速 GitHub Pages 博客的静态资源(二)
使用 jsDelivr 加速 GitHub Pages 的图片资源和动态编译的 JSON 资源。
79 2
|
4月前
|
对象存储
一个通过 GitHub Action 将 GitHub 仓库与阿里云 OSS 完全同步的脚本
一种将 GitHub 仓库完全同步到阿里云 OSS 的方法。
|
3月前
|
存储 Linux 数据安全/隐私保护
一键部署 200+ 开源Github 2k+ 星星的软件
Websoft9面板是一款基于Web的PaaS/Linux面板,支持在个人服务器上一键部署200多种热门开源应用,适用于个人开发者、中小企业、创业团队、教育机构和技术爱好者。它集成了丰富的开源软件,提供便捷的部署方式、高效的资源利用、良好的可扩展性及低技术门槛,帮助用户快速搭建和管理各类应用。
|
4月前
|
编解码 Oracle Java
java9到java17的新特性学习--github新项目
本文宣布了一个名为"JavaLearnNote"的新GitHub项目,该项目旨在帮助Java开发者深入理解和掌握从Java 9到Java 17的每个版本的关键新特性,并通过实战演示、社区支持和持续更新来促进学习。
133 3

热门文章

最新文章