GitHub Pages 预览 HTML/项目

目录

1、GitHub Pages 预览 HTML

2、GitHub Pages 预览 Vue CLI 项目

---

1、GitHub Pages 预览 HTML

在 GitHub 上提交的代码，如果想在线预览页面，我们可以使用 GitHub 提供的 GitHub Pages 功能，向用户展示开源项目。设置步骤也比较简单，具体如下：

首先登录 GitHub，新建一个 repo 项目，将本地项目（项目根目录下要有 index.html）上传到 GitHub，然后进入 repo 的 [setting] 进行设置，找到 GitHub Pages 选项，开启 GitHub Pages 功能，得到一个预览地址，效果如下图所示，这个地址即可直接预览到项目根目录下的 index.html，其它文件内的页面在链接上加上文件路径即可访问。

得到的地址你可以直接发给别人预览你的项目，也可以用 markdown 语法写到项目的 README.md 文件中，方便他人预览。

2、GitHub Pages 预览 Vue CLI 项目

预览 Vue CLI 创建的项目时，要比直接预览 HTML 稍微复杂一些，毕竟是项目，涉及到很多文件或资源的加载和压缩。

当你完成一个  Vue CLI 创建的项目时，你想将其部署到 GitHub 时，可以通过官方指导，这是官网链接：部署指南。感兴趣的同学可以点击传送门。我在这里大致说一下 Vue 项目的 GitHub 的部署流程：

• 开发完成项目后，需要运行 `npm  run  build` 将项目进行压缩打包，压缩后命令行会显示上述 部署指南 的链接。
• 打包完之后需要验证一下打包的 dist 是否正常，需要启动一个 HTTP 服务器来访问 dist 目录。
• 具体过程，官网的部署指南上有说明：`npm install -g serve`  并 `serve -s dist` 来验证 dist 能否正常工作。
• 在将其推送到 GitHub 之前，你需要在 vue.config.js 文件中配置一下 publicPath...
• 如果打算将项目部署到 https://<USERNAME>.github.io/<REPO>/ 上 (即仓库地址为 https://github.com/<USERNAME>/<REPO>)，可将 publicPath 设为 "/<REPO>/"。举个例子，如果仓库名字为“my-project”，那么 vue.config.js 的内容应如下所示：

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/my-project/'
    : '/'
}

• 在项目目录下，创建内容如下的 deploy.sh 并运行它以进行部署（需要新建一个 deploy 的仓库！）。

#!/usr/bin/env sh

# 当发生错误时中止脚本
set -e

# 构建
npm run build

# cd 到构建输出的目录下 
cd dist

# 部署到自定义域域名
# echo 'www.example.com' > CNAME

git init
git add -A
git commit -m 'deploy'

# 部署到 https://<USERNAME>.github.io
# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master

# 部署到 https://<USERNAME>.github.io/<REPO>
# git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages   # 这里写上你的 deploy 仓库的 git 链接

cd -

• 终端运行 `sh  deploy.sh` 来将 dist 文件上传到你新建的 deploy 远程从仓库，GitHub 会自动打开 GitHub Pages 功能。