GitHub 项目演示页面

即别人可以通过 http://foo.github.com/<项目名> 访问到的项目演示页面。

方法1: gh-pages分支法

步骤

1. 创建一个gh-pages分支
2. gh-pages分支里面必须有个index.html作为入口, 可以用编译好的dist文件夹拷贝出来做这个用
3. github到repo-设置中搜索pages找到配置, 看一下配置对不对
4. 不会立即刷新, 要等一会, 有点耐心

单独将dist文件夹内容发布为page主页

1. remove /dist from gitignore
2. run command:

git subtree push --prefix dist origin gh-pages

3. update settings in repo

方法2: master分支+docs文件夹法(推荐)

1. 源码根目录创建一个 docs 文件夹

2. npm run build, 把编译好的文件copy到docs文件夹

3. git push

4. github -> repo -> settings -> pages 设置为 master分支 + docs文件夹

命令行操作

windows(cmd操作)

# 第一次 
npm run build
mkdir docs
xcopy dist docs

# 后续
npm run build
xcopy dist docs

mac

# 第一次 
npm run build
mkdir docs
cp -R dist/* docs 

# 后续 
npm run build
cp -R dist/* docs

完整的bash脚本

publish.bash

rm -rf docs/  
mkdir docs 
npm run build  
cp -R dist/* docs 
git add . 
git commit -m 'rebuild to publish' 
git push
echo '完成编译和发布'

常见问题

现象:

build好的网站, 如果直接点击index.html, 常常会报文件找不到的错误

但如果用本地http-server启动就可以

原因:

这是因为index.html中引用文件都是绝对路径, 比如 js/foo.js

解决方案:

改成相对路径就好了, js/foo.js -> ./js/foo.js

这时候需要webpack中改 output.publicPath 为 ./ 就行了