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

本文已被阅读过 Posted by Liao Can on 2019-03-03

前言

大家都知道可以通过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. 拷贝项目到本地
1
git  clone --progress -v "git@github.com:nqmysb/shared-library-ui.git"
  1. 安装依赖包
1
npm install  或者   yarn install
  1. 打包项目
1
npm run build 或者 yarn run build

打包之后,项目根目录下会出现一个build的文件夹,这个是打包之后的静态文件,也就是我们需要发布到gh-pages分支上的东西。

发布项目到gh-pages 分支

  1. 进入 build 文件夹下
1
cd build
  1. git 初始化
1
git init
  1. 创建 gh-pages 分支
1
git checkout --orphan gh-pages
  1. 添加文件到暂存区
1
git add .
  1. 添加信息
1
git commit -m "init project"
  1. 设置远程仓库地址
1
git remote add origin git@github.com:nqmysb/shared-library-ui.git
  1. 推送项目到 gh-pages 分支
1
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后面添加。

1
2
"private": true,
"homepage": "."

我这里需要发布到https://liaocan.top/shared-library-ui/ 上面去 ,所以我们这里是:

1
2
"private": true,
"homepage" : "https://liaocan.top/shared-library-ui",
  1. react项目打包部署之后刷新页面报404错误
    这里有两种解决方案
    第一种:如果你是通过nginx部署静态项目,可以在nignx配置 try_files 如下:
1
2
3
4
5
location / {            
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri /index.html;
}

第二种将react项目种的路由修改为 HashHistory

1
2
3
4
5
import { createBrowserHistory,createHashHistory } from 'history'

// export const history = createBrowserHistory()

export const history = createHashHistory()

支付宝打赏 微信打赏

赞赏一下