Github Pages:
Websites for you and your projects.
Hosted directly from your GitHub repository. Just edit, push, and your changes are live.
在我们日常开发过程中,写好的前端界面只能在本机上跑,或者同一个局域网内访问,这样很不方便。这时使用Github Page
就能满足你快速轻便的部署你的前端网页。任何人就能通过你分享的地址访问了。
前往 github
官网, 点击 New repository
创建新项目. 填入项目基本信息, 点击 Create Repository
确认.
creat.png
在setting中找到 Github Pages
选项, 将 Source
改为 master branch/docs folder
, 最后点击 Save
按钮。
Tps:刚创建完是不能选择的,等我们上传了前端build后文件就可以了
首先我们使用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
文件夹。
但是 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