巧用gh-pages分支发布自己的静态项目

最新推荐文章于 2024-08-28 08:53:56 发布
最新推荐文章于 2024-08-28 08:53:56 发布
阅读量7.7k 收藏 8
点赞数 4
分类专栏： 前端 react git 文章标签： git gh-pages
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nqmysbd/article/details/88764425
版权

大家都知道可以通过github pages 发布自己的静态博客，然后通过 username.github.io 可以访问。例如我的博客可以通过 nqmysb.github.io 访问，不过我的已经绑定域名 https://liaocan.top ，所以会直接跳转到域名显示。
但是我们通常有很多其他的静态项目需要展示，所以今天我总结一下如何利用gh-pages分支来发布自己的静态项目，然后可以通过域名外网访问。

准备一个github项目

首先准备一个github项目，创建git项目，然后将本地项目上传的git项目的master主干上，此处步骤略过。
我的项目是一个react前端项目，基于create-react-app创建的脚手架的一个文库网站首页，目前项目没有完成，只是搭建了一个架子，写了一个首页布局。项目传送门
现在我们来把它发布到gh-pages分支，通过外网访问。

项目打包

1.拷贝项目到本地

git  clone --progress -v
最低0.47元/天 解锁文章
蓝胖子（liaocan.top）
关注
专栏目录
gh-pages:将文件发布到GitHub上的gh-pages分支的常规任务
04-01
gh页 将文件发布到GitHub上的gh-pages分支（或其他任何地方的任何其他分支）。 入门 npm install gh-pages --save-dev 此模块要求Git >=1.9 。 基本用法 var ghpages = require ( 'gh-pages' ) ; ghpages . publish ( 'dist' , function ( err ) { } ) ; publish ghpages . publish ( dir , callback ) ; // or... ghpages . publish ( dir , options , callback ) ; 调用此函数将创建当前存储库的临时克隆，如果尚不存在，则创建一个gh-pages分支，从基本路径复制所有文件，或仅复制与可选src配置中的模式匹配的文件，然后提交所有更改，然后将其推送到orig
创建github仓库的gh-pages分支
weixin_30896763的博客
12-30 465
用git symbolic-ref命令将当前工作分支由master切换到一个尚不存在的分支gh-pages。 $ git symbolic-ref HEAD refs/heads/gh-pages 删除暂存区文件，即相当于清空暂存区。 $ rm .git/index 创建项目首页index.html。 $ printf "hello world.\n" > index.html 添...
github使用gh-pages部署vue静态网站(简单易懂)
qq_52132550的博客
08-02 275
github使用gh-pages部署vue静态网站（简单易懂教程）
如何用github的gh-pages分支展示自己的项目
yan_yuanfeng的博客
03-14 1788
1.先用npm安装 gh-pages npm install gh-pages --save-dev 2.修改package.json文件 3.修改config目录下的index.js build: { index: path.resolve(__dirname, '../dist/index.html'), assetsRoot: path.re...
在本地提交代码到github主分支同时提交到gh-pages分支
不破小子
01-20 2018
在.git==>config 文件中添加以下两句话： push = +refs/heads/master:refs/heads/gh-pages push = +refs/heads/master:refs/heads/master
如何用Github的gh-pages分支展示自己的项
Chen_RuiMin的博客
03-24 608
https://www.cnblogs.com/MuYunyun/p/6082359.html
gh-pages-commit:将文件提交到 gh-pages 分支并让您自行推送
06-04
5. **自动化部署**: 除了手动使用，`gh-pages-commit`还可以集成到持续集成/持续部署（CI/CD）流程中，每当项目代码有变动时，自动将更新发布到`gh-pages`分支，实现自动化部署。 从提供的压缩包文件名`gh-pages-...
actions-publish-gh-pages：使用GitHub Pages发布静态网站的GitHub Action
02-05
branch -远程分支发布源的GitHub网站的页面，默认TP gh-pages 。 repo -GitHub Pages网站的发布源的远程存储库代码，默认为当前repo。 子弹的格式类似于user/repo-name 。 token -授权访问仓库的个人访问令牌。 ...
jekyll-deploy-gh-pages：一个用于构建Jekyll网站（带有自定义插件）并将其部署回gh-pages分支的GitHub操作
02-04
3. **部署到gh-pages分支**：构建完成后，Action会将生成的静态文件推送到仓库的gh-pages分支，从而更新GitHub Pages上的网站。 在使用`jekyll-deploy-gh-pages`之前，你需要确保以下几点： - 你的GitHub仓库包含...
gh-pages-test:github pages测试项目
06-07
本项目“gh-pages-test”是针对GitHub Pages的一项测试，旨在演示如何利用GitHub Pages发布基于Backbone.Marionette和Bootstrap构建的Web应用程序，并确保其能在离线环境下部署到Tomcat、IIS等Web服务器上。...
ghpages:一个CLI工具，可以轻松地将当前的工作分支部署到GitHub Pages
04-29
ghpages 一个命令行工具，可以轻松地将当前的工作分支部署到GitHub Pages。 CLI用法 Usage $ ghpages Options -p, --path Path (directory to push; defaults to current directory) -r, --repo Repository (GitHub username, GitHub username/repo, full repo URL) -d, --domain Domain name (for `CNAME` to create in GitHub Pages branch) -h, --help Show help Examples $ ghpages $ ghpages cvan $ ghpages cvan/blog $ gh
在github上托管网站： gh-pages
Lam's IT Story
08-09 1335
通过gh-pages分支，可以在GitHub上创建一个可以预览的网站，进行网站托管。 以下为步骤总结 在GitHub上新建一个repository目录 在本地相应的文件目录打开命令行窗口或者git bash窗口 初始化git ,创建一个git文件 git init 添加文件到git仓储 git add . 添加备注： git commit -m "first commit" 关联路径： git remote add origi...
推荐一款强大的GitHub页面部署工具：GH-pages-deploy
gitblog_00046的博客
05-31 483
推荐一款强大的GitHub页面部署工具：GH-pages-deploy gh-pages-deploypublish to gh-pages from package.json项目地址:https://gitcode.com/gh_mirrors/gh/gh-pages-deploy 在当今的Web开发世界中，快速而简便地将静态网站部署到GitHub Pages变得越来越重要。这正是【GH-pa...
推荐使用 gh-pages：轻松发布到 GitHub Pages
最新发布
gitblog_00065的博客
08-28 366
推荐使用 gh-pages：轻松发布到 GitHub Pages gh-pagesGeneral purpose task for publishing files to a gh-pages branch on GitHub项目地址:https://gitcode.com/gh_mirrors/gh/gh-pages 项目介绍 gh-pages 是一个强大的 npm 模块，旨在简化将文件发布到...
推荐开源项目：gulp-gh-pages - 简化GitHub Pages部署
gitblog_00098的博客
04-15 745
推荐开源项目：gulp-gh-pages - 简化GitHub Pages部署 项目地址:https://gitcode.com/shinnn/gulp-gh-pages 项目简介 gulp-gh-pages 是一个由 Shin Nishijima 创建的开源插件，它将 Gulp.js 集成到 GitHub Pages 发布流程中，为前端开发者提供了一个简洁而强大的自动化部署工具。借助 Gulp ...
推荐项目：GitCode的GH-Pages模板
gitblog_00084的博客
03-16 442
推荐项目：GitCode的GH-Pages模板 GitCode的GH-Pages模板是一个基于GitHub Pages的开源网页模板，旨在帮助开发者快速搭建个人或项目的网站。 项目简介 GitCode的GH-Pages模板是一个基于Jekyll构建的静态网页模板，可以帮助开发者在GitHub上快速部署个人或项目网站。 模板包含多个主题，支持自定义配置，可以满足不同场景的需求。 应用场景 个人...
将umi项目部署到gitee page
雨洛晴天依旧的博客
12-04 859
将umi项目部署到gitee page 1. 首先保证在yarn start后能正常运行。并且已经关联了远程仓库比如gitee的。 2. 安装 gh-pages yarn install gh-pages --dev 3. 修改umirc.ts import { defineConfig } from 'umi'; export default defineConfig({ nodeModulesTransform: { type: 'none', }, title: '全屏页面测
git push gh-page master error: src refspec master does not match any error: failed to push some refs to 'https://github.com/1023w/2.git'
07-01
这个错误提示表明你在尝试将本地 `master` 分支推送到 GitHub Pages 分支时遇到了问题。`src refspec master does not match any` 表明远程仓库中并没有匹配你本地 `master` 的引用。这可能是因为： 1. 你还没有为 `master` 创建一个 GitHub Pages 配置，通常你需要创建一个名为 `gh-pages` 的分支作为默认的发布分支。 2. 你可能尝试推送的不是 GitHub Pages 所需的分支，比如你可能误用了 `main` 或其他非默认的发布分支。 3. 你的 `master` 分支可能没有包含任何静态页面内容，GitHub Pages 需要的是带有静态内容的分支。 解决步骤如下： 1. 确认你的本地 `master` 是否指向正确的代码分支。如果是，你可以尝试切换到 `gh-pages` 分支，如果不存在，则先创建： ``` git checkout --orphan gh-pages git rm -rf . # 清空目录，因为这是全新的 gh-pages 分支 git commit -m "Initial commit for gh-pages" ``` 2. 将你的 `master` 内容添加到 `gh-pages` 分支： ``` git checkout master git subtree split --prefix=your-static-content --branch gh-pages ``` `your-static-content` 是你的静态页面文件夹名。 3. 推送 `gh-pages` 分支到 GitHub： ``` git push origin gh-pages ``` 4. 检查远程仓库设置，确保 `gh-pages` 已被配置为 GitHub Pages 主页。 如果问题依然存在，请检查是否有权限问题或网络连接，或者检查你的 `.gitignore` 文件，确保没有意外忽略掉需要发布的静态文件。如果你仍然不确定，可以尝试使用 `git remote -v` 查看远程仓库的详细信息。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值