10分钟快速搭建个人博客、文档网站！

最新推荐文章于 2024-05-15 20:31:15 发布

骑着牛的奇兵

最新推荐文章于 2024-05-15 20:31:15 发布

阅读量1.1k

点赞数 35

文章标签：前端框架前端 vue

本文链接：https://blog.csdn.net/we2006mo/article/details/135520508

版权

本文来分享 8 个现代化前端工具，帮你快速生成个人博客、文档网站！

VitePress

VitePress 是一款静态站点生成器，专为构建快速、以内容为中心的网站而设计。简而言之，VitePress 获取用 Markdown 编写的源内容，为其应用主题，并生成可以轻松部署在任何地方的静态 HTML 页面。VitePress 是 Vuepress 的更现代化、高效和灵活的替代品，适用于构建快速、易于定制的文档站点。

VitePress 附带一个专为技术文档设计的默认主题。它为 Vite、Rollup、Pinia、VueUse、Vitest、D3、UnoCSS、Iconify 等文档提供了支持。Vue.js 官方文档也基于 VitePress，但使用多个翻译之间共享的自定义主题。

VitePress 具有以下特点：

专注于内容：轻松使用Markdown创建漂亮的文档站点。
享受 Vite 开发体验：即时启动服务器，快速更新，利用 Vite 生态系统插件。
使用 Vue 进行自定义：直接在Markdown中使用Vue语法和组件，或使用Vue构建自定义主题。
快速发布网站：通过静态HTML实现快速初始加载，并通过客户端路由实现快速后续导航。

GitHub：https://github.com/vuejs/vitepress

VuePress

VuePress 是 Vue 团队开源的一款Vue 驱动的静态网站生成器，它由两部分组成：第一部分是一个极简静态网站生成器，它包含由 Vue 驱动的主题系统和插件 API，另一个部分是为编写技术文档而优化的默认主题，它的诞生初衷是为了支持 Vue 及其子项目的文档需求。

注意：Vue 团队目前更推荐使用 VitePress 来构建静态网站。

每一个由 VuePress 生成的页面都带有预渲染好的 HTML，也因此具有非常好的加载性能和搜索引擎优化（SEO）。同时，一旦页面被加载，Vue 将接管这些静态内容，并将其转换成一个完整的单页应用（SPA），其他的页面则会只在用户浏览到的时候才按需加载。

VuePress 的特点如下：

简洁至上：以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。
Vue 驱动：享受 Vue + webpack 的开发体验，可以在 Markdown 中使用 Vue 组件，又可以使用 Vue 来开发自定义主题。
高性能：VuePress 会为每个页面预渲染生成静态的 HTML，同时，每个页面被加载的时候，将作为 SPA 运行。

GitHub：https://github.com/vuejs/vuepress

Docusaurus

Docusaurus是 Facebook 开源的一个开源的静态站点生成器，旨在帮助用户快速构建美观、易于维护的文档站点。它提供了一套全面的工具和功能，使用户能够专注于编写内容，而无需花费大量时间和精力来构建和设计网站。

Docusaurus基于现代化的技术栈，使用React作为主要的前端框架，并结合了其他工具和库，例如Webpack、Babel和Markdown等。它支持使用Markdown编写文档，并通过简单的文件组织结构来管理和展示文档内容。

Docusaurus提供了许多实用的功能，如响应式布局、快速导航、搜索功能、版本控制、国际化支持等。它还提供了可自定义的主题和插件系统，使用户能够灵活地定制和扩展站点的外观和功能。

GitHub：https://github.com/facebook/docusaurus

Dumi

dumi 是蚂蚁集团开源的一款为组件开发场景而生的静态站点框架，与 father 一起为开发者提供一站式的组件开发体验，father 负责组件源码构建，而 dumi 负责组件开发及组件文档生成。

dumi 具有以下特性：

更好的编译性能：通过结合使用 Umi 4 MFSU、esbuild、SWC、持久缓存等方案，带来比 dumi 1.x 更快的编译速度
内置全文搜索：不需要接入任何三方服务，标题、正文、demo 等内容均可被搜索，支持多关键词搜索，且不会带来产物体积的增加
全新主题系统：为主题包增加插件、国际化等能力的支持，且参考 Docusaurus 为主题用户提供局部覆盖能力，更强更易用
约定式路由增强：通过拆分路由概念、简化路由配置等方式，让路由生成一改 dumi 1.x 的怪异、繁琐，更加符合直觉
资产元数据 2.0：在 1.x 及 JSON Schema 的基础上对资产属性定义结构进行全新设计，为资产的流通提供更多可能
继续为组件研发而生：提供与全新的 NPM 包研发工具 father 4 集成的脚手架，为开发者提供一站式的研发体验

GitHub：https://github.com/umijs/dumi

Rspress

Rspress 是字节跳动开源的一个基于 Rspack 的静态站点生成器，基于 React 框架进行渲染，内置了一套默认的文档主题，可以通过 Rspress 来快速搭建一个文档站点，同时也可以自定义主题，来满足你的个性化静态站需求，比如博客站、产品主页等，也可以接入官方提供的相应插件来方便地搭建组件库文档。

Rspress 的主要特性如下：