摘要：传统的代码教程博客已经过时了。本文将带你从零开始，使用 WordPress 作为前端内容展示，结合 Thebe.js 作为交互中间件，并链接私有 JupyterHub (GPU) 作为后端算力池，构建一个支持“边阅读、边运行、边调参”的 Notebook 类型技术博客。拒绝“死代码”，让你的读者在浏览器里直接跑大模型！

一、 痛点：由于“环境配置”而夭折的学习热情

作为一名技术博主，你一定遇到过这种尴尬：
你写了一篇极好的 PyTorch 深度学习教程，贴了精美的代码。读者兴致勃勃地打开，结果：

  1. 复制到本地 IDE，报错 Module not found。

  2. 折腾 CUDA 版本半小时，放弃。

  3. 你的文章被关掉，收藏夹吃灰。

为什么不能像 Google Colab 那样，读者点开文章，无需任何配置，直接点击代码块右上角的“Run”，就能调用远程服务器的 GPU 跑出结果？

今天，我们就用 WordPress 来实现这个功能。与 PyScript 等纯前端方案不同，本方案支持链接后端强大的 Python 内核，这意味着你可以让读者在你的博客上跑 Pandas、连接数据库，甚至微调大模型。

二、 架构蓝图：它是如何工作的？

我们要实现的是一个 Frontend-Backend 分离 的架构，实现“文章内容”与“计算环境”的解耦。

