在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';
  2. var ghpages = require('gh-pages');
  3. main();
  4. function main() {
  5. ghpages.publish('./dist', console.error.bind(console));
  6. //打包文件
  7. }
调整package.jsonscripts命令
  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/[仓库名]