8.9 KiB
8.9 KiB
Pinnovate Cloud - 云加速服务平台
一个现代化的云加速服务网站，基于 Next.js + TypeScript + TailwindCSS 构建，提供完整的云加速服务展示和客户管理功能。
✨ 功能特性
🏠 页面功能
- 首页 - 产品介绍、核心优势、客户证言
- 产品特性 - 详细的产品功能展示和技术架构
- 定价方案 - 灵活的定价计划和优惠信息
- 客户案例 - 成功案例展示和客户证言
- 新闻资讯 - 技术更新、产品发布、行业动态
- 关于我们 - 公司介绍、团队展示、发展历程
- 联系我们 - 多种联系方式、在线表单、常见问题
🎨 设计特色
- 现代化 UI - 采用渐变背景、卡片设计、悬停效果
- 响应式布局 - 完美适配桌面、平板、手机设备
- 交互体验 - 平滑动画、加载状态、用户反馈
- 品牌统一 - 一致的设计语言和色彩体系
🛠 技术栈
- 框架: Next.js 15+ (React 19+)
- 语言: TypeScript
- 样式: TailwindCSS
- 图标: Lucide React
- 内容管理: Markdown + Gray Matter
- 表单处理: Formspree
🚀 快速开始
环境要求
- Node.js 18+
- npm 或 yarn
安装依赖
npm install
本地开发
npm run dev
快速部署
使用 PowerShell 脚本（推荐）
# 静态网站部署
.\deploy.ps1 -Platform static
# Vercel 部署
.\deploy.ps1 -Platform vercel
# Netlify 部署
.\deploy.ps1 -Platform netlify
# GitHub Pages 部署
.\deploy.ps1 -Platform github
# Docker 部署
.\deploy.ps1 -Platform docker
手动部署
# 1. 生成静态文件
npm run build:static
# 2. 部署到 Vercel (推荐)
npx vercel
# 3. 或部署到 Netlify
npx netlify deploy --dir=out --prod
其他部署命令
# 类型检查
npm run type-check
# 代码检查
npm run lint
# 清理构建文件
npm run clean
# 预览生产版本
npm run preview
# Vercel 部署
npm run deploy:vercel
# Netlify 部署
npm run deploy:netlify
# Docker 构建
npm run docker:build
# Docker 运行
npm run docker:run
构建与部署
静态站点生成 (SSG)
# 生成静态文件
npm run build:static
# 或者使用传统方式
npm run export
静态文件将生成在 out/ 目录中，可以直接部署到任何静态托管服务。
服务器端渲染 (SSR)
# 构建生产版本
npm run build
# 启动生产服务器
npm start
📁 项目结构
pinnovate-cloud/
├── components/ # 可复用组件
│ ├── Navbar.tsx # 导航栏
│ ├── Hero.tsx # 首页横幅
│ ├── Features.tsx # 产品特性
│ ├── Pricing.tsx # 定价方案
│ ├── CaseList.tsx # 客户案例
│ ├── NewsList.tsx # 新闻列表
│ ├── About.tsx # 关于我们
│ ├── Contact.tsx # 联系表单
│ ├── Cta.tsx # 行动号召
│ ├── Footer.tsx # 页脚
│ └── ...
├── pages/ # 页面路由
│ ├── index.tsx # 首页
│ ├── features.tsx # 产品特性页
│ ├── pricing.tsx # 定价方案页
│ ├── cases.tsx # 客户案例页
│ ├── news.tsx # 新闻资讯页
│ ├── about.tsx # 关于我们页
│ ├── contact.tsx # 联系我们页
│ ├── news/
│ │ └── [slug].tsx # 新闻详情页
│ └── _app.tsx # 应用入口
├── content/ # 内容管理
│ └── news/ # 新闻内容
│ ├── _example.md
│ ├── product-launch.md
│ └── ...
├── lib/ # 工具库
│ └── content.ts # 内容处理
├── public/ # 静态资源
│ ├── logo.png
│ ├── hero-graphic.png
│ └── ...
├── styles/ # 样式文件
│ └── globals.css
├── tailwind.config.js # Tailwind 配置
├── next.config.js # Next.js 配置
├── tsconfig.json # TypeScript 配置
├── package.json # 项目依赖
├── vercel.json # Vercel 部署配置
├── netlify.toml # Netlify 部署配置
├── Dockerfile # Docker 容器配置
├── docker-compose.yml # Docker Compose 配置
├── nginx.conf # Nginx 服务器配置
└── .github/workflows/ # GitHub Actions 工作流
└── deploy.yml
🎯 核心功能
内容管理
- Markdown 支持 - 使用 Markdown 编写新闻内容
- 自动生成 - 静态页面自动生成和更新
- SEO 优化 - 自动生成 sitemap 和 meta 标签
表单处理
- 联系表单 - 集成 Formspree 处理表单提交
- 表单验证 - 客户端和服务端验证
- 用户反馈 - 提交状态和成功提示
搜索功能
- 实时搜索 - 新闻内容实时搜索
- 分类筛选 - 按标签和分类筛选
- 排序功能 - 按日期和标题排序
🎨 自定义配置
品牌信息
在 tailwind.config.js 中修改品牌色彩：
colors: {
primary: '#333333', // 主色调
background: '#FFFFFF', // 背景色
accent: '#006AFF', // 强调色
}
联系信息
在 components/Contact.tsx 和 components/Footer.tsx 中更新：
- WhatsApp: +1 917-402-9875
- 邮箱: support@pinnovatecloud.com
- Telegram: @pinnovatecloud
内容更新
- 新闻内容：在
content/news/目录下添加.md文件 - 客户案例：在
components/CaseList.tsx中更新案例数据 - 产品特性：在
components/Features.tsx中修改特性列表
📱 响应式设计
网站采用移动优先的响应式设计：
- 手机端 (< 768px) - 单列布局，优化触摸操作
- 平板端 (768px - 1024px) - 双列布局，平衡内容展示
- 桌面端 (> 1024px) - 多列布局，充分利用屏幕空间
🚀 部署建议
静态站点部署 (推荐)
1. 生成静态文件
# 生成静态文件到 out/ 目录
npm run build:static
2. 部署到各种平台
Vercel (推荐)
# 安装 Vercel CLI
npm i -g vercel
# 部署到 Vercel
vercel
# 或者直接连接 GitHub 仓库自动部署
Netlify
# 方法1: 拖拽 out/ 目录到 Netlify
# 方法2: 连接 GitHub 仓库，设置构建命令: npm run build:static
# 方法3: 使用 Netlify CLI
npm i -g netlify-cli
netlify deploy --dir=out
GitHub Pages
# 1. 将 out/ 目录内容推送到 gh-pages 分支
# 2. 在仓库设置中启用 GitHub Pages
# 3. 选择 gh-pages 分支作为源
AWS S3 + CloudFront
# 1. 将 out/ 目录内容上传到 S3 存储桶
# 2. 配置 CloudFront 分发
# 3. 设置自定义域名和 SSL 证书
Nginx 静态托管
# 1. 将 out/ 目录内容复制到 Nginx 网站根目录
# 2. 配置 Nginx 虚拟主机
# 3. 启用 gzip 压缩和缓存
服务器端部署
Docker 部署
# Dockerfile
FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production
COPY . .
RUN npm run build
EXPOSE 3000
CMD ["npm", "start"]
# 构建和运行
docker build -t pinnovate-cloud .
docker run -p 3000:3000 pinnovate-cloud
PM2 部署
# 安装 PM2
npm i -g pm2
# 构建项目
npm run build
# 使用 PM2 启动
pm2 start npm --name "pinnovate-cloud" -- start
# 保存 PM2 配置
pm2 save
pm2 startup
部署配置
环境变量
创建 .env.production 文件：
NODE_ENV=production
NEXT_PUBLIC_SITE_URL=https://yourdomain.com
NEXT_PUBLIC_API_URL=https://api.yourdomain.com
性能优化
- 启用 CDN 加速
- 配置图片压缩
- 启用 Gzip 压缩
- 设置适当的缓存策略
部署配置文件
项目包含多种部署配置，可根据需要选择：
Vercel 部署
vercel.json- Vercel 平台配置- 支持自动部署和预览
- 包含安全头和缓存策略
Netlify 部署
netlify.toml- Netlify 平台配置- 支持表单处理和重定向
- 包含构建命令和环境变量
Docker 部署
Dockerfile- 多阶段构建配置docker-compose.yml- 容器编排配置nginx.conf- Nginx 服务器配置- 支持生产环境部署
GitHub Actions
.github/workflows/deploy.yml- 自动部署工作流- 支持 GitHub Pages 部署
- 包含构建和部署步骤
监控和维护
- 使用 Vercel Analytics 或 Google Analytics
- 配置错误监控 (Sentry)
- 设置性能监控
- 定期更新依赖包
📄 许可证
MIT License - 详见 LICENSE 文件
🤝 贡献
欢迎提交 Issue 和 Pull Request 来改进项目！
📞 联系我们
- 邮箱: support@pinnovatecloud.com
- WhatsApp: +1 917-402-9875
- Telegram: @pinnovatecloud