我用VitePress“抄袭“了阮一峰老师的ES6入门网站，你也来试试

你好同学，我是沐爸，欢迎点赞、收藏和关注！个人知乎、公众号"沐爸空间"

基于 VitePress 框架，我在个人阿里云服务器上部署了《ES6 入门教程》的静态站点，项目访问地址：http://es6.muba888.cn/。项目代码已开源：https://gitee.com/ismuba/vitepress-es6.git，个人可以根据需要，自行下载代码和修改，用于快速部署个人博客系统或文档管理系统等。

效果预览

首页

白天效果

黑夜效果

开始之前先了解下 vitepress。

VitePress 是什么？

VitePress 是一款由 Vue.js 的作者尤雨溪主导开发的静态网站生成器，它基于 Vite 构建，专为快速、高效地构建技术文档、博客和官方网站等类型的站点而设计。以下是 VitePress 的特点和使用场景：

特点

1.快速构建与热重载：

• VitePress 利用 Vite 的原生 ES 模块导入和高效的文件系统缓存机制，实现了快速的热重载和即时的页面预览。这意味着在开发过程中，开发者可以实时看到修改效果，大大提高了开发效率。

2.Markdown 至上：

• VitePress 支持 Markdown 格式的文档编写，这是一种轻量级的标记语言，易于阅读和书写。同时，它还支持 Markdown 的语法扩展，允许在 Markdown 中嵌入 Vue 组件，从而提供更丰富的文档内容和交互效果。

3.易于上手与定制化：

• 对于熟悉 Markdown 的开发者来说，VitePress 可以迅速上手。同时，它还支持自定义主题和样式，允许开发者根据需求调整站点的外观和交互效果，满足不同的品牌风格需求。

4.丰富的功能：

• VitePress 内置了自动侧边栏生成和导航、内置搜索功能以及自定义主题和样式等功能。这些功能使得开发者可以轻松地构建出符合自身需求的文档站点，提升用户体验。

5.轻量级与高性能：

• 相比其他静态网站生成器，VitePress 更加轻量级，学习成本更低。同时，它借助 Vite 的强大性能，实现了高效的构建和部署，使得站点能够快速加载和响应。

使用场景

1.技术文档：

• 对于开源项目或企业内部项目，可以使用 VitePress 快速构建美观、响应式且易于维护的文档网站，如 API文档、开发手册等。

2.个人或团队博客：

• 开发者可以搭建个人技术博客，利用 Markdown 进行内容创作，享受近乎即时的预览和高效的构建速度。同时，通过自定义主题和样式，可以打造出个性化的博客界面。

3.官方网站：

• 企业或团队可以用 VitePress 构建内部知识库或官方网站，方便成员查阅和分享各类技术和业务文档。此外，VitePress 还支持 SEO 优化，有助于提升网站在搜索引擎中的排名。

4.在线教程：

• 教育机构或个人讲师可以使用 VitePress 制作和发布在线教程，支持代码高亮、表格、图片等丰富格式，提升阅读体验。同时，还可以嵌入 Vue 组件来展示交互效果，使教程更加生动和有趣。

接下来重点来了，怎么利用 vitepress 开发自己的静态站点呢？下面说下 ES6 入门教程网站的开发过程。

项目开发过程

1.初始化项目并安装 vitepress

    npm init -y

    npm add -D vitepress

2.安装向导

    npx vitepress init

3.本地启动项目

    npm run docs:dev

3.编写 ES6 知识的文档
主要是从《ES6 入门教程》官网获取 md 文档并移植到本地。

4.配置文件
在项目根目录下 .vitepress/config.mts 文件中进行配置网页语言、标题、描述、根目录、logo、导航栏和菜单栏等。

import { defineConfig } from 'vitepress'

