当前位置： 首页 > news >正文

零基础搭建赛博朋克个人主页：蓝耘Claude Code完整实战教程

news 2025/9/23 9:18:34

文章目录

  • 引言
  • 环境准备
    • 系统要求
    • 注册蓝耘平台
    • 获取API密钥
  • 部署步骤
    • 第一步：安装Node.js
    • 第二步：安装蓝耘Claude Code
    • 第三步：安装蓝耘Claude Code UI
    • 第四步：启动UI界面
  • 配置和使用
    • 初始化配置
    • 创建工作目录
    • 启用编辑模式
  • 创建个人主页
  • 部署到GitHub Pages
    • 创建GitHub仓库
    • 上传文件
    • 启用GitHub Pages
    • 访问网站
  • 总结

引言

本教程将指导您使用蓝耘Claude Code来搭建属于自己的个人主页。点击访问成品

选择蓝耘Claude Code而非Anthropic公司原版Claude Code的原因如下：

  1. 地域限制：Anthropic公司不允许在国内直接使用Claude Code
  2. 成本考虑：即使通过技术手段访问到Claude Code，高昂的使用费用也让普通用户望而却步
  3. 本土化优势：蓝耘Claude Code作为国内用户的首选替代方案，采用Kimi K2/DeepSeek V3.1作为智能引擎，实现了本地部署、一键安装、免翻墙使用的完美体验

蓝耘Claude Code通过兼容Anthropic API的技术架构，在保持原有功能完整性的同时，彻底解决了国内用户的使用痛点。配合蓝耘Claude Code UI页面，让每个人都能愉快地使用AI编程助手。

最重要的是新用户注册官方会赠送千万Tokens，让我们随意使用。
在这里插入图片描述
在这里插入图片描述

环境准备

系统要求

  • 操作系统：Linux或macOS（蓝耘Claude Code UI目前仅支持这两个平台）
  • 服务器配置：推荐2核4G以上（本教程使用Ubuntu 22.04）
  • 网络要求：稳定的互联网连接

注册蓝耘平台

  1. 访问蓝耘MaaS平台官网：蓝耘MaaS

  2. 按照页面提示完成注册流程

蓝耘注册页面

获取API密钥

  1. 登录蓝耘MaaS平台控制台
  2. 在左侧菜单栏中找到"API KEY管理"
  3. 点击"创建API KEY"按钮
  4. 系统将自动生成一个唯一的API密钥
  5. 请务必妥善保存这个密钥，它是您调用AI模型服务的身份凭证

创建新的API KEY

部署步骤

第一步：安装Node.js

根据您的操作系统选择相应的安装方式：

Ubuntu/Debian系统：

# 安装 Node.js 20.x LTS
curl -fsSL https://deb.nodesource.com/setup_20.x | sudo bash -
sudo apt-get install -y nodejs# 验证安装
node --version
npm --version

第二步：安装蓝耘Claude Code

  1. 创建安装脚本文件：
vim install.sh
  1. 将以下内容复制到文件中：
