VuePress2 初体验

点击查看 $frontmatter

{
  "icon": "vue",
  "lang": "zh-CN",
  "excerpt": "使用 Vuepress2 搭建静态文档分享类站点",
  "date": "2022-01-23T00:00:00.000Z",
  "category": [
    "VuePress",
    "Markdown"
  ],
  "tag": [
    "vuepress",
    "markdown"
  ],
  "description": "点击查看 $frontmatter 创建文件夹 tab linux tab windows 起步 本节将帮助您从头构建一个基本的 VitePress 文档站点。如果您已经有一个现有项目，并且希望将文档保存在项目中，请从步骤 3 开始。 Step. 1: 创建并更改为新目录。; Step. 2: 使用您喜欢的包管理器进行初始化。; Step. 3: 本地...",
  "head": [
    [
      "meta",
      {
        "property": "og:url",
        "content": "https://zedo.netlify.app/article/tech/vuepress2-usage.html"
      }
    ],
    [
      "meta",
      {
        "property": "og:site_name",
        "content": "zedo"
      }
    ],
    [
      "meta",
      {
        "property": "og:title",
        "content": "VuePress2 初体验"
      }
    ],
    [
      "meta",
      {
        "property": "og:description",
        "content": "点击查看 $frontmatter 创建文件夹 tab linux tab windows 起步 本节将帮助您从头构建一个基本的 VitePress 文档站点。如果您已经有一个现有项目，并且希望将文档保存在项目中，请从步骤 3 开始。 Step. 1: 创建并更改为新目录。; Step. 2: 使用您喜欢的包管理器进行初始化。; Step. 3: 本地..."
      }
    ],
    [
      "meta",
      {
        "property": "og:type",
        "content": "article"
      }
    ],
    [
      "meta",
      {
        "property": "og:locale",
        "content": "zh-CN"
      }
    ],
    [
      "meta",
      {
        "property": "og:updated_time",
        "content": "2023-04-21T14:58:33.000Z"
      }
    ],
    [
      "meta",
      {
        "property": "article:author",
        "content": "zedo"
      }
    ],
    [
      "meta",
      {
        "property": "article:tag",
        "content": "vuepress"
      }
    ],
    [
      "meta",
      {
        "property": "article:tag",
        "content": "markdown"
      }
    ],
    [
      "meta",
      {
        "property": "article:published_time",
        "content": "2022-01-23T00:00:00.000Z"
      }
    ],
    [
      "meta",
      {
        "property": "article:modified_time",
        "content": "2023-04-21T14:58:33.000Z"
      }
    ],
    [
      "script",
      {
        "type": "application/ld+json"
      },
      "{\"@context\":\"https://schema.org\",\"@type\":\"Article\",\"headline\":\"VuePress2 初体验\",\"image\":[\"\"],\"datePublished\":\"2022-01-23T00:00:00.000Z\",\"dateModified\":\"2023-04-21T14:58:33.000Z\",\"author\":[{\"@type\":\"Person\",\"name\":\"zedo\",\"url\":\"https://zedo.netlify.app\"}]}"
    ]
  ]
}

删除线

创建文件夹

yarn init
yarn add --dev vitepress

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

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 相关

https://github.com/markdown-it/markdown-it/blob/master/docs/architecture.md

markdown-it 原理解析

VuePress 博客优化之拓展 Markdown 语法

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

从零实现一个 VuePress 插件

一些 v2 主题

vuepress-theme-hope

vuepress-theme-gungnir