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

本教程介绍如何使用蓝耘Claude Code搭建个人主页。相比原版Claude Code，蓝耘版本解决了地域限制、成本高昂等问题，支持本地部署。教程包含环境准备（Linux/macOS系统、注册蓝耘平台获取API密钥）和部署步骤（安装Node.js、配置Claude Code）。蓝耘采用Kimi K2/DeepSeek V3.1引擎，提供新用户千万Tokens免费额度，是国内用户友好的AI编程助手

weixin_66401877

17937人浏览 · 2025-09-22 10:32:15

weixin_66401877 · 2025-09-22 10:32:15 发布

引言

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

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

地域限制：Anthropic公司不允许在国内直接使用Claude Code
成本考虑：即使通过技术手段访问到Claude Code，高昂的使用费用也让普通用户望而却步
本土化优势：蓝耘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）
网络要求：稳定的互联网连接

注册蓝耘平台

访问蓝耘MaaS平台官网：蓝耘MaaS
按照页面提示完成注册流程

蓝耘注册页面

获取API密钥

登录蓝耘MaaS平台控制台
在左侧菜单栏中找到"API KEY管理"
点击"创建API KEY"按钮
系统将自动生成一个唯一的API密钥
请务必妥善保存这个密钥，它是您调用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

创建安装脚本文件：

vim install.sh

将以下内容复制到文件中：

#!/bin/bash

set -e

install_nodejs() {
    local platform=$(uname -s)
    
    case "$platform" in
        Linux|Darwin)
            echo "正在安装 Node.js..."
            
            echo "下载并安装 nvm..."
            curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash
            
            echo "加载 nvm 环境..."
            \. "$HOME/.nvm/nvm.sh"
            
            echo "下载并安装 Node.js v22..."
            nvm install 22
            
            echo -n "Node.js 安装完成！版本: "
            node -v
            echo -n "当前 nvm 版本: "
            nvm current
            echo -n "npm 版本: "
            npm -v
            ;;
        *)
            echo "不支持的平台: $platform"
            exit 1
            ;;
    esac
}

# 检查 Node.js 是否已安装且版本 >= 18
if command -v node >/dev/null 2>&1; then
    current_version=$(node -v | sed 's/v//')
    major_version=$(echo $current_version | cut -d. -f1)
    
    if [ "$major_version" -ge 18 ]; then
        echo "Node.js 已安装: v$current_version"
    else
        echo "Node.js v$current_version 版本过低，正在升级..."
        install_nodejs
    fi
else
    echo "未找到 Node.js，正在安装..."
    install_nodejs
fi

# 检查 Claude Code 是否已安装
if command -v claude >/dev/null 2>&1; then
    echo "Claude Code 已安装: $(claude --version)"
else
    echo "未找到 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" ]; then
    echo "API 密钥不能为空。请重新运行脚本。"
    exit 1
fi

# 提示用户输入模型（可选，默认为 k2）
echo ""
echo "请输入要使用的 Claude 模型（按回车使用默认值 'k2'）："
echo ""
read model
echo ""

# 如果未提供模型，设置默认值
if [ -z "$model" ]; then
    model="k2"
    echo "使用默认模型: k2"
fi

# 检测当前 shell 并确定 rc 文件
current_shell=$(basename "$SHELL")
case "$current_shell" in
    bash)
        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 ]; then
    echo "环境变量已存在于 $rc_file 中。正在更新为新值..."
    # 删除旧条目
    if [[ "$OSTYPE" == "darwin"* ]]; then
        sed -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"
    else
        sed -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"

保存文件并执行安装：

chmod +x install.sh
./install.sh

安装过程

激活环境变量：

source /root/.bashrc

测试Claude Code：

claude

Claude Code运行

第三步：安装蓝耘Claude Code UI

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

npm install -g lanyuncodingui@latest

安装UI界面

第四步：启动UI界面

# 默认启动（端口3000）
lanyuncodingui

# 指定端口启动
PORT=8080 lanyuncodingui

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

启动UI界面

配置和使用

初始化配置

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

创建账户

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

进入设置页面

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

API配置

测试连接：点击"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仓库

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

创建仓库

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

配置仓库

上传文件

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

上传文件

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

提交文件

启用GitHub Pages

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

进入Pages设置

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

配置Pages

访问网站

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

访问网站

总结

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

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

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

AI编程社区

汇聚全球AI编程工具，助力开发者即刻编程。

更多推荐

【ACDSee批量裁剪图片详细操作方法教程】,第387章

国产AI编程工具MonkeyCode横空出世-摘要

AI编程社区

AI编程未来趋势：边缘计算+AI如何改变架构设计？架构师的实战经验

当AI从“云端的实验室”走进“车间的角落”“商场的摄像头”“车舱的屏幕”，当“实时决策”“隐私保护”“带宽优化”成为AI应用的核心需求，边缘AI已经成为AI编程的下一个主战场。作为架构师，你不需要成为“硬件专家”或“算法专家”，但你需要成为“连接者”——连接硬件与算法，连接边缘与云，连接技术与业务。“真正的架构师，不是设计‘完美的系统’，而是设计‘符合需求的系统’——边缘AI的价值，就在于让AI‘