npm的gh-pages结合github发布repository网站

如果你在使用github而且创建了一个新的仓库，你会发现，在仓库设置里面有结合github pages发布网站的设置，如下所示：

用过github pages都知道它可以做为静态网站来处理比如html和markdown的文件产生预览效果，我之前做过类似的网站，awbeci.xyz。所以当你的仓库设置了github pages那么你就可以在线预览你的仓库网站了，这里有两个注意点需要我们注意的：

1. 如果你创建的仓库名刚好和你的github用户名相同，那么你只能使用主分支来设置你的github pages。
2. 你可以自己创建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一起使用，这个是最关键的。

注意：

1. package.json里面homepages影响项目发布后的js的相对路径，因为它编译的时候会改变js和css路径，比如：如果你添加了homepages，那么你发布的js路径就变成了/your-repository/../../xx.js了，否则就会变成/../../xx.js

2. vue-cli打包后如何发布到github上面直接预览？方法和gh-pages方法一样，

   1. 安装yarn add gh-pages --dev，
   2. 添加 "homepage": "http://zhangwei900808.github.io/contacts",
   3. 修改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上面访问路径有问题，如何解决？