![alt text](https://via.placeholder.com/800x400?text=Architecture:+WordPress+Thebe+JupyterHub)

  1. 展示层 (WordPress)：负责承载文章内容、文档流和静态代码块。

  2. 交互层 (Thebe.js)：这是本文的核心魔法。它是一个开源的前端库，负责将静态的 HTML 代码块“激活”为交互式单元，并通过 WebSocket 与后端通信。

  3. 计算层 (JupyterHub/Binder)：真实的后端“肌肉”。它运行在 Docker 或 GPU 服务器上，负责接收代码、执行运算并返回结果。

三、 实战步骤一：准备后端算力 (The Muscle)

要跑通 AI 代码，我们首先需要一个 Jupyter 环境。这里有两种路径：

路径 A：免费/轻量级 (MyBinder)

适合数据分析、基础 Python 教学。你只需要在 GitHub 上放一个 environment.yml，Binder 会免费为你构建临时环境。

  • 优点：免费、无需维护服务器。

  • 缺点：无 GPU，启动慢，会话临时性。

路径 B：私有/高性能 (JupyterHub) —— 推荐

适合深度学习、需要 GPU 算力的场景。
你需要在一台云服务器（阿里云/AWS/自建机房）上部署 JupyterHub。

关键配置 (坑点预警)：
为了让你的 WordPress (假设域名为 blog.example.com) 能连接到 JupyterHub (假设域名为 api.compute.com)，你必须在 JupyterHub 的配置文件 jupyterhub_config.py 中配置 CORS (跨域资源共享)：

codePython

# jupyterhub_config.py
c.JupyterHub.tornado_settings = {
    'headers': {
        'Access-Control-Allow-Origin': 'https://blog.example.com', # 你的博客域名
        'Access-Control-Allow-Headers': '*',
        'Access-Control-Allow-Methods': '*',
    }
}
# 允许跨域启动服务
c.Spawner.args = ['--NotebookApp.allow_origin=*']
c.Spawner.args += ['--NotebookApp.disable_check_xsrf=True']

注意：生产环境请务必配置 Token 鉴权，防止算力被恶意扫描滥用。

四、 实战步骤二：前端改造 (WordPress + Thebe.js)

我们需要在 WordPress 中注入 Thebe.js，把静态代码块变成动态 Cell。

1. 引入依赖

在你的 WordPress 主题的 header.php 或者使用插件（如 WPCode）在 <head> 中插入以下 CDN 链接：

codeHtml

<!-- 引入 jQuery (Thebe 依赖) -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- 引入 Thebe.js -->
<script type="text/javascript" src="https://unpkg.com/thebe@latest/lib/index.js"></script>

2. 配置连接参数

在页面底部（footer.php）添加初始化脚本。这里决定了你的博客连接到哪里的算力。

codeHtml

<script type="text/javascript">
  // 配置 Thebe
  window.thebe_config = {
      // 1. 请求内核选项
      requestKernel: true,
      
      // 2. 绑定 Binder 或者 JupyterHub
      // 如果使用 Binder (路径 A):
      // binderOptions: {
      //    repo: "你的Github仓库名",
      // },
      
      // 如果使用 私有 JupyterHub (路径 B):
      binderOptions: {
          repo: null, // 私有服务不需要 repo
      },
      kernelOptions: {
          name: "python3", // 内核名称
          serverSettings: {
              "baseUrl": "https://api.compute.com", // 你的 JupyterHub 地址
              "token": "你的API_TOKEN" // 建议通过后端动态生成，不要明文写在前端
          }
      },
      
      // 3. UI 选择器
      selector: "pre.thebe-code", // 只有带有这个 class 的代码块才会被激活
  };
</script>

3. 创建“激活”按钮

在文章的某个位置（通常是侧边栏或顶部），放置一个按钮来启动环境：

codeHtml

<button id="activateButton" onclick="thebelab.bootstrap();">
    🚀 启动在线运行环境 (Connect to GPU)
</button>

五、 实战步骤三：撰写文章与代码块

现在，基础设施搭建完毕，开始写博客。在 WordPress 编辑器（Gutenberg 或 经典编辑器）中，你需要以特定的 HTML 格式编写代码块。

普通代码块（不可运行）：

codeHtml

<pre>print("Hello World")</pre>

可运行代码块（添加 thebe-code 类）：

codeHtml

<!-- 这是一个可以运行的 Cell -->
<pre class="thebe-code" data-executable="true" data-language="python">
import torch
if torch.cuda.is_available():
    print(f"后端 GPU 已就绪: {torch.cuda.get_device_name(0)}")
else:
    print("正在使用 CPU 模式")
</pre>

上下文感知（Statefulness）：
Thebe 的强大之处在于它是有状态的。
你可以在文章的第一段定义变量：

codeHtml

<pre class="thebe-code">x = 100</pre>

在文章的第十段引用它：

codeHtml

<pre class="thebe-code">print(x * 2) # 点击运行，会输出 200</pre>

这完美复刻了 Jupyter Notebook 的体验！

六、 进阶工作流：从 Notebook 到 WordPress

手动写 <pre class="thebe-code"> 太累了？
如果你的原稿就是 .ipynb 文件，我们可以使用 jupyter-book 或者 nbconvert 自动转换。

使用 CLI 转换命令：

codeBash

jupyter nbconvert --to html --template basic my_post.ipynb

你可以写一个简单的 Python 脚本，读取生成的 HTML，通过正则匹配，自动给所有的 <div class="input"> 添加 thebe-code 类，然后通过 WordPress REST API 自动发布文章。这样就实现了一个 自动化技术博客发布流水线。

七、 效果展示与优化

当用户访问你的文章时：

  1. 页面加载，显示为普通的静态代码块（SEO 友好）。

  2. 用户点击 “启动在线环境”。

  3. 按钮转圈，Thebe.js 在后台连接 JupyterHub。

  4. 连接成功！代码块变成可编辑状态，左侧出现 Run 按钮。

  5. 用户修改参数，点击运行，图表直接渲染在文章段落之间。

性能优化建议：

  • Lazy Load：不要页面一加载就连接 WebSocket，不仅慢还浪费服务器资源，务必使用按钮手动触发。

  • Loading 状态：连接 Kernel 可能需要 5-10 秒（如果涉及 Docker 启动），务必在 UI 上给用户明确的进度提示。

八、 总结

通过 WordPress + Thebe.js + JupyterHub，我们成功打破了技术博客“只读”的限制。
对于 AI 领域的博主，这意味着你可以直接展示模型推理效果；对于数据分析博主，读者可以现场更改清洗逻辑验证想法。

这不仅是一个博客，更是一个基于浏览器的微型 IDE。

# 人工智能
Logo
2048 AI社区

有“AI”的1024 = 2048，欢迎大家加入2048 AI社区

更多推荐

cover

GPT-5.1-Codex-Max 架构深度解析：原生“压缩”机制如何重塑智能体编程？

avatar 2048 AI社区
cover

【谷歌AI_Agent企业级智能体白皮书】生成式AI智能体

avatar 2048 AI社区
cover

裁员警报！AI时代程序员生存法则：从“码农”到“智能体架构师”的破局路径！

avatar 2048 AI社区