Github Page部署你的网页

github page官网

Github Pages:
Websites for you and your projects.
Hosted directly from your GitHub repository. Just edit, push, and your changes are live.

前言

在我们日常开发过程中，写好的前端界面只能在本机上跑，或者同一个局域网内访问，这样很不方便。这时使用Github Page就能满足你快速轻便的部署你的前端网页。任何人就能通过你分享的地址访问了。

一、创建项目

1.1Github创建项目

前往 github 官网, 点击 New repository 创建新项目. 填入项目基本信息, 点击 Create Repository 确认.

creat.png

1.2修改Setting

在setting中找到 Github Pages 选项, 将 Source 改为 master branch/docs folder, 最后点击 Save按钮。
Tps:刚创建完是不能选择的，等我们上传了前端build后文件就可以了

1.3上传前端文件

1.3.1创建前端项目

首先我们使用vue-cli创建一个webpack管理的Vue项目。

vue init webpack github-page-vue-demo

可以看到 config 目录中有三个文件:

config                     //  配置目录
├── dev.env.js             // 用于development模式的环境变量
├── index.js               // 用于配置 `dev` 模式和 `prod` 模式的 webpack config 文件
└── prod.env.js            // 用于product模式的环境变量

这里我们需要配置的就是 index.js 文件, 先看看该文件内容 (这里将不相关的代码用...略过), 其中我们需要关注的是 module.exports 的 build 属性, 我们将在这里配置 webpack build 时生成文件的路径

module.exports = {
  dev: {
      ...
  },

  build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    ...
  }
}

可以看到图中主要配置了 index 文件和 assets 文件的路径. 默认执行 yarn run build 后 webpack 会将项目打包到项目根目录的 ./dist 文件夹。

1.3.2修改编译配置

但是 github pages 默认只能识别项目根目录的 index 文件, 如果我们想要让 github pages 识别到我们 build 出来的文件应该怎么办呢?

你可能会想到直接将 dist 文件夹中 build 生成的文件直接复制到项目的根目录, 这确实是个办法. 但是这样的话, 我们每次 build 完, 都需要手动复制一边文件, 这无疑增加了很多重复性的工作.

我们可以通过修改默认的配置来达到项目 build 的文件直接生成到项目根目录的目的, 像这样:

module.exports = {
  dev: {
      ...
  },

  build: {
    // Template for index.html
    index: path.resolve(__dirname, '../docs/index.html'),  //之前是'../dist/index.html'

    // Paths
    assetsRoot: path.resolve(__dirname, '../docs'),  // 之前是 '../dist'
    assetsSubDirectory: 'static',
    assetsPublicPath: './',    // 之前是 '/'
    ...
  }
}

完成以上的修改后, 我们再次运行 yarn run build, 你会发现根目录下多了一个 docs 文件夹, 里面承载了 index 文件和 static 文件夹. 我们讲 docs 目录以及其下的文件全部加入 git 版本管理, 并 push 到 github.

再次来到该项目的 github page setting页面, 这时master branch /docs folder 就变成可选中的了. 我们选中这个选项, 并保存设置.

过两分钟左右, 我们再次访问我们项目的 github page url,比如我这里的地址就是：https://joealzhou.github.io/githubpages-demo/ 就会发现项目已经部署成功了，任何人都可以通过此链接地址访问你的项目了。

done.png

参考来源

Github Page部署你的网页