export default defineConfig({
    lang: 'zh-CN',
    title: 'ES6',
    description: '阮一峰ES6入门教程, 一本高质量、全面深入的ES6学习教程',
    lastUpdated: true,
    base: '/',
    cleanUrls: true,
    markdown: {
        theme: {
            dark: 'dracula-soft',
            light: 'material-theme'
        }
    },
    themeConfig: {
        logo: 'https://s21.ax1x.com/2024/07/16/pkIr1Bj.jpg',
        nav: [
            { text: '目录', link: '/menu/README' },
            { text: '关于项目', link: '/menu/about-project' }
        ],
        sidebar: {
            '/menu/': [
                {
                    text: '目录',
                    items: [
                        { text: '0.前沿', link: '/menu/README' },
                        { text: '1.ECMAScript 6简介', link: '/menu/intro' },
                        { text: '2.let 和 const命令', link: '/menu/let' },
                        { text: '3.变量的解构赋值', link: '/menu/destructuring' },
                        { text: '4.字符串的扩展', link: '/menu/string' },
                        { text: '5.字符串的新增方法', link: '/menu/string-methods' },
                        { text: '6.正则的扩展', link: '/menu/regex' },
                        { text: '7.数值的扩展', link: '/menu/number' },
                        { text: '8.函数的扩展', link: '/menu/function' },
                        { text: '9.数组的扩展', link: '/menu/array' },
                        { text: '10.对象的扩展', link: '/menu/object' },
                        { text: '11.对象的新增方法', link: '/menu/object-methods' },
                        { text: '12.运算符的扩展', link: '/menu/operator' },
                        { text: '13.Symbol', link: '/menu/symbol' },
                        { text: '14.Set 和 Map 数据结构', link: '/menu/set-map' },
                        { text: '15.Proxy', link: '/menu/proxy' },
                        { text: '16.Reflect', link: '/menu/reflect' },
                        { text: '17.Promise 对象', link: '/menu/promise' },
                        { text: '18.Iterator 和 for...of 循环', link: '/menu/iterator' },
                        { text: '19.Generator 函数的语法', link: '/menu/generator' },
                        { text: '20.Generator 函数的异步应用', link: '/menu/generator-async' },
                        { text: '21.async 函数', link: '/menu/async' },
                        { text: '22.Class 的基本语法', link: '/menu/class' },
                        { text: '23.Class 的继承', link: '/menu/class-extends' },
                        { text: '24.Module 的语法', link: '/menu/module' },
                        { text: '25.Module 的加载实现', link: '/menu/module-loader' },
                        { text: '26.编程风格', link: '/menu/style' },
                        { text: '27.读懂规格', link: '/menu/spec' },
                        { text: '28.异步遍历器', link: '/menu/async-iterator' },
                        { text: '29.ArrayBuffer', link: '/menu/arraybuffer' },
                        { text: '30.最新提案', link: '/menu/proposals' },
                        { text: '31.Decorator', link: '/menu/decorator' },
                        { text: '32.参考链接', link: '/menu/reference' }
                    ]
                },
            ]
        },
        socialLinks: [
            { icon: 'github', link: 'https://github.com/ruanyf/es6tutorial' }
        ]
    },
    head: [
        ['link', { rel: 'icon', href: 'https://es6.ruanyifeng.com/favicon.ico' }]
    ]
})

5.编写首页 index.md
首页配置用于对网站进行简要介绍和说明，提供进入其他页面的入口。

---
layout: home
title: ES6 入门教程
description: 为前端项目提供完善的监控手段
hero:
  name: ECMAScript 6入门
  text: 一本高质量、全面深入的 ES6 学习教程
  image:
    src: https://s21.ax1x.com/2024/08/02/pkXqBdK.jpg
    alt: VitePress
  actions:
    - theme: brand
      text: 快速开始
      link: /menu/README
    - theme: alt
      text: 关于项目
      link: /menu/about-project
    - theme: alt
      text: View on GitHub
      link: https://github.com/ruanyf/es6tutorial
features:
  - title: 清晰易懂
    details: 以清晰、简洁的语言阐述ES6的新特性和用法，使得复杂的技术概念变得易于理解。
    icon: 🚀
  - title: 全面深入
    details: 教程涵盖了ES6的多个方面，包括变量声明、Symbol类型、Promise对象、箭头函数等，内容全面且深入。
    icon: ⚡
  - title: 美观大方
    details: 教程的排版设计美观大方，符合读者的阅读习惯，使得学习过程更加愉悦和高效。
    icon: 🛠
  - title: 结构清晰
    details: 教程的章节划分合理，结构清晰。你可以根据自己的学习进度和需求，选择相应的章节进行深入学习。
    icon: 🎪
---

6.配置主题
在项目根目录下 .vitepress 文件夹下新建 theme 文件夹，并在 theme 文件夹下新建 index.ts 文件和 custom.css 文件：

    // index.ts

    import DefaultTheme from 'vitepress/theme'
    import './custom.css'

    export default DefaultTheme

    // custom.css

    @charset "UTF-8";
    :root {
        --vp-c-brand-1: #4682be;
        --vp-code-block-bg: #111;
        --vp-code-lang-color: #6a737d;
        --vp-doc-red: #ed1c24;
    }
    html:not(.dark) > body {
        color: rgb(13, 20, 30);
        background-color: rgb(255, 255, 255);
    }
    .vp-doc a {
        text-decoration: none;
    }
    html:not(.dark) .vp-doc :not(pre) > code {
        background-color: #f9f2f4;
        color: var(--vp-doc-red);
    }
    .vp-doc p {
        font-size: 15px;
    }
    .vp-doc h1:hover,
    .vp-doc h2:hover,
    .vp-doc h3:hover,
    .vp-doc h4:hover {
        color: var(--vp-doc-red);
    }
    .VPHome .image-bg {
        display: none;
    }
    .vp-doc .header-anchor {
        color: var(--vp-doc-red);
    }

custom.css 文件可以根据个人需要进行调整。

提示：配置好看的主题的关键是，在 .vitepress/config.mts 中配置 markdown 选项，主题列表已存放在了 themes.json 文件中：

markdown: {
      theme: {
          dark: 'dracula-soft',
          light: 'material-theme'
      }
 }

7.项目打包和预览

    npm run docs:build

    npm run docs:preview

8.项目部署到 GitHub Pages
打包生成静态文件，可以直接部署至服务器，或者 GitHub Pages、Gitee Pages 等平台。

走到最后一步就完成了，你学会了吗？赶紧试试吧。