在Github部署静态网页

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

Github-Pages

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

Git 本地工作流

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

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

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

上传到Github

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

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

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

快捷的部署到 gh-pages

这一步，可以手动做：

  • 第一步：运行：npm run build，把md文件转化为html放到gh-pages文件夹
  • 第二步：拷贝gh-pages中的所有文件，到gh-pages分支，然后上传
  • 第三步：以后每次修改完都拷贝到gh-pages分支，很麻烦

所以，我们采用一个 npm 包，来帮助我们完成上面的操作

装包：
npm i gh-pages -D
然后创建配置文件cnode/scripts/deploy-gh-pages.js

将下面代码拷贝进去

'use strict';

var ghpages = require('gh-pages');

main();

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

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

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

results matching ""

    No results matching ""