Github: 在Github Pages部署单页网页应用

[Joldnine]

用Vue开发网页，Webpack打包，部署到Github Pages.

1. 以vue的应用举例：用 vue-cli 初始一个空白webpack项目并打包成静态网页

1. 先安装vue-cli
2. 用webpack template初始化 $ vue init webpack my-github-page
3. 进入新建的folder $ cd my-github-page
4. 安装dependencies $ npm install
5. 修改config/index.js build module下的assetsPublicPath为./
6. 修改build/webpack.prod.conf.js removeAttributeQuotes 为 false
7. $ npm run build 生成静态页面，生成的文件在dist/目录下

2. 建一个Github Page

1. 在自己的github上新建一个repo，取名为 username.github.io， 其中username要和自己github的username相同。
2. 在<username>.github.io repo下，进入Settings, 在GitHub Pages那栏下，Source选择master branch.

3. push 静态页面到repo username.github.io

1. $ git clone { username.github.io的git link }

2. 复制第一步dist/文件夹下所有文件到 username.github.io 文件夹下

3. $ cd username.github.io
   $ git add .
   $ git commit -m "init"
   $ git push

最后，大概2分钟后，在浏览器上打开 https://username.github.io, 就可以看到你的网页了。

自动化脚本

#!/bin/bash 
set -x

BLOG_REPO="joldnine.github.io"
BLOG_DEV="vuejs-blog"

cd $BLOG_DEV
npm run build >/dev/null
cd ..
rm -rf $BLOG_REPO/static
rm -rf $BLOG_REPO/index.html
cp -r $BLOG_DEV/dist/* $BLOG_REPO/
cd $BLOG_REPO
git add .
git commit -a -m "deploy"
git push origin master

[ohkimchi]

小阳棒棒哒！