在Github部署静态网页

如果你的项目只是一个静态网站，就没有必要再去整什么服务器，github pages 提供了搭建静态网站的功能；

Github-Pages

github Pages可以被认为是用户编写的、托管在github上的静态网页。也就是项目的gh-pages分支。

Git 本地工作流

首先给主分支做版本
  1. git commit -a -m 'branch'

注意：在进行分支操作前，首先做下版本，否则会出错

查看当前分支
  1. git branch -a
创建gh-pages分支
  1. git branch gh-pages
切换到gh-pages分支
  1. git checkout gh-pages
修改配置文件.gitignore
  1. vi .gitignore
添加需要忽略的文件（不需要上传的文件）
  1. webpack.prod.config.js
  2. webpack.dev.config.js
  3. postcss.config.js
  4. /node_modules
  5. package.json
  6. /README.md
  7. /templete
  8. .babelrc
  9. /scripts
  10. /src

上传到Github

首先将需要部署到gh-pages分支的网页放在主项目文件夹里

因为只能部署静态网页，所以如果用框架需要打包成静态网页

添加需要上传到gh-pages分支上的文件
  1. git add .
然后做版本，最后上传到分支
  1. git commit -m '首次上传'
  2. git push -u origin gh-pages

快捷的部署到 gh-pages

这一步，可以手动做：

  • 第一步：运行：npm run build，把md文件转化为html放到gh-pages文件夹
  • 第二步：拷贝gh-pages中的所有文件，到gh-pages分支，然后上传
  • 第三步：以后每次修改完都拷贝到gh-pages分支，很麻烦所以，我们采用一个 npm 包，来帮助我们完成上面的操作
装包：
  1. npm i gh-pages -D
然后创建配置文件cnode/scripts/deploy-gh-pages.js

将下面代码拷贝进去

  1. 'use strict';
  3. var ghpages = require('gh-pages');
  5. main();
  7. function main() {
  8.         ghpages.publish('./dist', console.error.bind(console));
  9.         //打包文件
  10. }
调整package.json的scripts命令
  1. "scripts": {
  2.  "start": "./node_modules/.bin/webpack-dev-server --config webpack.dev.config.js",
  3.  //启动本地服务器
  4.  "build": "./node_modules/.bin/webpack --config webpack.prod.config.js",
  5.  //打包成静态网页
  6.  "deploy": "node ./scripts/deploy-gh-pages.js",
  7.  //上传到gh-pages分支
  8.  "publish": "npm run build && npm run deploy",
  9.  //优化操作
  10.  "port": "lsof -i :35729"
  11.  //端口占用提示
  12. },
本地启动查看网页

这样，每次有了修改，运行

  1. npm run publish
网页会部署到
  1. http://l552177239.github.io/[仓库名]