本文共 1677 字，大约阅读时间需要 5 分钟。
大家都知道可以通过github pages 发布自己的静态博客，然后通过 username.github.io 可以访问。例如我的博客可以通过 nqmysb.github.io 访问，不过我的已经绑定域名 ，所以会直接跳转到域名显示。
但是我们通常有很多其他的静态项目需要展示，所以今天我总结一下如何利用gh-pages分支来发布自己的静态项目，然后可以通过域名外网访问。
首先准备一个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分支上的东西。
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分支，点击切换分支可以看到刚刚上传的项目文件。此时我们就可以通过 来访问你发布的静态项目了。同样此处我的nqmysb.github.io 绑定了域名，所以访问时会跳转到
1.通过create-reat-app创建的项目打包之后，访问项目index.html页面会空白或者报错，无法访问。这里主要是打包的时候css,js引入的路径问题。
create-reat-app官方给的解答是再package.json种添加homepage属性，如下再private后面添加。
"private": true,"homepage": "."
我这里需要发布到 上面去 ，所以我们这里是：
"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() 转载地址：http://kityo.baihongyu.com/