guide/deployment/

[giscus[bot]]

guide/deployment/

提示 此文档 fork 自 vuepress official doc， 仅为了方便阅读。 下述的指南基于以下条件： Markdown 源文件放置在你项目的 docs 目录； 使用的是默认的构建输出目录 (.vuepress/dist) ； 使用 pnpm 作为包管理器，当然也支持使用 npm 或 yarn 。 VuePress 作为项目依赖安装，并在...

https://plume.pengzhanbo.cn/guide/deployment/

[yvtian-zhankui]

18:54:50.0
✖ Compiling with vite - failed in 6.86s
18:54:50.0
[vite:esbuild] Transform failed with 1 error:
18:54:50.0
/home/temp/node_modules/vuepress-theme-plume/lib/client/components/VPMenuGroup.vue?vue&type=script&setup=true&lang.ts:1:8: ERROR: Expected ">" but found "lang"
18:54:50.0
file: /home/temp/node_modules/vuepress-theme-plume/lib/client/components/VPMenuGroup.vue?vue&type=script&setup=true&lang.ts:1:8
18:54:50.0
18:54:50.0
Expected ">" but found "lang"
18:54:50.0
1 | <script lang="ts" setup>
18:54:50.0
| ^
18:54:50.0
2 | import VPIcon from '@theme/VPIcon.vue'
18:54:50.0
3 | import VPMenuLink from '@theme/VPMenuLink.vue'
18:54:50.0
18:54:50.0
at failureErrorWithLog (/home/temp/node_modules/esbuild/lib/main.js:1472:15)
18:54:50.0
at /home/temp/node_modules/esbuild/lib/main.js:755:50
18:54:50.0
at responseCallbacks.<computed> (/home/temp/node_modules/esbuild/lib/main.js:622:9)
18:54:50.0
at handleIncomingPacket (/home/temp/node_modules/esbuild/lib/main.js:677:12)
18:54:50.0
at Socket.readFromStdout (/home/temp/node_modules/esbuild/lib/main.js:600:7)
18:54:50.0
at Socket.emit (node:events:517:28)
18:54:50.0
at addChunk (node:internal/streams/readable:368:12)
18:54:50.0
at readableAddChunk (node:internal/streams/readable:341:9)
18:54:50.0
at Readable.push (node:internal/streams/readable:278:10)
18:54:50.0
at Pipe.onStreamRead (node:internal/stream_base_commons:190:23)
18:55:05.0
.

部署的时候间歇性的遇到这个错误

[yvtian-zhankui]

Run npx vuepress info
- Collecting Environment Info

  System:
    OS: Linux 6.5 Ubuntu 22.04.4 LTS 22.04.4 LTS (Jammy Jellyfish)
    CPU: (4) x64 AMD EPYC 7763 64-Core Processor
    Memory: 14.43 GB / 15.61 GB
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 18.20.4 - /opt/hostedtoolcache/node/18.20.4/x64/bin/node
    Yarn: 1.22.22 - /usr/local/bin/yarn
    npm: 10.7.0 - /opt/hostedtoolcache/node/18.20.4/x64/bin/npm
    pnpm: Not Found
    bun: Not Found
  Utilities:
    Git: 2.45.2 - /usr/bin/git
  Browsers:
    Chrome: 126.0.6478.182
  npmPackages:
    @vuepress/bundler-vite: ^2.0.0-rc.14 => 2.0.0-rc.14 
    @vuepress/bundler-webpack: Not Found
    @vuepress/cli:  2.0.0-rc.14 
    @vuepress/client:  2.0.0-rc.14 
    @vuepress/core:  2.0.0-rc.14 
    @vuepress/markdown:  2.0.0-rc.14 
    @vuepress/shared:  2.0.0-rc.14 
    @vuepress/utils:  2.0.0-rc.14 
    vue:  3.4.33 
    vue-router:  4.4.0 
    vuepress: ^2.0.0-rc.14 => 2.0.0-rc.14 

Vite

