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

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

2024-12-26 09:42

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

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

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

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

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

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

Rspress 的主要特性如下：

构建性能：保证足够快的启动速度，带来良好的开发体验。
MDX 支持：通过 MDX，我们可以方便地复用文档片段，以及在文档中渲染自定义的 React 组件。
文档站基础能力：包括国际化、多版本支持、全文搜索、组件库文档等。
可扩展性：内置插件系统，支持通过插件 API 来扩展框架功能。

Github：https://github.com/web-infra-dev/rspress

Astro 是一个新兴的前端框架，它专注于构建文档网站和静态网站。Astro 的设计理念是“HTML 优先”，它使用标准的 HTML、CSS 和 JavaScript 语言，让开发者可以更加自然地编写 Web 应用。

Astro 具有以下特性：

组件岛屿：一种用于构建更快网站的新型 Web 架构。
采用服务端优先的 API 设计：将昂贵的数据加载工作从用户设备上移开。
默认情况下无需 JavaScript：避免 JavaScript 运行时的开销，提高网站速度。
边缘就绪：可在任何地方部署，甚至是像 Deno 或 Cloudflare 这样的全球边缘运行时。
可定制：支持 Tailwind、MDX 和其他 100 多个集成，满足不同的需求。
UI 无关：支持多种框架，如 React、Preact、Svelte、Vue、Solid、Lit 等。

GitHub：https://github.com/withastro/astro

Docsify 是一个基于 JavaScript 的文档网站生成器。它可以将 Markdown 文件转换为漂亮的、响应式的文档网站。

Docsify 的主要特点如下：

轻量级：核心库非常小巧，只有几十 KB 大小，因此加载速度很快。
零配置：构建文档网站非常简单，不需要复杂的配置。只需将 Markdown 文件放在指定的目录中，并在 HTML 文件中引入 Docsify 库即可。
动态加载：可以根据用户的浏览行为动态加载文档内容，只在需要时才加载相关的 Markdown 文件，从而提高网站的性能和加载速度。
导航和搜索：提供了便捷的导航和搜索功能，可以帮助用户快速找到所需的文档内容。
插件支持：支持插件系统，可以扩展其功能。例如，可以添加代码高亮、图表、目录结构等插件，以增强文档网站的功能和可视化效果。

GitHub：https://github.com/docsifyjs/docsify

Gatsby 是一个基于 React 的静态网站生成器。它使用现代化的前端开发工具和技术，帮助开发者构建快速、安全和高性能的网站。

Gatsby 的主要特点如下：

静态网站生成：通过预先生成静态 HTML、CSS 和 JavaScript 文件来构建网站，这样可以提供更快的加载速度和更好的用户体验。
React 支持：基于 React 构建，利用了 React 的组件化开发模式和生态系统，使开发者可以更轻松地构建复杂的交互式界面。
数据源插件：提供了各种数据源插件，可以从不同的数据源（如 Markdown 文件、CMS、API 等）获取数据，并将其转换为可用于构建网站的格式。
强大的插件生态系统：拥有丰富的插件生态系统，开发者可以使用这些插件来扩展功能，例如添加图像优化、SEO 支持、数据分析等。
自动优化和代码分割：会自动对生成的网站进行优化，包括图像压缩、代码分割、懒加载等，以提高性能和加载速度。
部署灵活：可以将生成的静态文件部署到各种托管平台，如 Netlify、GitHub Pages、AWS S3 等。

不管那个都有他们自己有的优势，选择自己熟悉或者适合自己才是对自己有益！