一、创建github仓库，将项目导入到本地

1.创建仓库

创建仓库时有两种方式

username.github.io

具体仓库名

两种创建方式都可以，但是在部署时略有不同

2.创建gh-pages分支

gh-pages用于存储项目编译后的代码

二、创建vuepress项目

vuepress文档地址：www.vuepress.cn/guide/getti…

1.创建项目

进入本地项目中，按照以下操作初始化项目（跳过第一步）

成功启动本地服务后，将会出现以下界面

注意：如果要开启热重载，package.json中的dev配置要改成以下命令

"docs:dev":"vuepress dev docs --temp .temp"

2.基本配置

3.默认主题

---
home:true
heroImage: /hero.png 
heroText: Hero 标题 
tagline: Hero 副标题 
actionText: 快速上手 → 
actionLink: /zh/guide/ 
features:
-title: 简洁至上   
 details: 以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。
-title: Vue驱动   
 details: 享受 Vue + webpack 的开发体验，在 Markdown 中使用 Vue 组件，同时可以使用 Vue 来开发自定义主题。 
-title: 高性能   
 details: VuePress 为每个页面预渲染生成静态的 HTML，同时在页面被加载的时候，将作为 SPA 运行。 
footer: MIT Licensed | Copyright © 2018-present Evan You 
---

修改根级 README.md 文件后需要刷新页面或者重启项目热重载不起作用

4、配置.gitignore文件

在项目根目录创建.gitignore文件，添加以下配置

.temp/
node_modules/
docs/.vuepress/dist

三、部署

1.配置base

首先在github上创建仓库，如果建立的仓库名称是username.github.io，则最后访问的地址username.github.io/。如果不是这个名称，则最后访问的地址是username.github.io/repo/ ,repo就是仓库名字，此时还需要先修改.vuepress/config.js，该文件导出一个对象，增加base的配置项，值为“/repo/”。

例如：

此时不用修改任何配置

如果是具体文件名，则要修改.vuepress/config.js

2.配置自动部署文件

在项目根目录下创建 .github/workflow/[文件名].yml ，文件名可以是任意，以下为build

在build.yml添加以下配置

on: # 触发条件
# 每当 push 到 main 分支时触发部署
push:
branches:
      - main

jobs:
docs:
runs-on: ubuntu-latest # 指定运行所需要的虚拟机环境（必填）

steps:
      - uses: actions/checkout@v2
with:
# “最近更新时间” 等 git 日志相关信息，需要拉取全部提交记录
fetch-depth: 0

      - name: Setup Node.js
uses: actions/setup-node@v1
with:
# 选择要使用的 node 版本
node-version: "14"

# 缓存 node_modules
      - name: Cache dependencies
uses: actions/cache@v2
id: yarn-cache
with:
path: |
            **/node_modules
key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
restore-keys: |
            ${{ runner.os }}-yarn-

# 如果缓存没有命中，安装依赖
      - name: Install dependencies
if: steps.yarn-cache.outputs.cache-hit != 'true'
run: yarn --frozen-lockfile

# 运行构建脚本
      - name: Build VuePress site
run: yarn docs:build

# 查看 workflow 的文档来获取更多信息
# @see https://github.com/crazy-max/ghaction-github-pages
      - name: Deploy to GitHub Pages
uses: crazy-max/ghaction-github-pages@v2
# 环境变量
env:
GITHUB_TOKEN: ${{ secrets.ECHARTS_DOC_PUSH }}
with:
# 部署到 gh-pages 分支
target_branch: gh-pages
# 部署目录为 VuePress 的默认输出目录
build_dir: docs/.vuepress/dist