搭建VuePress静态资源站点

罗行
235 阅读2分钟

0.参考

[vuePress官网1.x](介绍 | VuePress中文文档 | VuePress中文网)

补充： CMD仅支持传统的Windows命令，而PowerShell不仅支持传统的Windows命令和.net库中的命令，还支持部分常用的Linux命令，功能更为强大

1.在github创建一个仓库（仓库名是化名）

image.png

2.github新建一个分支（区分代码提交分支和部署到线上的分支），配制github的settings的pages的内容

image.png

3.关联仓库

git clone 仓库地址（直接拉取远程仓库代码）
cd 仓库名/项目名
git fetch (拉取分支)
git branch （查看分支）

4.开发代码

最终项目结构：

image.png

  • pnpm init
  • mkdir docs && echo '# Hello VuePress' > docs/index.md
  • 修改index.md的内容。（home:true,能把首页的侧边栏消掉）
---
home: true
heroText: VuePress的初始模板
tagline: 规范化
actionText: 立刻进入 →
actionLink: /demo/test.md

features:
  - title: 超赞
    details: 点赞点赞
  - title: 超牛
    details: 牛呀牛呀
  - title: 超无敌
    details: 无敌剑阵
---

# 头领

## :star: 醒醒
  • 创建网站的目录结构
cd docs
//使用cmd
mkdir .vuepress
//使用cmd
echo "内容" >.vuepress\config.ts
//使用cmd
mkdir demo && echo '# Hello VuePress' > demo/test.md
cd ..
  • 加个图片，美观一下：docs/.vuepress/public/img/logo.png。

image.png

  • 配制config.ts,如下（github用户名和仓库名，不方便透露，自己替换）
import { defineConfig4CustomTheme, UserPlugins } from 'vuepress/config';

export default defineConfig4CustomTheme({
  locales: {
    '/': {
      lang: 'zh-CN',
      title: '***文档说明',
      description: 'VuePress静态资源站点模板',
    },
  },
  base: '/仓库名/',
  themeConfig: {
    nav: [
      { text: '首页', link: '/index.md' },
      {
        //导航栏和侧边栏的字段属性不一样
        text: '模板目录',
        items: [{ text: '测试用例', link: '/demo/test.md' }]
      }
    ],
    sidebar: [
      {
        title: '模板目录',
        children: [{ title: '测试用例', path: '/demo/test.md' }]
      },
    ],
    logo: '/img/logo.png',
    repo: 'Github用户名/仓库名',
    searchMaxSuggestions: 10,
    docsDir: 'docs',
    footer: {
      createYear: 2024,
      copyrightInfo:
        '仓库名 | <a href="https://github.com/Github用户名/仓库名" target="_blank">github</a>',
    },
    extendFrontmatter: {
      author: {
        name: 'durant',
        link: 'https://github.com/Github用户名/仓库名',
      },
    },
  },
  head: [
    ['link', { rel: 'icon', href: '/img/logo.png' }],
    [
      'meta',
      {
        name: 'keywords',
        content: 'VuePress静态资源站点模板',
      },
    ],
  ],
  plugins: <UserPlugins>[
    [
      'one-click-copy',
      {
        copySelector: ['div[class*="language-"] pre', 'div[class*="aside-code"] aside'],
        copyMessage: '复制成功',
        duration: 1000,
        showInMobile: false,
      },
    ],
    [
      'vuepress-plugin-zooming',
      {
        selector: '.theme-vdoing-content img:not(.no-zoom)',
        options: {
          bgColor: 'rgba(0,0,0,0.6)',
        },
      },
    ],
  ],
  extraWatchFiles: ['.vuepress/config.ts'],
});
  • 修改package.json（锁版本好些1.9.9，这里不锁了^1.9.9）
"devDependencies": {
    "vuepress": "^1.9.9",
    "vuepress-plugin-one-click-copy": "^1.0.2",
    "vuepress-plugin-zooming": "^1.1.7"
}
  • 安装依赖 pnpm i (vscode会帮忙生成.gitignore文件，不然就要手动写一下)
  • 编写自动化部署脚本deploy.sh (dev为线上部署分支)(用途：把打包后的产物提交到仓库)
#!/usr/bin/env sh

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


push_addr=`git remote get-url --push origin`
commit_info=`git describe --all --always --long`
dist_path=docs/.vuepress/dist
push_branch=dev

# 生成静态文件
npm run docs:build

# 进入生成的文件夹
cd $dist_path

git init
git add -A
git commit -m "deploy, $commit_info"
git push -f $push_addr HEAD:$push_branch

cd -
rm -rf $dist_path
  • 修改package.json(注意：想要部署，直接deploy就行，deploy自动化部署脚本包含了pnpm run docs:build命令)
"scripts": {
    "deploy": "bash deploy.sh",
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
},
  • 运行脚本
//本地运行
pnpm run docs:dev
//通过github的Actions能力，直接部署到线上，注意使用git bash环境
pnpm run deploy

6.pnpm run deploy就可以查看发布

image.png

补充其他

其他的部署方式的配制github的workflows的deploy.yml，详见VuePress官网。 注意github的Settings的Secret and Variable有ACCESS_TOKEN也要配制。 image.png

name: docs

on:
  # 每当 push 到 main 分支时触发部署
  push:
    branches: [main]
  # 手动触发部署
  workflow_dispatch:

jobs:
  docs:
    runs-on: ubuntu-latest

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

      - name: Setup pnpm
        uses: pnpm/action-setup@v2
        with:
          # 选择要使用的 pnpm 版本
          version: 8
          # 使用 pnpm 安装依赖
          run_install: true

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          # 选择要使用的 node 版本
          node-version: 20
          # 缓存 pnpm 依赖
          cache: pnpm

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

      # 查看 workflow 的文档来获取更多信息
      # @see https://github.com/crazy-max/ghaction-github-pages
      - name: Deploy to GitHub Pages
        uses: crazy-max/ghaction-github-pages@v4
        with:
          # 部署到 线上 分支
          target_branch: 线上分支名
          # 部署目录为 VuePress 的默认输出目录
          build_dir: docs/.vuepress/dist
        env:
          # @see https://docs.github.com/cn/actions/reference/authentication-in-a-workflow#about-the-github_token-secret
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

其他主题：参照官网（vuePress版本号：v2.0.0-rc.18） 快速上手 | VuePress (vuejs.org)

avatar
文章
阅读
粉丝