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

零点君今天分享 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实现快速初始加载,并通过客户端路由实现快速后续导航。

vitepress

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 运行。

vuepress

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

Docusaurus

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

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

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

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 集成的脚手架,为开发者提供一站式的研发体验

Dumi

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

Rspress

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

Rspress 的主要特性如下:

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

Rspress

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

Astro

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

Astro 具有以下特性:

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

Astro

GitHubhttps://github.com/withastro/astro

Docsify

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

Docsify 的主要特点如下:

  • 轻量级:核心库非常小巧,只有几十 KB 大小,因此加载速度很快。

  • 零配置:构建文档网站非常简单,不需要复杂的配置。只需将 Markdown 文件放在指定的目录中,并在 HTML 文件中引入 Docsify 库即可。

  • 动态加载:可以根据用户的浏览行为动态加载文档内容,只在需要时才加载相关的 Markdown 文件,从而提高网站的性能和加载速度。

  • 导航和搜索:提供了便捷的导航和搜索功能,可以帮助用户快速找到所需的文档内容。

  • 插件支持:支持插件系统,可以扩展其功能。例如,可以添加代码高亮、图表、目录结构等插件,以增强文档网站的功能和可视化效果。

Docsify

GitHubhttps://github.com/docsifyjs/docsify

Gatsby

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

Gatsby 的主要特点如下:

  • 静态网站生成:通过预先生成静态 HTML、CSS 和 JavaScript 文件来构建网站,这样可以提供更快的加载速度和更好的用户体验。

  • React 支持:基于 React 构建,利用了 React 的组件化开发模式和生态系统,使开发者可以更轻松地构建复杂的交互式界面。

  • 数据源插件:提供了各种数据源插件,可以从不同的数据源(如 Markdown 文件、CMS、API 等)获取数据,并将其转换为可用于构建网站的格式。

  • 强大的插件生态系统:拥有丰富的插件生态系统,开发者可以使用这些插件来扩展功能,例如添加图像优化、SEO 支持、数据分析等。

  • 自动优化和代码分割:会自动对生成的网站进行优化,包括图像压缩、代码分割、懒加载等,以提高性能和加载速度。

  • 部署灵活:可以将生成的静态文件部署到各种托管平台,如 Netlify、GitHub Pages、AWS S3 等。

Gatsby

GitHubhttps://github.com/gatsbyjs/gatsby

标签

发表评论