VuePress2 初体验

zedo2022/1/23大约 2 分钟约 718 字

VuePress2 初体验

点击查看 $frontmatter

{{ $frontmatter }}

~~删除线~~

创建文件夹

yarn init
yarn add --dev vitepress

linux

mkdir docs && echo '# Hello VitePress' > docs/index.md

windows

mkdir docs && echo # Hello VitePress > docs/index.md
# windows 系统 md 或者 mkdir 都是创建目录

起步

本节将帮助您从头构建一个基本的 VitePress 文档站点。如果您已经有一个现有项目，并且希望将文档保存在项目中，请从步骤 3 开始。

Step. 1: 创建并更改为新目录。

mkdir vitepress-starter && cd vitepress-starter

Step. 2: 使用您喜欢的包管理器进行初始化。

yarn init

Step. 3: 本地安装 VitePress。
```
yarn add --dev vitepress
```

Step. 4: 创建您的第一个文档。

mkdir docs && echo '# Hello VitePress' > docs/index.md

Step. 5: 添加一些脚本到 package.json.

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

Step. 6: Serve the documentation site in the local server.
```
yarn docs:dev
```
VitePress will start a hot-reloading development server at http://localhost:3000.

By now, you should have a basic but functional VitePress documentation site.

When your documentation site starts to take shape, be sure to read the

[deployment guide](./deploy).

yarn add -D vuepress@next

安装 markdown-it-katex 数学解析库

yarn add markdown-it-katex

yarn create vuepress-theme-hope hope-blog

简单配置

使用 Git

可以使用 git 并部署到 Gitee Pages（Github Pages 也可以，但国内访问速度比较慢）

建立仓库

首先在 gitee 建立仓库

初始化 git

在本地项目中

git init

在项目中添加 gitee 远程仓库地址

git remote add gitee git@gitee.com:zedo/zedo.git

拉取远程仓库的代码

git pull gitee master

将临时目录和缓存目录添加到 .gitignore 文件中

echo 'node_modules' >> .gitignore
echo '.temp' >> .gitignore
echo '.cache' >> .gitignore

提示

可以通过 git status -sb 查看当前纳入版本管理的文件，检测当前 .gitignore 文件是否生效

注意

如果是 Windows 系统，还需要检查 .gitignore 文件是否为 UTF-8 格式，否则 .gitignore 文件中不会生效。

提交和推送

git add .
git commit -m "first commit"
git push gitee master

其他

清理本地缓存，如已经 git add 的文件

git rm -rf --cached .

https://www.runoob.com/git/git-pull.html

执行 commit 后，还没执行 push 时，想要撤销这次的 commit

git reset --soft HEAD^

git commit 后，如何撤销 commit

git push 的 -u 参数具体适合含义？

markdown-it 原理解析

VuePress 博客优化之拓展 Markdown 语法

一篇带你用 VuePress + Github Pages 搭建博客

从零实现一个 VuePress 插件

一些 v2 主题

vuepress-theme-hope

vuepress-theme-gungnir