Vuepress 2从0-1保姆级入门教程——主题与部署

passwordgloo

已于 2025-05-07 22:23:29 修改

阅读量2.1k

点赞数 2

分类专栏： Vuepress 2教程文章标签： vue git

于 2023-02-19 20:43:32 首次发布

本文链接：https://blog.csdn.net/passwordgloo/article/details/129114406

版权

Vuepress 2教程专栏收录该内容

7 篇文章

订阅专栏

该文章提供Vuepress2的详细教程，包括从环境配置、安装流程到文档配置和范例部署的保姆级指南。进阶部分涉及全文搜索和主题美化。此外，介绍了多种部署方案，如deploy.sh脚本和GitHubActions，并提供了主题案例供参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

Vuepress 2 专栏目录【已完结】

1. 入门阶段

Vuepress 2从0-1保姆级入门教程——环境配置篇
Vuepress 2从0-1保姆级入门教程——安装流程篇
Vuepress 2从0-1保姆级入门教程——文档配置篇
Vuepress 2从0-1保姆级入门教程——主题与部署

2.进阶阶段

Vuepress 2从0-1保姆级进阶教程——全文搜索篇
Vuepress 2从0-1保姆级进阶教程——美化与模版
Vuepress 2从0-1保姆级进阶教程——标准化流程

一、主题欣赏

厌倦了默认主题样式，又不想自己DIY，个人搜集整理的各大主题案例，方便大家参考

在这里插入图片描述

（一）Reco主题

🔗Reco主题文档查看

在这里插入图片描述

以下为截图展示

在这里插入图片描述

（二）Hope主题

🔎 Hope主题文档了解详情

在这里插入图片描述

（三）Plume主题

🔍 访问Plume主题文档了解详情

在这里插入图片描述

二、部署

可选Vuepress 2标准化流程里的commit工具

方案1 Github Page

手动推送

1️⃣ 根目录新建deploy.sh，名字任取

#空项目预置环境

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

# 生成静态文件
pnpm docs:build

# 进入生成的文件夹
cd dist

# 如果是发布到自定义域名
# echo 'www.example.com' > CNAME

git init
git add -A

git commit -m "your commit"
# 如果发布到 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

cd -

2️⃣ 终端打开Git，输入./deploy.sh

在这里插入图片描述

自动推送

vuepress2自动安装时如果跳过添加GitHub action，可在根目录新建 📁 .github，里面新建docs.yml 输入


name: Deploy Blog

on:
  push:
    branches:
      # make sure this is the branch you are using
      - master

permissions:
  contents: write

jobs:
  deploy-gh-pages:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v3
        with:
          fetch-depth: 0
          # if your docs needs submodules, uncomment the following line
          # submodules: true

      - name: Install pnpm
        uses: pnpm/action-setup@v2
        with:
          version: 8
          run_install: true


      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 18
          cache: pnpm


      - name: Build Docs
        env:
          NODE_OPTIONS: --max_old_space_size=8192
        run: |-
          pnpm run docs:build
          > src/.vuepress/dist/.nojekyll

      - name: Deploy Docs
        uses: JamesIves/github-pages-deploy-action@v4
        with:
          # This is the branch where the docs are deployed to
          branch: deploy
          folder: docs/.vuepress/dist