跳到主要内容
版本：2025年夏季她行活动

开发并部署个人网站

课程简介

在本课程中，您将学习如何使用 Gemini CLI 快速开发和部署一个专业的个人网站。从环境配置到网站上线，全程使用 AI 辅助，让网站开发变得简单高效。

🎯 学习目标​

完成本课程后，您将能够：

🏗️

项目搭建

使用 Vercel 模板快速启动项目，通过 Gemini CLI 配置开发环境

🎨

内容定制

利用 AI 进行设计优化，打造独特的个人品牌展示

🚀

一键部署

掌握现代化的部署流程，让网站快速上线

📈

持续优化

学会使用 AI 持续改进网站性能和用户体验

💼 为什么需要个人网站？​

🌟 专业形象展示

一个精心设计的个人网站是您专业能力的最佳证明，让您在求职和商务合作中脱颖而出。

🎯 个人品牌建设

通过网站展示您的独特价值，建立可识别的个人品牌，增强行业影响力。

📚 作品集中展示

将您的项目、文章、成就集中展示，方便他人快速了解您的能力和经历。

🔗 网络连接中心

整合所有社交媒体和专业平台链接，成为您在线身份的统一入口。

🛠️ 项目开发环境配置​

智能环境检测与配置​

使用 Gemini CLI 可以智能分析项目需求，自动配置最适合的开发环境。

您：我要开发一个 Next.js 个人网站项目，这是我的 package.json：
{
"name": "personal-portfolio",
"version": "0.1.0",
"dependencies": {
  "next": "14.0.0",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "tailwindcss": "^3.3.0",
  "framer-motion": "^10.16.0"
}
}
请帮我配置开发环境。

Gemini：我来帮您配置 Next.js 项目的开发环境。

🔍 分析项目需求...
- 框架：Next.js 14
- UI：React 18 + Tailwind CSS
- 动画：Framer Motion

📦 需要安装的工具：

全局安装（系统级）：
✓ Node.js 18+ LTS - JavaScript 运行环境
✓ npm/yarn/pnpm - 包管理器
✓ Git - 版本控制

项目级安装（已在 package.json 中）：
✓ 所有依赖都是项目级的，很好！

🛠️ 开始配置...

1. 检查 Node.js 版本
 当前版本：v18.17.0 ✓

2. 安装项目依赖
 执行: npm install
 
3. 配置开发工具
 - 创建 .prettierrc
 - 配置 ESLint
 - 设置 VS Code 工作区

✓ 环境配置完成！运行 npm run dev 启动开发服务器。
最佳实践

全局 vs 项目级安装原则：

  • 全局安装：系统工具、CLI 工具（如 Node.js、Git、Python）
  • 项目级安装：所有项目依赖、库、框架
  • 使用虚拟环境：Python 项目务必使用 venv，Node.js 项目依赖自动隔离

📁 网站静态资料准备​

在开始开发之前，准备好所有需要展示的内容至关重要。

📋 内容清单

📄 求职简历

  • 最新的 PDF 版本
  • 结构化的文本内容
  • 关键成就和技能点

✍️ 过往文章

  • 技术博客文章
  • 项目案例分析
  • 行业见解分享

🔗 社交媒体

  • LinkedIn 个人主页
  • GitHub 仓库链接
  • Twitter/X 账号

🎨 作品集资料

  • 项目截图和演示
  • 设计作品展示
  • 代码示例片段

📸 多媒体素材

  • 专业头像照片
  • 项目演示视频
  • 活动现场照片

🌟 特色内容

  • 获奖证书
  • 推荐信
  • 个人故事
内容准备技巧
  • 高质量优于数量：精选最能代表您能力的内容
  • 保持更新：定期更新简历和作品集
  • 优化格式：图片使用 WebP 格式，视频考虑压缩
  • 隐私保护：避免展示敏感个人信息

🎨 选择心仪模板​

Vercel 模板库探索​

🌐 访问 Vercel 模板库

前往 https://vercel.com/templates 探索丰富的模板选择

💼 Portfolio 作品集

专为展示个人作品设计，适合设计师、开发者

📝 Blog 博客

内容为主的模板，适合写作者和思想分享者

🚀 Landing Page

单页面展示，适合产品推广或个人介绍

🏢 Business 商务

专业商务风格，适合咨询顾问或自由职业者

推荐模板：Magic Portfolio​

✨ Magic Portfolio for Next.js

🎯 特点
  • 现代化设计，响应式布局
  • 流畅的动画效果
  • SEO 优化
  • 易于定制
🛠️ 技术栈
  • Next.js 14
  • Tailwind CSS
  • Framer Motion
  • TypeScript 支持

访问模板页面：Magic Portfolio 模板

👉 在页面中点击 "Deploy" 按钮开始部署

🚀 项目部署流程​

步骤 1：部署到 Vercel​

1

点击 Deploy 按钮

在模板页面点击部署按钮，开始创建您的项目

2

命名您的仓库

使用您的名字命名，如 chanmeng-portfolio，这样域名会更个性化

3

等待初始部署

Vercel 会自动构建并部署您的网站，通常只需 1-2 分钟

步骤 2：本地开发设置​

您：请帮我从 GitHub 克隆这个项目到本地：
https://github.com/ChanMeng666/magic-portfolio-for-next-js.git

