feat:上线
This commit is contained in:
Zopt
parent
c955090b2d
commit
0e4bf6fb32
6
.gitignore
vendored
6
.gitignore
vendored
@ -1,6 +1,7 @@
|
|||||||
# Dependencies
|
# Dependencies
|
||||||
node_modules/
|
node_modules/
|
||||||
npm-debug.log*
|
npm-debug.log*
|
||||||
|
pnpm-debug.log*
|
||||||
yarn-debug.log*
|
yarn-debug.log*
|
||||||
yarn-error.log*
|
yarn-error.log*
|
||||||
|
|
||||||
@ -8,6 +9,8 @@ yarn-error.log*
|
|||||||
.next/
|
.next/
|
||||||
out/
|
out/
|
||||||
build/
|
build/
|
||||||
|
.turbo/
|
||||||
|
*.tsbuildinfo
|
||||||
|
|
||||||
# Production
|
# Production
|
||||||
dist/
|
dist/
|
||||||
@ -31,6 +34,7 @@ Thumbs.db
|
|||||||
|
|
||||||
# Logs
|
# Logs
|
||||||
*.log
|
*.log
|
||||||
|
.eslintcache
|
||||||
|
|
||||||
# Runtime data
|
# Runtime data
|
||||||
pids
|
pids
|
||||||
@ -60,4 +64,4 @@ jspm_packages/
|
|||||||
.vercel
|
.vercel
|
||||||
|
|
||||||
# Netlify
|
# Netlify
|
||||||
.netlify
|
.netlify
|
||||||
|
|||||||
468
README.md
468
README.md
@ -1,376 +1,92 @@
|
|||||||
# Pinnovate Cloud - 云加速服务平台
|
# Pinnovate Cloud
|
||||||
|
|
||||||
一个现代化的云加速服务网站，基于 Next.js + TypeScript + TailwindCSS 构建，提供完整的云加速服务展示和客户管理功能。
|
Pinnovate Cloud 是一个基于 Next.js + TypeScript + TailwindCSS 搭建的云加速/网络优化服务站点，涵盖产品能力展示、定价、案例、新闻资讯与在线联系等模块，可静态导出或按 SSR 部署。
|
||||||
|
|
||||||
## ✨ 功能特性
|
## 功能概览
|
||||||
|
- 页面：首页（Hero、优势、流程、CTA、客户推荐）、产品与服务、定价、成功案例、新闻资讯、关于我们、联系我们、登录占位页。
|
||||||
### 🏠 页面功能
|
- 内容：content/news/*.md 存放新闻 Markdown，通过 lib/content.ts + gray-matter 解析 frontmatter，marked 渲染详情，构建时静态生成。
|
||||||
- **首页** - 产品介绍、核心优势、客户证言
|
- 表单：components/Contact.tsx 集成 Formspree（https://formspree.io/f/xkgvgzal）提交，带表单校验、提交状态与联系方式卡片。
|
||||||
- **产品特性** - 详细的产品功能展示和技术架构
|
- 组件：导航、页脚、CTA、案例列表、新闻列表、核心优势等复用组件，Tailwind 响应式布局。
|
||||||
- **定价方案** - 灵活的定价计划和优惠信息
|
- 部署：支持静态导出、SSR、Docker 镜像，内置 Vercel/Netlify 配置、Nginx 示例与 PowerShell 一键部署脚本。
|
||||||
- **客户案例** - 成功案例展示和客户证言
|
|
||||||
- **新闻资讯** - 技术更新、产品发布、行业动态
|
## 技术栈
|
||||||
- **关于我们** - 公司介绍、团队展示、发展历程
|
- Next.js 15 / React 19、TypeScript
|
||||||
- **联系我们** - 多种联系方式、在线表单、常见问题
|
- TailwindCSS、Lucide React 图标
|
||||||
|
- gray-matter + marked 解析 Markdown 内容
|
||||||
### 🎨 设计特色
|
- 部署与运维：Dockerfile、docker-compose.yml、nginx.conf、vercel.json、netlify.toml、deploy.ps1
|
||||||
- **现代化 UI** - 采用渐变背景、卡片设计、悬停效果
|
|
||||||
- **响应式布局** - 完美适配桌面、平板、手机设备
|
## 目录结构
|
||||||
- **交互体验** - 平滑动画、加载状态、用户反馈
|
`
|
||||||
- **品牌统一** - 一致的设计语言和色彩体系
|
.
|
||||||
|
├─pages/ # 路由页（首页、features、pricing、cases、news、about、contact、login 等）
|
||||||
### 🛠 技术栈
|
│ └─news/[slug].tsx # 新闻详情的静态路由
|
||||||
- **框架**: Next.js 15+ (React 19+)
|
├─components/ # UI 组件（Navbar、Hero、Features、CaseList、NewsList、Contact 等）
|
||||||
- **语言**: TypeScript
|
├─content/news/ # 新闻 Markdown 数据源
|
||||||
- **样式**: TailwindCSS
|
├─lib/content.ts # 内容读取与 frontmatter 解析
|
||||||
- **图标**: Lucide React
|
├─public/ # 图片与静态资源
|
||||||
- **内容管理**: Markdown + Gray Matter
|
├─styles/ # 全局样式
|
||||||
- **表单处理**: Formspree
|
├─deploy.ps1 # 多平台一键部署脚本
|
||||||
|
├─Dockerfile / docker-compose.yml / nginx.conf
|
||||||
## 🚀 快速开始
|
├─netlify.toml / vercel.json / DEPLOYMENT.md
|
||||||
|
└─package.json # 脚本与依赖
|
||||||
### 环境要求
|
`
|
||||||
- Node.js 18+
|
|
||||||
- npm 或 yarn
|
## 快速开始
|
||||||
|
- 环境：Node.js 18+，npm
|
||||||
### 安装依赖
|
- 安装依赖：
|
||||||
```bash
|
pm install
|
||||||
npm install
|
- 本地开发：
|
||||||
```
|
pm run dev，访问 http://localhost:3000
|
||||||
|
- 生产构建：
|
||||||
### 本地开发
|
pm run build
|
||||||
```bash
|
- 生产启动：
|
||||||
npm run dev
|
pm run start
|
||||||
```
|
|
||||||
访问 http://localhost:3000
|
## 内容维护（新闻）
|
||||||
|
- 在 content/news/ 下新增 .md 文件即可被列表与详情读取，示例 frontmatter：
|
||||||
### 快速部署
|
`md
|
||||||
|
---
|
||||||
#### 使用 PowerShell 脚本（推荐）
|
title: 标题
|
||||||
```powershell
|
date: 2025-09-15
|
||||||
# 静态网站部署
|
summary: 一句话摘要
|
||||||
.\deploy.ps1 -Platform static
|
tags: [CDN, 性能, 安全]
|
||||||
|
---
|
||||||
# Vercel 部署
|
|
||||||
.\deploy.ps1 -Platform vercel
|
正文内容，支持 Markdown 语法。
|
||||||
|
`
|
||||||
# Netlify 部署
|
- 构建时会按照 date 降序生成新闻列表，[slug].tsx 用 marked 渲染正文。
|
||||||
.\deploy.ps1 -Platform netlify
|
|
||||||
|
## 常用脚本
|
||||||
# GitHub Pages 部署
|
-
|
||||||
.\deploy.ps1 -Platform github
|
pm run dev：本地开发
|
||||||
|
-
|
||||||
# Docker 部署
|
pm run build /
|
||||||
.\deploy.ps1 -Platform docker
|
pm run start：SSR 构建与生产运行
|
||||||
```
|
-
|
||||||
|
pm run build:static /
|
||||||
#### 手动部署
|
pm run export：静态导出到 out/
|
||||||
```bash
|
-
|
||||||
# 1. 生成静态文件
|
pm run preview：构建后本地预览
|
||||||
npm run build:static
|
-
|
||||||
|
pm run type-check、
|
||||||
# 2. 部署到 Vercel (推荐)
|
pm run lint：类型与代码质量检查
|
||||||
npx vercel
|
-
|
||||||
|
pm run docker:build、
|
||||||
# 3. 或部署到 Netlify
|
pm run docker:run：Docker 构建与运行
|
||||||
npx netlify deploy --dir=out --prod
|
-
|
||||||
```
|
pm run deploy:vercel、
|
||||||
|
pm run deploy:netlify：云平台部署命令占位
|
||||||
#### 其他部署命令
|
|
||||||
```bash
|
## 部署指引
|
||||||
# 类型检查
|
- 静态站点：运行
|
||||||
npm run type-check
|
pm run build:static，将 out/ 部署到静态托管（Netlify、GitHub Pages 等）。
|
||||||
|
- SSR：
|
||||||
# 代码检查
|
pm run build && npm run start，或使用 Dockerfile/docker-compose.yml 与
|
||||||
npm run lint
|
ginx.conf。
|
||||||
|
- 一键脚本：PowerShell 执行 ./deploy.ps1 -Platform static|vercel|netlify|github|docker。
|
||||||
# 清理构建文件
|
- Vercel/Netlify：可直接使用仓库内 ercel.json、
|
||||||
npm run clean
|
etlify.toml，或通过脚本触发。
|
||||||
|
|
||||||
# 预览生产版本
|
## 配置提示
|
||||||
npm run preview
|
- 联系表单收件端点在 components/Contact.tsx 中可替换。
|
||||||
|
- Tailwind 主题色在 ailwind.config.js 中调整，静态资源放置于 public/。
|
||||||
# Vercel 部署
|
|
||||||
npm run deploy:vercel
|
|
||||||
|
|
||||||
# Netlify 部署
|
|
||||||
npm run deploy:netlify
|
|
||||||
|
|
||||||
# Docker 构建
|
|
||||||
npm run docker:build
|
|
||||||
|
|
||||||
# Docker 运行
|
|
||||||
npm run docker:run
|
|
||||||
```
|
|
||||||
|
|
||||||
### 构建与部署
|
|
||||||
|
|
||||||
#### 静态站点生成 (SSG)
|
|
||||||
```bash
|
|
||||||
# 生成静态文件
|
|
||||||
npm run build:static
|
|
||||||
|
|
||||||
# 或者使用传统方式
|
|
||||||
npm run export
|
|
||||||
```
|
|
||||||
|
|
||||||
静态文件将生成在 `out/` 目录中，可以直接部署到任何静态托管服务。
|
|
||||||
|
|
||||||
#### 服务器端渲染 (SSR)
|
|
||||||
```bash
|
|
||||||
# 构建生产版本
|
|
||||||
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` 中修改品牌色彩：
|
|
||||||
```javascript
|
|
||||||
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. 生成静态文件
|
|
||||||
```bash
|
|
||||||
# 生成静态文件到 out/ 目录
|
|
||||||
npm run build:static
|
|
||||||
```
|
|
||||||
|
|
||||||
#### 2. 部署到各种平台
|
|
||||||
|
|
||||||
**Vercel (推荐)**
|
|
||||||
```bash
|
|
||||||
# 安装 Vercel CLI
|
|
||||||
npm i -g vercel
|
|
||||||
|
|
||||||
# 部署到 Vercel
|
|
||||||
vercel
|
|
||||||
|
|
||||||
# 或者直接连接 GitHub 仓库自动部署
|
|
||||||
```
|
|
||||||
|
|
||||||
**Netlify**
|
|
||||||
```bash
|
|
||||||
# 方法1: 拖拽 out/ 目录到 Netlify
|
|
||||||
# 方法2: 连接 GitHub 仓库，设置构建命令: npm run build:static
|
|
||||||
# 方法3: 使用 Netlify CLI
|
|
||||||
npm i -g netlify-cli
|
|
||||||
netlify deploy --dir=out
|
|
||||||
```
|
|
||||||
|
|
||||||
**GitHub Pages**
|
|
||||||
```bash
|
|
||||||
# 1. 将 out/ 目录内容推送到 gh-pages 分支
|
|
||||||
# 2. 在仓库设置中启用 GitHub Pages
|
|
||||||
# 3. 选择 gh-pages 分支作为源
|
|
||||||
```
|
|
||||||
|
|
||||||
**AWS S3 + CloudFront**
|
|
||||||
```bash
|
|
||||||
# 1. 将 out/ 目录内容上传到 S3 存储桶
|
|
||||||
# 2. 配置 CloudFront 分发
|
|
||||||
# 3. 设置自定义域名和 SSL 证书
|
|
||||||
```
|
|
||||||
|
|
||||||
**Nginx 静态托管**
|
|
||||||
```bash
|
|
||||||
# 1. 将 out/ 目录内容复制到 Nginx 网站根目录
|
|
||||||
# 2. 配置 Nginx 虚拟主机
|
|
||||||
# 3. 启用 gzip 压缩和缓存
|
|
||||||
```
|
|
||||||
|
|
||||||
### 服务器端部署
|
|
||||||
|
|
||||||
#### Docker 部署
|
|
||||||
```dockerfile
|
|
||||||
# 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"]
|
|
||||||
```
|
|
||||||
|
|
||||||
```bash
|
|
||||||
# 构建和运行
|
|
||||||
docker build -t pinnovate-cloud .
|
|
||||||
docker run -p 3000:3000 pinnovate-cloud
|
|
||||||
```
|
|
||||||
|
|
||||||
#### PM2 部署
|
|
||||||
```bash
|
|
||||||
# 安装 PM2
|
|
||||||
npm i -g pm2
|
|
||||||
|
|
||||||
# 构建项目
|
|
||||||
npm run build
|
|
||||||
|
|
||||||
# 使用 PM2 启动
|
|
||||||
pm2 start npm --name "pinnovate-cloud" -- start
|
|
||||||
|
|
||||||
# 保存 PM2 配置
|
|
||||||
pm2 save
|
|
||||||
pm2 startup
|
|
||||||
```
|
|
||||||
|
|
||||||
### 部署配置
|
|
||||||
|
|
||||||
#### 环境变量
|
|
||||||
创建 `.env.production` 文件：
|
|
||||||
```env
|
|
||||||
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](LICENSE) 文件
|
|
||||||
|
|
||||||
## 🤝 贡献
|
|
||||||
|
|
||||||
欢迎提交 Issue 和 Pull Request 来改进项目！
|
|
||||||
|
|
||||||
## 📞 联系我们
|
|
||||||
|
|
||||||
- **邮箱**: support@pinnovatecloud.com
|
|
||||||
- **WhatsApp**: +1 917-402-9875
|
|
||||||
- **Telegram**: @pinnovatecloud
|
|
||||||
|
|||||||
BIN
testfile.txt
Normal file
BIN
testfile.txt
Normal file
Binary file not shown.
Loading…
Reference in New Issue
Block a user