🤖 AI赋能坊 - 零成本搭建个人网站

⚡ 基于 Next.js + Strapi 的可视化建站方案 | 无需代码修改 | 完全可定制

⚡ 快速开始 • 📚 文档 • 🤝 贡献指南

🎯 项目简介

AI赋能坊 是一个零成本的个人网站搭建方案，让您无需编写代码即可拥有专业的个人网站。基于 Strapi CMS 和 Next.js 构建，所有内容都可以通过可视化界面进行管理和定制。

💡 核心价值

• 💰 零成本建站：利用免费服务，无需购买服务器和域名
• 🎨 完全可定制：通过Strapi后台可视化配置所有内容
• ⚡ 开箱即用：克隆代码，简单配置即可上线
• 🔧 无需改代码：分类、标签、文章、Logo等都可后台管理
• 📱 专业外观：现代化设计，响应式布局，SEO优化

🛠️ 可定制内容

通过Strapi后台，您可以轻松管理：

• 📝 文章内容：富文本编辑器，支持图片、视频
• 🏷️ 分类标签：自定义分类和标签体系
• 🎨 网站设置：Logo、标题、描述、联系方式
• 📊 SEO配置：Meta标签、关键词、描述
• 🖼️ 媒体管理：图片上传、管理和优化

✨ 功能亮点

🎯 零门槛建站

• 可视化管理：所有内容通过Strapi后台管理，无需修改代码
• 一键部署：支持Vercel、Render等免费平台部署
• 自动更新：内容更新后网站自动刷新
• 响应式设计：自动适配手机、平板、电脑

🔧 强大的可扩展性

• 自定义分类：在后台创建任意分类结构
• 灵活标签：为文章添加多个标签，便于分类
• 品牌定制：上传Logo、设置网站标题和描述
• SEO优化：自定义每篇文章的SEO信息
• 媒体库：统一管理所有图片和文件

💰 真正的零成本

• 免费托管：Vercel前端 + Render后端
• 免费数据库：Neon PostgreSQL免费额度
• 免费域名：使用平台提供的免费域名
• 无隐藏费用：所有服务都有免费额度

🛠️ 技术栈

后端技术栈

• Strapi 4.x - 无头CMS，提供强大的内容管理能力
• PostgreSQL - 主数据库（支持Neon云数据库）
• Node.js + TypeScript - 运行时环境和类型安全

前端技术栈

• Next.js 14 - React全栈框架，支持SSR/SSG
• TypeScript - 类型安全开发
• Tailwind CSS - 实用优先的CSS框架
• Shadcn/ui - 现代化UI组件库
• Lucide React - 图标库

部署平台

• Render - 后端API部署
• Vercel - 前端应用部署
• Neon - PostgreSQL云数据库

⚡ 快速开始

环境要求

• Node.js >= 18.0.0
• npm >= 8.0.0

安装运行

# 1. 克隆项目
git clone https://github.com/jason-create-cmd/AI-Website-Open-Source.git
cd AI-Website-Open-Source

# 2. 安装依赖
npm install

# 3. 配置环境变量
cp backend/.env.example backend/.env.local
cp frontend/.env.example frontend/.env.local

# 4. 启动开发服务器
npm run dev

访问地址

• 前端网站: http://localhost:3000
• 后台管理: http://localhost:1337/admin （在这里管理所有内容）

🎨 开始定制您的网站

1. 访问后台管理：http://localhost:1337/admin
2. 创建管理员账户：首次访问时设置
3. 开始定制：
   • 📝 发布您的第一篇文章
   • 🏷️ 创建分类和标签
   • 🎨 上传Logo和设置网站信息
   • 📊 配置SEO信息

💡 提示：所有修改都会实时反映到前端网站，无需重启服务！

🎨 无代码定制指南

📝 内容管理

在Strapi后台，您可以轻松：

• 创建文章：使用富文本编辑器，支持图片、链接、代码块
• 管理分类：创建多级分类，如"AI技术"、"前端开发"等
• 添加标签：为文章打标签，如"React"、"机器学习"等
• 上传媒体：管理所有图片、文档等媒体文件

🎯 网站设置

通过"Site Setting"内容类型：

• 网站Logo：上传您的品牌Logo
• 网站标题：设置网站名称和副标题
• 联系信息：添加邮箱、社交媒体链接
• SEO配置：设置默认的Meta描述和关键词

🏷️ 分类体系

创建适合您的分类结构：

技术分享
├── 前端开发
├── 后端开发
├── AI与机器学习
└── 工具推荐

生活随笔
├── 读书笔记
├── 旅行见闻
└── 思考感悟

📊 SEO优化

每篇文章都可以单独设置：

• SEO标题：搜索引擎显示的标题
• Meta描述：搜索结果中的描述
• 关键词：提高搜索排名
• 社交分享：设置分享到社交媒体的图片和描述

📁 项目结构

AI-Website-Open-Source/
├── backend/                 # Strapi CMS后端
│   ├── src/api/            # API路由和控制器
│   ├── config/             # 配置文件
│   └── types/              # TypeScript类型定义
├── frontend/               # Next.js前端
│   ├── src/app/           # App Router页面
│   ├── src/components/    # React组件
│   ├── src/lib/          # 工具函数
│   └── src/types/        # 类型定义
├── docs/                  # 项目文档
├── scripts/              # 自动化脚本
└── docker-compose.yml    # Docker配置

📚 文档

文档	描述
⚡ 快速开始	5分钟快速体验
📦 安装指南	详细的环境搭建步骤
🚀 部署指南	生产环境部署说明
🏗️ 系统架构	技术架构和设计理念
📡 API文档	后端API接口文档
🔧 开发指南	开发环境和代码规范
🎨 组件示例	React组件使用示例

🤝 贡献

欢迎贡献代码！请查看 CONTRIBUTING.md 了解详细信息。

📄 许可证

本项目采用 MIT 许可证 - 查看 LICENSE 文件了解详情。

---

_{用 ❤️ 为AI开发者社区打造}