如果你在使用github而且创建了一个新的仓库，你会发现，在仓库设置里面有结合github pages发布网站的设置，如下所示：
用过github pages都知道它可以做为静态网站来处理比如html和markdown的文件产生预览效果，我之前做过类似的网站，awbeci.xyz。所以当你的仓库设置了github pages那么你就可以在线预览你的仓库网站了，这里有两个注意点需要我们注意的：
- 如果你创建的仓库名刚好和你的github用户名相同，那么你只能使用主分支来设置你的github pages。
- 你可以自己创建gh-pages分支，但是我在这里不推荐你们这么做，因为伟大的npm已经有gh-pages包，包含了很好的命令来操作并发布，所以你不需要担心分支管理的情况和网站发布的烦琐操作了。
下面我们就来实验一下如何通过npm的gh-pages包来安装并发布到github上面的操作。
首先，我们创建一个新的仓库，我在这里使用的是基于create-react-app来创建的，创建好之后，编译一下，会发现以下提示：
根据提示，我们到package.json里面设置下homepage，设置好之后，我们再编译一下，如下所示：
提示已经非常清楚了，我们来安装下gh-pages包，通过命令yarn add来安装，安装好之后，我们再在package.json里面的scripts对象中添加现行代码：
"predeploy":"npm run build",
"deploy":"gh-pages -d build"添加好之后执行上面两个命令，这样就坐等执行完成，然后再到你的仓库里面的设置看看，是不是发现gh-pages已经发布成功并设置成了github pages，是不是非常方便，好了，就讲到这里，其实也没什么难的关键是我们如何净npm的gh-pages包结合github一起使用，这个是最关键的。
注意：
- package.json里面homepages影响项目发布后的js的相对路径，因为它编译的时候会改变js和css路径，比如：如果你添加了homepages，那么你发布的js路径就变成了/your-repository/../../xx.js了，否则就会变成/../../xx.js
vue-cli打包后如何发布到github上面直接预览？方法和gh-pages方法一样，
- 安装yarn add gh-pages --dev，
- 添加 "homepage": "http://zhangwei900808.github.io/contacts",
- 修改package.json中的script代码： "predeploy": "npm run build","deploy": "gh-pages -d dist"
4.修改config文件夹中配置文件index.js中build对象的assetsPublicPath字段改为''
5.如果你使用的是vue-cli3 创建项目，那么你要在根目录创建vue.config.js文件，并添加如下代码,才能正常访问。
module.exports = {baseUrl: 'your-project-name'
}6.不管是react还是vue项目路由都必须使用hash方式，否则页面打不开，切记！！！
如果你是react,并且使用了react-router那么你的路由必须使用HashRouter
import React from "react";
import { Switch } from "react-router";
import { BrowserRouter as Router, HashRouter } from "react-router-dom";
import { Provider } from "react-redux";
import { renderRoutes } from "react-router-config";
import { ConnectedRouter } from "connected-react-router";
import { PersistGate } from "redux-persist/es/integration/react";import configureStore, { history } from "./redux/store";
import routes from "./router";const { persistor, store } = configureStore(/* provide initial state if any */);const App = () => (<Provider store={store}><PersistGate loading={<div />} persistor={persistor}><ConnectedRouter history={history}><>{/* your usual react-router v4 routing */}<HashRouter><Switch>{renderRoutes(routes)}</Switch></HashRouter></></ConnectedRouter></PersistGate></Provider>
);export default App;参考vue-cli新建的项目使用gh-pages发布到github上面访问路径有问题，如何解决？
