玩转VitePress，在Github搭建你的私人领地

前端

2023-12-30 22:03:38

利用 VitePress 和 GitHub 打造个人博客网站：分步指南

在当今数字时代，拥有一个个人博客网站对于展示你的专业知识、分享你的见解和建立你的在线形象至关重要。通过利用 VitePress 和 GitHub 的强大功能，你可以轻松快捷地建立一个引人注目的博客，而无需深入了解复杂的 web 开发知识。

VitePress：以 Markdown 打造博客

VitePress 是一个革命性的静态网站生成器，专为使用 Markdown 创建博客和文档网站而设计。它基于 Vue.js，提供了无缝的开发体验，使你可以专注于内容创建，而无需担心技术细节。

GitHub：代码存储和协作

GitHub 是一个领先的代码托管平台，让你可以存储、管理和共享你的代码。它还提供协作工具，让你可以与他人共同开发项目，并通过社区获得支持。

分步指南：打造你的博客网站

1. 创建 GitHub 仓库

登录 GitHub，点击右上角的 “+” 号，然后选择 “New repository”。
输入仓库名称（例如 “my-blog”），选择可见性（例如 “Public”），然后点击 “Create repository”。

2. 安装 VitePress

打开命令行工具（例如 Terminal 或 PowerShell）。
运行以下命令安装 VitePress：

npm install -g vitepress

3. 创建 VitePress 项目

在你的 GitHub 仓库中创建一个名为 “docs” 的文件夹。
在 “docs” 文件夹中，创建一个名为 “index.md” 的文件。

4. 配置 VitePress

在 “docs” 文件夹中，创建一个名为 “vitepress.config.js” 的文件。
输入以下代码配置 VitePress：

module.exports = {
  title: 'My Blog',
  description: 'This is my personal blog.',
  themeConfig: {
    logo: '/logo.png',
    nav: [
      { text: 'Home', link: '/' },
      { text: 'About', link: '/about' },
      { text: 'Contact', link: '/contact' }
    ],
    sidebar: [
      {
        title: 'Getting Started',
        children: [
          '/getting-started/installation',
          '/getting-started/usage'
        ]
      },
      {
        title: 'Features',
        children: [
          '/features/markdown',
          '/features/themes',
          '/features/plugins'
        ]
      }
    ]
  }
}