一、前置条件

1. 已安装 Node.js（建议 14+ 版本）

2. 已创建 GitHub 仓库（仓库需命名为 `<username>.github.io` 或项目仓库）

---

 二、快速部署流程

1. 初始化项目

mkdir vuepress-project && cd vuepress-projectnpm init -ynpm install vuepress -D

 2. 配置文档结构

├── docs│   ├── .vuepress│   │   └── config.js│   └── README.md└── package.json

3. 修改 `config.js`

module.exports = {  title: '项目标题',  base: process.env.NODE_ENV === 'production' ? '/仓库名/' : '/', // 若部署到项目仓库需此项  themeConfig: {    // 主题配置...  }}

 **注意**：如果仓库名为 `username.github.io`，`base` 应设置为 `'/'`

4. 添加部署脚本（package.json）

{  "scripts": {    "dev": "vuepress dev docs",    "build": "vuepress build docs",    "deploy": "gh-pages -d docs/.vuepress/dist"  }}

5. 安装部署工具

npm install gh-pages -D

 6. 执行部署

npm run buildnpm run deploy

三、GitHub 仓库设置

1. 在仓库 Settings -> Pages 中：

  - Source：选择 `gh-pages` 分支

 - 等待几分钟即可访问 `https://<username>.github.io/<repository>`

四、自动化部署（GitHub Actions 推荐）

1. 创建 `.github/workflows/deploy.yml`：

name: Deployon:  push:    branches: [ main ]jobs:  deploy:    runs-on: ubuntu-latest    steps:      - uses: actions/checkout@v3      - name: Setup Node.js        uses: actions/setup-node@v3        with:          node-version: 16      - name: Install dependencies        run: npm install      - name: Build        run: npm run build      - name: Deploy        uses: peaceiris/actions-gh-pages@v3        with:          github_token: ${{ secrets.GITHUB_TOKEN }}          publish_dir: docs/.vuepress/dist

​五、常见问题解决

1. **页面空白**：

   - 检查 `config.js` 中的 `base` 配置

   - 确认仓库名称与路径匹配

2. **样式丢失**：

   - 确保资源路径使用绝对路径

   - 检查构建输出目录是否正确

3. **自定义域名**：

   - 在 `docs/.vuepress/public` 中添加 `CNAME` 文件

   - 文件内容为你的域名（如：example.com）

通过以上步骤即可实现一键部署和持续集成。每次推送代码到 main 分支后，GitHub Actions 会自动完成构建和部署。