巧用gh-pages分支发布自己的静态项目
大家都知道可以通过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 "git@github.com:nqmysb/shared-library-ui.git"
2.安装依赖包
npm install 或者 yarn install
3.打包项目
npm run build 或者 yarn run build
打包之后,项目根目录下会出现一个build的文件夹,这个是打包之后的静态文件,也就是我们需要发布到gh-pages分支上的东西。
发布项目到gh-pages 分支
1.进入build文件夹下
cd build
2.git初始化
git init
3.创建gh-pages分支
git checkout --orphan gh-pages
4.添加文件到暂存区
git add .
5.添加信息
git commit -m "init project"
6.设置远程仓库地址
git remote add origin git@github.com:nqmysb/shared-library-ui.git
7.推送项目到 gh-pages分支
git push origin gh-pages
此时你的github该项目会多一个gh-pages分支,点击切换分支可以看到刚刚上传的项目文件。此时我们就可以通过 http://nqmysb.github.io/shared-library-ui 来访问你发布的静态项目了。同样此处我的nqmysb.github.io 绑定了域名,所以访问时会跳转到 https://liaocan.top/shared-library-ui/
两个问题
1.通过create-reat-app创建的项目打包之后,访问项目index.html页面会空白或者报错,无法访问。这里主要是打包的时候css,js引入的路径问题。
create-reat-app官方给的解答是再package.json种添加homepage属性,如下再private后面添加。
"private": true,
"homepage": "."
我这里需要发布到https://liaocan.top/shared-library-ui/ 上面去 ,所以我们这里是:
"private": true,"homepage" : "https://liaocan.top/shared-library-ui",
2.react项目打包部署之后刷新页面报404错误
这里有两种解决方案
第一种:如果你是通过nginx部署静态项目,可以在nignx配置 try_files 如下:
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri /index.html;
}
第二种将react项目种的路由修改为 HashHistory
import { createBrowserHistory,createHashHistory } from 'history'// export const history = createBrowserHistory()export const history = createHashHistory()
巧用gh-pages分支发布自己的静态项目相关推荐
- github pages_在GitHub Pages上发布组织主页
github pages by Daniel Deutsch 由Daniel Deutsch 在GitHub Pages上发布组织主页 (Publishing an organization home ...
- Jenkins+Gitlab+Nginx实现自动发布与回退基于tag版本的静态项目(解决重复构建问题)
环境拓扑: Jenkins -192.168.1.30 Gitlab -192.168.1.31 LB -192.168.1.32 Nginx1 -192.168.1.33 Nginx2 - ...
- 码云上传代码添加标签_[Android] 发布码云(Gitee)项目到JitPack(最全完整流程)
最近把github上的代码都转移到了码云上,而且github上的仓库可以很方便的迁移到码云,所以老代码的迁移问题不用考虑. 之前使用 JCenter 发布了一个 GitHub 开源项目,JCenter ...
- 请在贵网站的根目录下部署一个文件_使用 github pages, 快速部署你的静态网页
使用 github pages, 快速部署你的静态网页 Github Pages 官网 Github Pages: Websites for you and your projects. Hosted ...
- Matrixport发布跨链资产项目M-Tokens
据官方消息,新加坡金融服务平台 Matrixport 发布跨链资产项目 M-Tokens,现已发布锚定比特币的 MBTC.根据官网描述,M-Tokens 是锚定比特币等加密资产的 ERC20 代币.所 ...
- 分享:DFC 1.1.0 发布,C/C++项目开发框架
分享:DFC 1.1.0 发布,C/C++项目开发框架 DFC 1.1.0 发布,C/C++项目开发框架 http://www.oschina.net/news/37997/dfc-1-1-0 pos ...
- 升级jenkins 导致jenkins启动失败_升级Jenkins:发布和代理 VUE 项目
(海上生明月,_ _ _ _ _) 书接上回,在之前的几篇文章中,我们主要通过几篇文章来讲解了如何通过一个镜像,快速的创建Jenkins容器实例,然后搭建我们的持续集成和持续部署的平台,相关的文章呢如 ...
- 使用 github pages, 快速部署你的静态网页
使用 github pages, 快速部署你的静态网页 Github Pages 官网 Github Pages: Websites for you and your projects. Hosted ...
- 今天,谷歌发布了一个里程碑项目Cloud AutoML 这是个什么东西
图:2017年3月9日在旧金山举行的Google Cloud Next大会 文章来源:ATYUN AI平台 谷歌在今天宣布了一项新的云服务Cloud AutoML,该服务旨在让企业更方便地创建定制的机 ...
最新文章
- php多级遍历,php jquery实现无限级目录遍历展示代码
- 开源免费的C/C++网络库(c/c++ sockets library)
- uinty中对Xml文件的操作
- (1)hibenrate入门例子
- button设置disabled属性不生效_jQuery属性节点
- ftp linux 服务器 麒麟_麒麟系统安装ftp
- 【学术研究】保持高效论文写作的10个原则!
- 经常用到的一个分页存储过程
- 硬件工程师成长之路(4)——元件焊接
- JAVA中的getBytes方法
- bugku never_give_up file_get_contents()有php://input漏洞 eregi \x00绕过
- Vue1.0.25源码分析,及Zue模拟实现(一)
- (已解决)win环境下 maven 报错:致命错误: 在类路径或引导类路径中找不到程序包 java.lang
- 复合材料在计算机硬件中的应用,碳纤维复合材料在笔记本电脑后盖中的应用研究...
- 跨境茶话会8月期丨性能优化的艺术
- 文本文件操作 单词排序
- Windows强行关闭任务管理器无法结束的程序
- List.isEmpty()与CollectionUtils.isEmpty的区别
- Vue3实现打字机效果
- 推荐2个国外免费网盘