跳到主要内容
版本：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 模板库 探索丰富的模板选择：

  • 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 驱动的性能优化：

  • 图片优化：转换图片为 WebP 格式；实现懒加载；生成不同尺寸的响应式图片
  • 代码优化：识别未使用的依赖；代码分割建议；性能瓶颈分析
  • SEO 优化：生成 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
  • 为我写下推荐语，分享您的学习收获
  • 将您的作品网站分享给我，期待看到您的创作