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上面訪問路徑有問題，如何解決？