`-- @vuepress/[email protected]
  +-- @vitejs/[email protected]
  | `-- [email protected] deduped
  `-- [email protected]

[pengzhanbo]

该问题应该是相关依赖的上游导致的，正在从上游排查原因。

[yvtian-zhankui]

"@vitejs/plugin-vue":"~5.0.4"

将这个组件版本锁定到5.0.x后暂时没有出现上述问题

[pengzhanbo]

比较麻烦的是，我已经比对过 @vitejs/pljugin-vue 最近的更新，从它源码变更上看没发现可能导致该问题的修改，还需要排查更上游的 vue/compiler-*。我联系过上游的一些开发者，暂时还没给出结论，该问题短时间内不好解决，你先暂时锁下版本吧，出现问题的话重新构建。

[pengzhanbo]

另外我打算把这个 discussions comments 转到 new issue ， 后续进展在 issue #130 中进行。

[hxywd666]

在部署到Github Page的时候，我这里有一个自动部署脚本可供参考👇

#!/usr/bin/env sh
 
# 忽略错误
set -e  #有错误抛出错误
 
# 构建
pnpm run docs:build  #然后执行打包命令
 
# 进入待发布的目录
cd docs/.vuepress/dist  #进到dist目录
 
git init  #执行这些git命令
git add -A
git commit -m 'deploy'
 
# 上传仓库，这里改成你自己的仓库
git push -f https://github.com/example/example.github.io.git master:gh-pages
 
cd -
 
rm -rf docs/.vuepress/dist  #删除dist文件夹

用法：

• 在项目根目录(和package.json同级)创建一个名叫"deploy.sh"的文件，复制上面的代码到新创建的文件中
• 把仓库的地址换成你自己的
• 修改"package.json"中的"script"，如下：

"scripts": {
    "deploy":"bash deploy.sh",
    "docs:dev": "vuepress dev docs",
    "docs:dev-clean": "vuepress dev docs --clean-cache --clean-temp",
    "docs:build": "vuepress build docs --clean-cache --clean-temp",
    "docs:preview": "http-server docs/.vuepress/dist",
    "vp-update": "vp-update"
},

然后，打开Git Bash，cd到你的项目目录下，然后执行命令：

pnpm run deploy

等待一会，项目就会自动上传到example.github.io这个仓库里，然后就可以直接访问你的文档库了
如果你用的是其它包管理器，比如yarn，那么把"deploy.sh"中的"pnpm"换成"yarn"，然后在Git Bash中执行命令的时候，改成执行如下命令即可：

yarn run deploy

[pengzhanbo]

感谢提供 新的部署方式 👍👍👍

[ztygod]

关于GitHub Pages的部署有什么教程吗，网上内容版本不一样，难以判断是否有用，本人主要是卡在GitHub Actions了

[cjhalw]

上面的脚本 可以本地打包 直接打包推送github pages仓库。不在需要配置GitHub Actions了

[8848TI]

为什么我打包，复制他的yml，最后渲染的是最外层那个README.md文件的内容，就连路径也不是我用base配的那个，他生成的是github.io/我的项目名

[pengzhanbo]

你的 github pages 没有配置正确，请参考 cli 生成的项目的 readme 说明。

[lhhh666]

我想问下，我使用nginx，然后网页的样式都消失了，是需要什么配置吗

[pengzhanbo]

你可能需要了解这个：部署 > base

[ykshang]

项目自带的那个，构建报了看不懂，还不好搜的错，懒得折腾了。

我直接分享一个我自己常用的一个 万能+灵活 配置版本吧：

可以本地运行，可以在 github 上运行，都可以自动部署到 github 的 gh-pages 分支。

Step 1 本地创建构建文件并测试一下

本地创建一个deploy.sh，内容如下：（文件名随意，和构建流程文件能对得上行）

该脚本运行完能将结果能推送到 gh-pages 分支，并且不影响本地项目。

文件里的邮箱要和 github 上的邮箱和用户名一致，不然会报错。因为要和对应的 ssh keys 能验证匹配

注意：本地项目下运行可以删掉npm install，因为不需要重新安装依赖

#!/usr/bin/env sh

# 确保脚本抛出遇到的错误
set -e

## 安装依赖
npm install

# 运行构建命令，生成静态文件
npm run docs:build

# 进入生成的文件夹
cd docs/.vuepress/dist

# 推送构建结果到gh-pages分支
git init
# 邮箱
git config user.email "[email protected]"
# 用户名
git config --global user.name "xxxx"
# 添加文件并提交
git add -A
git commit -m 'Automatic build'

# 不确定 git init 后，当前分支是master 还是 main
# 这里再次强制创建切换到 master 分支。
# 可以指定其他的分支名，能和 push 命令里的分支名对应即可。
git checkout -B master
# 强制推送到gh-pages分支。
git push -f git仓库地址 master:gh-pages

cd -

Step 2 测试一下

测试主要分两部分：

1. 使用docs:build 看看构建报错吗？构建结果是否正常？
2. 运行bash deploy.sh 看看报错吗？ 本地运行的话，运行结果有没有推送到仓库的 gh-pages 分支的？过一两分钟，刷新一下页面，你修改的博客内容是不是生效了？

在本地使用http-server试试能不能访问构建出来的静态文件。

Step 3 创建一个变量存储 id_rsa 私钥。

在setting -> secrets 下创建一个变量 ACTION_DEPLOY_KEY。（名字随意，保持和 deploy.yml 文件的引用变量的名字一致即可）

打开本地 user 目录下，把.ssh/id_rsa 的文件内容复制给 ACTION_DEPLOY_KEY 变量。或者打开用户设置，把SSH keys 复制过去。

这个变量主要是就是身份认证，方便你把构建结果推送（ssh）到 gh-pages 分支

Step 4 创建 github 的工作流文件并拉取到本地

构建脚本能正常运行并推送代码的话，就可以配置工作流了。

在github -> aciton 里创建个 workflow 工作流。流程文件名字起一下，如：deploy.yml。

创建提交以后，在本地更新一下，把这个文件deploy.yml 拉取到本地。

可以复制下面的代码，直接使用：

# This is a basic workflow to help you get started with Actions

name: CI

# Controls when the action will run.
on:
  # Triggers the workflow on push or pull request events but only for the master branch
  # 触发构建的动作和对应的分支，代码在哪，分支就配置哪。
  # 这里是master分支，所以每次push到master分支，就会触发构建。
  push:
    branches: [master]
  # pull_request 也会触发构建
  pull_request:
    branches: [master]

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

# A workflow run is made up of one or more jobs that can run sequentially or in parallel
jobs:
  # This workflow contains a single job called "build"
  build:
    # The type of runner that the job will run on
    runs-on: ubuntu-latest

    # Steps represent a sequence of tasks that will be executed as part of the job
    steps:
      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
      - uses: actions/checkout@v2

      - name: Setup install env
        env:
          # 需要在 secrets 创建该变量 ACTION_DEPLOY_KEY
          # 并且把你本地计算机的私钥复制进去，和用户设置里的`SSH keys` 保持一致
          # 方便后续，构建完成后，推送代码到gh-pages分支。
          ACTION_DEPLOY_KEY: ${{ secrets.ACTION_DEPLOY_KEY }}

        run: |
          # set up private key for deploy
          mkdir -p ~/.ssh/
          echo "$ACTION_DEPLOY_KEY" > ~/.ssh/id_rsa
          chmod 600 ~/.ssh/id_rsa
          ssh-keyscan github.com >> ~/.ssh/known_hosts

      # Runs a set of commands using the runners shell
      - name: build
        # 运行构建脚本
        run: bash deploy.sh

Step5 本地推送代码并测试一下

前边的 deploy.yml 中指定了push 到 mastser 分支时触发构建

我们可以在本地代码里，修改一下内容，然后推送到仓库的 master 分支。

然后去action 里看一下，是否能正常运行构建脚本？

如果构建脚本能正常运行，并且能推送到 gh-pages 分支，那么就说明构建流程配置成功了。

[ykshang]

Action页面的截图