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

本文涉及的产品
.cn 域名,1个 12个月
简介: 如何在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:企业项目开发使用广泛

相关文章
|
3天前
|
人工智能 前端开发 Linux
github是怎么用的,如何下载仓库
github是怎么用的,如何下载仓库
|
2月前
|
开发工具 git Python
代码管理记录(二):Github代码上传实操
本文是关于如何使用Git将本地代码上传到GitHub的实操指南。介绍了Git的基本概念、安装方法,并通过详细的步骤指导用户从GitHub创建仓库到使用Git命令初始化、添加、提交代码,最终将代码推送到远程仓库。同时,还汇总了一些常见的错误及其解决方法。
47 2
代码管理记录(二):Github代码上传实操
|
2月前
|
JSON 缓存 JavaScript
使用 jsDelivr 免费加速 GitHub Pages 博客的静态资源(二)
使用 jsDelivr 加速 GitHub Pages 的图片资源和动态编译的 JSON 资源。
37 2
|
1月前
|
存储 Linux 数据安全/隐私保护
一键部署 200+ 开源Github 2k+ 星星的软件
Websoft9面板是一款基于Web的PaaS/Linux面板,支持在个人服务器上一键部署200多种热门开源应用,适用于个人开发者、中小企业、创业团队、教育机构和技术爱好者。它集成了丰富的开源软件,提供便捷的部署方式、高效的资源利用、良好的可扩展性及低技术门槛,帮助用户快速搭建和管理各类应用。
|
2月前
|
对象存储
一个通过 GitHub Action 将 GitHub 仓库与阿里云 OSS 完全同步的脚本
一种将 GitHub 仓库完全同步到阿里云 OSS 的方法。
|
3月前
|
网络协议 开发工具 git
hexo github部署,通过域名访问你的博客
本文介绍了如何使用Hexo命令部署博客到GitHub,并详细说明了如何通过自定义域名访问GitHub上部署的博客。
hexo github部署,通过域名访问你的博客
|
4月前
|
搜索推荐 前端开发
使用VitePress创建个人网站并部署到GitHub
该网站使用 VitePress 构建,记录了前端开发相关的笔记和教程,涵盖 Vue2 和 Vue3 等内容。网站支持暗黑模式和 Algolia 搜索服务,提供了详细的导航和侧边栏配置。通过自动化脚本进行部署,托管于 GitHub Pages。
使用VitePress创建个人网站并部署到GitHub
|
4月前
|
JavaScript 搜索推荐 资源调度
使用VitePress静态网站生成器创建组件库文档网站并部署到GitHub
本文详细介绍了如何使用 Vue3、TypeScript 和 Vite 开发并发布一个名为 Vue Amazing UI 的组件库至 npm。文章首先引导读者安装配置 VitePress,创建文档网站,并编写组件库文档。接着,通过一系列配置实现网站主题定制、全局样式设置以及 Algolia 搜索功能集成。最后,文章提供了自动化脚本,帮助开发者一键打包部署静态网站至 GitHub,并发布组件库到 npm。通过这些步骤,读者可以轻松搭建并维护一个美观且功能齐全的组件库文档网站。
使用VitePress静态网站生成器创建组件库文档网站并部署到GitHub
|
4月前
|
资源调度 搜索推荐 Shell
使用VitePress静态网站生成器创建组件库文档网站并部署到GitHub
本文介绍了如何使用 Vue3、TypeScript 和 Vite 开发组件库并将其发布到 npm。文章详细描述了安装依赖、配置项目、创建文档网站以及编写组件文档的步骤。通过使用 VitePress,可以轻松搭建组件库的文档站点,并实现 Algolia 搜索功能。此外,还提供了自动化脚本用于部署静态网站至 GitHub 以及发布组件库到 npm。最后,展示了完整的目录结构和网站效果。
131 1
使用VitePress静态网站生成器创建组件库文档网站并部署到GitHub
|
2月前
为什么 GitHub Pages 的文章标题不能以 @ 开头?
本文记录了一个 GitHub Pages 博客网页上文章标题以 `@` 开头导致的问题,并分析了原因,提供了解决方法。
46 0