AI产品官网必备，教你用React构建超炫酷的产品官网和文档首页LandingPage

写在前面

文章开始之前先给大家介绍我最新开发Java生态的AIGC产品：LangChat

项目官网：http://langchat.cn

开源地址：https://github.com/TyCoding/langchat

LangChat是Java生态下企业级AIGC项目解决方案，在RBAC权限体系的基础上，集成AIGC大模型功能，帮助企业快速定制AI知识库、企业AI机器人。接入了 OpenAI / Gemini / Ollama / Azure / 智谱 / 阿里通义大模型 / 百度千帆大模型等国内外数十家AI大模型。

期待大家的star、fork和持续关注，感兴趣的朋友可以进入LangChat交流群

image-20240718132706910

技术选型

几种常见的官网构建方案：

1. HTML、Tailwind、Vue直接构建（优点：轻量扩展性高；缺点：除了优点全是缺点，例如各种组件、响应式都要自己写）
2. Hexo：Hexo可以根据Markdown文本生成静态博客，适合构建博客发布文章，但是并没有首页Landing Page的方案。Hexo社区提供了各种博客主题方案，例如我的博客就是Hexo构建的：http://tycoding.cn
3. Vitepress：基于Vue和Vite构建的，非常适合Vue用户使用，支持在Markdown文件中使用Vue组件，提供项目首页布局方案
4. Rspress：基本和Vitepress完全一样，只不过Rspress基于React构建，它支持MDX的方式插入React组件
5. Nextra：基于React构建，相比较上面的方案，Nextra的灵活程度要更高，支持更多的自定义组件布局方案

Nextra

LangChat项目官网：http://langchat.cn 就是使用Nextra构建的，非常炫酷吧！

首先我要推荐Nextra，综合使用下来，Nextra的灵活程度更高，同样Nextra支持MDX方式写文档页面，支持使用.tsx作为页面组件。除此之外，因为Nextra基于NextJS构建，同样NextJS的一些特性Nextra也支持，例如：1. Router路由策略 2. i18n国际化

官网：https://nextra.site/

image-20240718140733350

image-20240718140752774

Nextra提供了两种主题布局：1.博客、2.文档。

详细的实现效果可以查看：

http://langchat.cn

image-20240718132706910

快速开始

npm i next react react-dom nextra nextra-theme-docs

Hexo

Hexo用于构建博客，他可以根据Markdown文件快速构建静态HTML页面，作为博客系统的首选；简洁快速是Hexo最大的优势。

官网地址：https://hexo.io/zh-cn/

Hexo社区提供了各种主题方案，实践效果可以查看我的博客：http://tycoding.cn ：

image-20240718142301647

Vitepress

Vitepress是基于Vue和Vite构建的，优势就是和Vue生态的融合非常好，可以在原有Markdown文件的基础上插入任意Vue组件，这其实和MDX语法类似。

官网地址：https://vitepress.dev/zh/

image-20240718142631847

Rspress

Rspress是新晋的静态站点生成器，他和Vitepress非常像，区别是Rspress是基于React构建的，支持MDX语法，相比较而言，Vitepress的生态要更成熟一些。

官网地址：https://rspress.dev/zh/

image-20240718143114570

联系

• 博客: https://tycoding.cn
• Github: https://github.com/tycoding
• 邮箱: langchat@outlook.com