Gemini：我来帮您克隆项目到本地。

🔍 检查 Git 配置...
✓ Git 已安装
✓ GitHub CLI 可用

📥 克隆项目：

方式 1 - 使用 HTTPS：
git clone https://github.com/ChanMeng666/magic-portfolio-for-next-js.git

方式 2 - 使用 GitHub CLI（推荐）：
gh repo clone ChanMeng666/magic-portfolio-for-next-js

执行中...
✓ 克隆成功！

📂 项目结构：
magic-portfolio-for-next-js/
├── components/
├── pages/
├── public/
├── styles/
├── package.json
└── README.md

下一步要安装依赖吗？

步骤 3：安装依赖并运行​

您：请帮我安装项目依赖并运行开发服务器

Gemini：好的，我来帮您设置项目环境。

📦 安装项目依赖...

检测到 package-lock.json
使用 npm 安装依赖：

npm install

安装进度：
⠋ idealTree: timing idealTree Completed in 245ms
⠙ reify: timing reifyNode Completed in 3251ms
✓ added 387 packages in 15s

🚀 启动开发服务器...

npm run dev

> magic-portfolio@0.1.0 dev
> next dev

- ready started server on 0.0.0.0:3000
- event compiled client and server successfully
- wait compiling...

✅ 开发服务器已启动！

🌐 访问地址：
- 本地：http://localhost:3000
- 网络：http://192.168.1.100:3000

按 Ctrl+C 停止服务器

🎨 使用 AI 进行网站定制​

智能内容替换​

📝 将您的资料融入网站

您：我已经把我的简历、照片和作品集资料放在项目的 assets 文件夹中了，
请帮我更新网站内容，让它展示我的信息。

我的信息：
- 姓名：Chan Meng
- 职位：全栈开发工程师
- 专长：React, Node.js, AI 应用开发
- 座右铭：用技术改变世界

Gemini：我来帮您更新网站内容，展示您的个人信息。

🔍 扫描项目结构...

找到需要更新的文件：
1. components/Hero.jsx - 主页横幅
2. components/About.jsx - 关于我
3. data/projects.js - 项目数据
4. public/resume.pdf - 简历文件

📝 更新内容...

1. 更新 Hero 组件：
✓ 替换姓名为 "Chan Meng"
✓ 更新职位描述
✓ 添加座右铭
✓ 替换头像图片路径

2. 更新 About 部分：
✓ 更新个人介绍
✓ 添加技能列表
✓ 更新工作经历

3. 配置项目展示：
✓ 导入您的项目截图
✓ 更新项目描述
✓ 添加 GitHub 链接

4. 替换简历文件：
✓ 删除模板简历
✓ 添加您的简历

✅ 内容更新完成！刷新页面查看效果。

性能优化建议​

⚡ AI 驱动的性能优化

🖼️ 图片优化

让 Gemini 帮您：

  • 转换图片为 WebP 格式
  • 实现懒加载
  • 生成不同尺寸的响应式图片

📦 代码优化

AI 可以协助：

  • 识别未使用的依赖
  • 代码分割建议
  • 性能瓶颈分析

🌐 SEO 优化

Gemini 能够：

  • 生成 meta 标签
  • 优化页面描述
  • 创建 sitemap

🔄 网站优化迭代​

已有网站的 AI 优化​

如果您已经有了个人网站，同样可以使用 Gemini CLI 进行优化升级。

您：我有一个现有的个人网站项目，想要进行全面优化，
项目使用 React + Gatsby，已经运行了 2 年

Gemini：我来帮您分析并优化现有网站。

🔍 项目健康检查...

1. 依赖分析：
⚠️ 发现 23 个过时依赖
⚠️ 3 个高危安全漏洞
📊 Bundle 大小：2.3MB（偏大）

2. 性能评分：
- Lighthouse 评分：72/100
- 首次加载：4.2s
- 交互时间：5.8s

🛠️ 优化方案：

阶段 1 - 依赖更新：
✓ 安全更新所有依赖
✓ 移除未使用的包
✓ 升级到 Gatsby v5

阶段 2 - 性能优化：
✓ 实施图片懒加载
✓ 启用代码分割
✓ 优化字体加载

阶段 3 - 现代化改造：
✓ 迁移到 TypeScript
✓ 添加 PWA 支持
✓ 实现暗色模式

要我开始执行优化吗？每个阶段我都会详细说明更改。

🎉 课程总结​

您已掌握的技能​

✓

环境配置专家

能够使用 AI 快速配置任何项目的开发环境

✓

模板定制高手

掌握了将模板转化为个人特色网站的技巧

✓

部署流程通

熟悉现代化的 CI/CD 部署流程

✓

AI 优化达人

学会使用 AI 持续优化网站性能和体验

🚀 下一步行动​

  1. 完善内容：持续更新您的作品集和博客
  2. 性能监控：使用 Vercel Analytics 跟踪网站表现
  3. 社区分享：在社交媒体展示您的网站
  4. 持续学习：探索更多高级功能和优化技巧

🤝 保持联系

如果您觉得这个课程对您有帮助，欢迎：

  • 在 LinkedIn 上关注我：Chan Meng 的 LinkedIn
  • 为我写下推荐语，分享您的学习收获
  • 将您的作品网站分享给我，期待看到您的创作！