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

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

clipboard.png

用过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上面访问路径有问题,如何解决?
阅读 4k

推荐阅读