#!/bin/bashset -einstall_nodejs() {local platform=$(uname -s)case "$platform" inLinux|Darwin)echo "正在安装 Node.js..."echo "下载并安装 nvm..."curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bashecho "加载 nvm 环境..."\. "$HOME/.nvm/nvm.sh"echo "下载并安装 Node.js v22..."nvm install 22echo -n "Node.js 安装完成！版本: "node -vecho -n "当前 nvm 版本: "nvm currentecho -n "npm 版本: "npm -v;;*)echo "不支持的平台: $platform"exit 1;;esac
}# 检查 Node.js 是否已安装且版本 >= 18
if command -v node >/dev/null 2>&1; thencurrent_version=$(node -v | sed 's/v//')major_version=$(echo $current_version | cut -d. -f1)if [ "$major_version" -ge 18 ]; thenecho "Node.js 已安装: v$current_version"elseecho "Node.js v$current_version 版本过低，正在升级..."install_nodejsfi
elseecho "未找到 Node.js，正在安装..."install_nodejs
fi# 检查 Claude Code 是否已安装
if command -v claude >/dev/null 2>&1; thenecho "Claude Code 已安装: $(claude --version)"
elseecho "未找到 Claude Code，正在安装..."npm install -g @anthropic-ai/claude-code
fi# 配置 Claude Code 跳过引导
echo "配置 Claude Code..."
node --eval 'const homeDir = os.homedir(); const filePath = path.join(homeDir, ".claude.json");if (fs.existsSync(filePath)) {const content = JSON.parse(fs.readFileSync(filePath, "utf-8"));fs.writeFileSync(filePath,JSON.stringify({ ...content, hasCompletedOnboarding: true }, 2), "utf-8");} else {fs.writeFileSync(filePath,JSON.stringify({ hasCompletedOnboarding: true }), "utf-8");}'# 提示用户输入 API key
echo "请输入您的蓝耘 API 密钥："
echo "您可以从这里获取 API 密钥：https://maas.lanyun.net/"
echo "注意：为了安全起见，输入内容将被隐藏。请直接粘贴您的 API 密钥。"
echo ""
read -s api_key
echo ""if [ -z "$api_key" ]; thenecho "API 密钥不能为空。请重新运行脚本。"exit 1
fi# 提示用户输入模型（可选，默认为 k2）
echo ""
echo "请输入要使用的 Claude 模型（按回车使用默认值 'k2'）："
echo ""
read model
echo ""# 如果未提供模型，设置默认值
if [ -z "$model" ]; thenmodel="k2"echo "使用默认模型: k2"
fi# 检测当前 shell 并确定 rc 文件
current_shell=$(basename "$SHELL")
case "$current_shell" inbash)rc_file="$HOME/.bashrc";;zsh)rc_file="$HOME/.zshrc";;fish)rc_file="$HOME/.config/fish/config.fish";;*)rc_file="$HOME/.profile";;
esac# 添加环境变量到 rc 文件
echo ""
echo "添加环境变量到 $rc_file..."# 检查是否所有三个变量都存在
has_base_url=$(grep -c "ANTHROPIC_BASE_URL" "$rc_file" 2>/dev/null || echo 0)
has_api_key=$(grep -c "ANTHROPIC_API_KEY" "$rc_file" 2>/dev/null || echo 0)
has_model=$(grep -c "ANTHROPIC_MODEL" "$rc_file" 2>/dev/null || echo 0)if [ "$has_base_url" -gt 0 ] && [ "$has_api_key" -gt 0 ] && [ "$has_model" -gt 0 ]; thenecho "环境变量已存在于 $rc_file 中。正在更新为新值..."# 删除旧条目if [[ "$OSTYPE" == "darwin"* ]]; thensed -i.bak '/ANTHROPIC_BASE_URL/d' "$rc_file"sed -i.bak '/ANTHROPIC_API_KEY/d' "$rc_file"sed -i.bak '/ANTHROPIC_MODEL/d' "$rc_file"rm -f "$rc_file.bak"elsesed -i '/ANTHROPIC_BASE_URL/d' "$rc_file"sed -i '/ANTHROPIC_API_KEY/d' "$rc_file"sed -i '/ANTHROPIC_MODEL/d' "$rc_file"fi
fi# 添加/更新条目
echo "" >> "$rc_file"
echo "# Claude Code environment variables" >> "$rc_file"
echo "export ANTHROPIC_BASE_URL=https://maas-api.lanyun.net/anthropic-k2/" >> "$rc_file"
echo "export ANTHROPIC_API_KEY=$api_key" >> "$rc_file"
echo "export ANTHROPIC_MODEL=$model" >> "$rc_file"
echo "环境变量已添加/更新到 $rc_file"echo ""
echo "安装成功完成！"
echo ""
echo "重要：运行以下命令激活 Claude Code："
echo ""
echo "   source $rc_file"
echo ""
echo "之后即可使用：claude"
  1. 保存文件并执行安装：
chmod +x install.sh
./install.sh

安装过程

  1. 激活环境变量：
source /root/.bashrc
  1. 测试Claude Code：
claude

Claude Code运行

第三步：安装蓝耘Claude Code UI

为了提供更友好的用户界面，我们需要安装蓝耘Claude Code UI：

npm install -g lanyuncodingui@latest

安装UI界面

第四步：启动UI界面

# 默认启动（端口3000）
lanyuncodingui# 指定端口启动
PORT=8080 lanyuncodingui

注意：请确保防火墙和安全组已放行相应端口。

启动UI界面

配置和使用

初始化配置

  1. 创建账户：首次访问需要创建用户账户

创建账户

  1. 进入设置：点击设置按钮进入配置页面

进入设置页面

  1. 配置API：输入蓝耘API密钥并选择模型

API配置

  1. 测试连接：点击"Test Connection"按钮，出现"Successfully"表示连接成功，然后点击"Save Settings"保存配置

测试连接

创建工作目录

选择合适的目录作为项目工作空间：

创建工作目录

启用编辑模式

切换到"Accept Edits"可编辑模式，以便Claude Code能够直接修改文件：

切换编辑模式

创建个人主页

现在开始使用蓝耘Claude Code创建赛博朋克风格的个人主页。在对话框中输入以下提示词：

