使用 VitePress 从 0 到 1 快速搭建官网使用 VitePress 从 0 到 1 快速搭建官网在这篇文章

使用 VitePress 从 0 到 1 快速搭建官网

在这篇文章中，我将一步步使用 VitePress 来快速创建一个人静态网站。 VitePress 是一个由 Vite 和 Vue 驱动的静态网站生成器，它能让网站快速搭建并且易于维护！

在开始之前，确保电脑上已经安装了以下软件：

可以通过 npm、pnpm 或 yarn 来安装 VitePress。在项目目录中，运行以下命令之一：

$ pnpm add -D vitepress

$ yarn add -D vitepress

如果使用 pnpm 并且遇到了 missing peer deps 警告，可以通过修改 package.json 来忽略这些警告：

"pnpm": {
  "peerDependencyRules": {
    "ignoreMissing": [
      "@algolia/client-search",
      "search-insights"
    ]
  }
}

安装完成后，可以通过运行以下命令来启动 VitePress 的命令行设置向导：

$ npx vitepress init

这个向导会问几个问题，比如配置文件的位置、网站标题和描述。根据需要回答这些问题就行，向导会帮忙自动生成一个基本的项目结构。

假设你选择在 ./docs 目录中搭建 VitePress 项目，那文件结构应该如下所示：

.
├─ docs
│  ├─ .vitepress
│  │  └─ config.js
│  ├─ api-examples.md
│  ├─ markdown-examples.md
│  └─ index.md
└─ package.json

.vitepress 目录包含了 VitePress 的配置文件、开发服务器缓存、构建输出和可选的主题自定义代码。

在 .vitepress/config.js 文件中，可以自定义站点。以下是一个基本的配置示例：

// .vitepress/config.js
export default {
  title: '我的个人官网',
  description: '这是我的个人网站，欢迎访问！',

  themeConfig: {
    // 在这里配置主题
  }
}

在 .vitepress 目录之外的 Markdown 文件被视为源文件。VitePress 使用基于文件的路由，每个 .md 文件将被编译成 .html 文件。

在 package.json 文件中添加以下脚本：

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

然后，可以通过运行以下命令来启动本地开发服务器：

$ npm run docs:dev

开发服务器将在 http://localhost:5173 上运行。打开浏览器，访问这个 URL，可以看到网站正在运行✌️。

更多 Go 高质量内容 👉：https://portal.yunosphere.com

欢迎关注，分享 Go / 创业经历 / 其他编程知识 👇 !