开始我们得白嫖之旅吧😆😆😆😆

首先我们创建 Docs 文档仓库

shell

mkdir vitepress && cd vitepress

初始化项目

npmpnpmyarn

$ npx vitepress init

$ pnpm exec vitepress init

$ yarn init
$ yarn add vitepress --dev

创建一个 docs 页面

shell

mddir docs
echo '# Hello VitePress' > docs/index.md

友情提示

（如果出现乱码，手动创建index.md文件）

在 package.json 文件添加配置

json

{
	"scripts": {
		"docs:dev": "vitepress dev docs",
		"docs:build": "vitepress build docs",
		"docs:serve": "vitepress serve docs"
	}
}

打开服务

npmpnpmyarn

$ npm run docs:dev

$ pnpm run docs:dev

$ yarn docs:dev

其实上面的操作在 vitePress 官方网站 --> vitePress

在 Docs 目录下创建一个目录 `.vitepress`

.vitepress
或用命令创建
mkdir .vitepress

在`.vitepress` 目录下创建 `config.js` 文件

在config.js文件中写入以下代码本文件参数配置见官方地址 vitepress->config.js

module.exports = {
	title: 'vitePress Demo', // 网站标题
	description: 'Demo', //网站描述
	base: '/', //  部署时的路径 默认 /  可以使用二级地址 /base/
	lang: 'CN', //语言
	// repo: 'vuejs/vitepress',
	head: [
		// 改变title的图标
		[
			'link',
			{
				rel: 'icon',
				href: 'img/logo.png' //图片放在public文件夹下
			}
		]
	],
	// 主题配置
	themeConfig: {
		// 假定是 GitHub. 同时也可以是一个完整的 GitLab URL
		repo: 'https://github.com/zhizhu-video/web',
		// 自定义仓库链接文字。默认从 `themeConfig.repo` 中自动推断为
		// "GitHub"/"GitLab"/"Bitbucket" 其中之一，或是 "Source"。
		repoLabel: '查看源码',
		// 以下为可选的编辑链接选项
		// 假如你的文档仓库和项目本身不在一个仓库：
		docsRepo: 'https://github.com/zhizhu-video/web',
		// 假如文档不是放在仓库的根目录下：
		docsDir: 'docs',
		// 假如文档放在一个特定的分支下：
		docsBranch: 'master',
		editLinks: true,
		editLinkText: '帮助我们改善此页面！',
		lastUpdated: '上次更新',
		logo: '/img/logo.png',
		//   头部导航
		nav: [
			{ text: '首页', link: '/' },
			{ text: '关于', link: '/pages/about/' },
			{
				text: '列表',
				items: [
					{ text: '关于1', link: '/pages/liebiao/1' },
					{ text: '关于2', link: '/pages/liebiao/2' },
					{ text: '外链百度', link: 'http://www.baidu.com/' }
				]
			}
		],
		//   侧边导航
		sidebar: {
			'/pages/': getpagesSidebar(),
			'/': getpagesSidebar()
		}
	}
}
function getpagesSidebar() {
	return [
		{
			text: '华夏兵王',
			children: [
				{ text: '第一章', link: '/pages/one/' },
				{ text: '第二章', link: '/pages/two/readme' }
			]
		},
		{
			text: '赘婿杨辰',
			children: [
				{ text: '简介', link: '/pages/zhuixu/' },
				{ text: '第一章', link: '/pages/zhuixu/1' },
				{ text: '第二章', link: '/pages/zhuixu/2' }
			]
		}
	]
}

vitepress 配置结束

提示

最后说明一下 yarn docs:build 后生成的文件在 .vitepress 文件夹 dist 内

最终配置完毕打包

vitepress.zip

直接下载源码如下操作

shell

yarn
-- 下载依赖
yarn run docs:dev
--  启动服务

仓库地址

vitepress vitePress Demo

部署到 github Pages 白嫖网站之旅

创建.github/workflows/deploy-gh_pages.yml文件

yaml

name: Build and Deploy
on: [push]
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@master

      - name: vuepress-deploy
        uses: jenkey2011/vuepress-deploy@master
        env:
          ACCESS_TOKEN: ${{ secrets.AUTOPAGE }} # 自己的密匙
          TARGET_REPO: zhizhu-video/web # 自己的仓库地址
          TARGET_BRANCH: gh-pages #这是github默认  你可以自己修改称自己的。但是在pages设置中需要修改
          BUILD_SCRIPT: yarn && yarn run docs:build
          BUILD_DIR: docs/.vitepress/dist/
          CNAME: https://vite.zhizhu.video #这里修改成自己的 Custom domain