请为我创建一个赛博朋克风格的个人主页，具有未来科技感和霓虹灯效果。页面需要包含以下元素：核心功能要求：
- 响应式设计，适配桌面和移动端
- 深色主题配色（黑色、深蓝、紫色为主）
- 霓虹灯光效果和发光边框
- 动态背景（粒子效果或矩阵代码雨）
- 平滑的悬停动画和过渡效果页面内容：
1. 个人头像：https://profile-avatar.csdnimg.cn/bf07d6c3566c4ce4a8faa43805b19869_weixin_66401877.jpg!1 （添加发光边框和悬停效果）
2. 座右铭展示区：「不为失败找理由，只为成功找方法」（使用霓虹灯文字效果，可以添加打字机动画）
3. 社交平台导航卡片（每个卡片都要有独特的霓虹色彩和悬停效果）：- CSDN博客：https://blog.csdn.net/weixin_66401877?type=blog- 稀土掘金：https://juejin.cn/user/1273653172645488/posts  - 腾讯云社区：https://cloud.tencent.com/developer/user/10809644/articles- GitHub：https://github.com/xiongwenhao112视觉设计要求：
- 使用CSS Grid或Flexbox布局
- 添加扫描线动画效果
- 卡片采用玻璃拟态效果
- 按钮和链接要有电路板风格的装饰
- 整体色调：青色(#00ffff)、品红色(#ff00ff)、霓虹绿(#39ff14)、电子蓝(#0080ff)请生成完整的HTML、CSS和JavaScript代码，确保视觉效果炫酷且用户体验流畅。

输入提示词

Claude Code将自动分析需求并生成相应的文件：

构建执行列表

系统将自动创建以下文件：

  • index.html（主页面结构）
  • styles.css（样式文件）
  • script.js（交互逻辑）

创建HTML文件

创建CSS文件

完成后，您将获得一个具有赛博朋克风格的炫酷个人主页：

最终效果

部署到GitHub Pages

为了让更多人能够访问您的个人主页，我们将使用GitHub Pages进行免费托管。

创建GitHub仓库

  1. 登录GitHub账户
  2. 点击"New repository"创建新仓库

创建仓库

  1. 配置仓库信息：
    • 输入仓库名称
    • 设置为公开（Public）
    • 点击"Create repository"

配置仓库

上传文件

  1. 在仓库页面点击"上传文件"

上传文件

  1. 将生成的HTML、CSS、JS文件上传到仓库
  2. 添加提交信息并点击"Commit changes"

提交文件

启用GitHub Pages

  1. 进入仓库的"Settings"页面
  2. 在左侧菜单中找到"Pages"选项

进入Pages设置

  1. 在"Source"部分选择"Deploy from a branch"
  2. 选择"main"分支
  3. 点击"Save"保存设置

配置Pages

访问网站

等待几分钟后，GitHub会自动部署您的网站。部署完成后，点击"Visit site"即可访问您的个人主页。

访问网站

总结

通过本教程，您已经成功：

  1. 环境搭建：完成了蓝耘Claude Code和UI界面的安装配置
  2. 项目创建：使用AI助手生成了具有赛博朋克风格的个人主页
  3. 项目部署：将网站部署到GitHub Pages实现免费托管

蓝耘Claude Code作为国内用户的优质选择，不仅解决了访问限制问题，还提供了出色的中文支持和本土化服务。结合其强大的代码生成能力，即使是编程初学者也能快速创建出专业水准的网站项目。

http://www.dtcms.com/a/395328.html

相关文章：

  • C语言第19讲
  • 【含文档+PPT+源码】基于springboot+ssm的智能人脸识别养老系统的设计与开发
  • Linux-＞ UDP 编程3
  • 分库分表后ID冲突怎么解决？分布式ID生成方案。保证ID全局唯一性。
  • 域名如何解析家庭ip
  • LeetCode 2460.对数组执行操作
  • Unity Time.time 详解
  • LeetCode 922.按奇偶排序数组 II
  • 请简要谈谈Android系统的架构组成？
  • LeetCode 面试经典 150_哈希表_两数之和（44_1_C++_简单）
  • Kafka是什么，架构是什么样的？Kafka概述
  • TCN时序卷积网络、CNN、RNN、LSTM、GRU神经网络工业设备运行监测、航空客运量时间数据集预测可视化|附代码数据
  • 【HarmonyOS】HMRouter关键原理-动态import
  • 【Python】面向对象（三）
  • 05-django项目的跨域处理
  • go语言并发
  • Qt QSS 美化完整教程文档
  • jwt与token+redis，哪种方案更好用？
  • 基于react的前端项目开发和实战总结（umi框架）
  • 【iOS】YYModel
  • 修改docker配置使其支持本机tcp连接
  • ReportFragment：Android 生命周期的桥梁与兼容性解决方案
  • 力扣Hot100--234.回文链表
  • 视觉语言大模型（VLM）的产业落地：从Qwen-VL技术解析到医疗、车险行业革新
  • 零基础新手小白快速了解掌握服务集群与自动化运维（七）Nginx模块--Nginx Web服务
  • 一个硬盘选MBR 还是GPT
  • 【含文档+PPT+源码】基于GPT+SpringBoot的个人健康管理与咨询系统设计与实现
  • 【项目实战 Day5】springboot + vue 苍穹外卖系统（Redis + 店铺经营状态模块 完结）
  • 旧衣回收小程序：非技术视角下的价值重构与发展前景
  • 使用vue-i18n实现语言切换