# 快速开始 > 安装 Piglet，用 Claude Code 做一个静态网页 --- LLMS 索引： [llms.txt](/zh/llms.txt) --- ## 目标这个教程会带你完成： 1. 登录你的 Piglet 环境 2. 用 Claude Code 生成一个数据可视化网页 3. 把它部署上线完成后，你会有一个可以公开访问的网页，展示一个交互式 ECharts 图表。 --- ## 第一步：登录环境 ### 方式 A：网页版 VS Code（推荐新手）打开浏览器，访问： ``` http://你的服务器IP/code ``` 输入密码 `piglet`（首次使用请修改）。 ### 方式 B：本地 VS Code + SSH（推荐日常使用）在本地 VS Code 中： 1. 安装 **Remote - SSH** 扩展 2. 按 `Cmd+Shift+P` / `Ctrl+Shift+P`，选择 **Remote-SSH: Connect to Host** 3. 输入 `root@你的服务器IP` ### 方式 C：Claude Code 直连（AI 编程） ```bash # 在本地终端 claude connect ssh root@你的服务器IP ``` --- ## 第二步：创建项目目录打开终端，创建工作目录： ```bash cd ~/data mkdir my-first-site cd my-first-site ``` --- ## 第三步：让 Claude 帮你写代码这是 Piglet 的魔法时刻。 ### 如果你用 Claude Code：直接告诉它你想要什么： ``` 给我做一个网页，展示一个 ECharts 柱状图，数据是过去 7 天的访问量（随便编一些数据）。要求： - 单个 HTML 文件，内联所有 CSS 和 JS - 使用 ECharts CDN - 页面要好看，有标题 ``` Claude 会直接在当前目录创建 `index.html`。 ### 如果你手动写：创建 `index.html`： ```html 我的第一个 Piglet 网页

过去 7 天访问量

``` --- ## 第四步：预览在终端中启动一个简单的 HTTP 服务器： ```bash python3 -m http.server 8080 ``` 然后访问 `http://你的服务器IP:8080`，你应该能看到一个漂亮的柱状图页面。按 `Ctrl+C` 停止服务器。 --- ## 第五步：部署上线让这个网页可以通过正式的 URL 访问： ```bash # 复制到 Nginx 静态文件目录 sudo cp index.html /www/my-first-site/ ``` 或者使用 `pig deploy` 命令： ```bash pig deploy . --name my-first-site ``` 现在访问 `http://你的服务器IP/my-first-site/` 就能看到你的网页了。 --- ## 恭喜！你刚刚完成了： - ✅ 登录 Piglet 开发环境 - ✅ 用 Claude Code（或手动）创建了一个数据可视化网页 - ✅ 把它部署到了互联网上 **从想法到上线，就是这么简单。** --- ## 发生了什么让我们回顾一下 Piglet 为你做了什么： | 传统方式 | Piglet 方式 | |---------|-------------| | 买服务器 → 装系统 → 配环境 → 装 Node/Python → 配 Nginx → 配 SSL... | 一条命令安装，开箱即用 | | 本地写代码 → Git push → CI/CD → 部署 | 直接在服务器上写，一行命令部署 | | 自己写 HTML/CSS/JS | 告诉 Claude "给我做一个网页" | 这就是 **Code Fearlessly, Ship Instantly** 的含义。 --- ## 下一步现在你已经熟悉了基本流程，可以继续： 1. **[第一个 Web 应用](/docs/tutorial/application/)** - 做一个带数据库的 Flask/Node.js 应用 2. **[配置 Claude Code](/docs/tutorial/claude/)** - 深度使用 AI 辅助编程 3. **[灾难恢复](/docs/tutorial/database/)** - 体验 PITR 时间旅行，搞砸了也不怕