编程 13MB打包整个网站、去JS、跨平台,还能做成App,有点离谱了!

2026-06-25 19:08:09 +0800 CST views 8

13MB 打包整个网站、去 JS、跨平台,还能做成 App,有点离谱了!

标签: kage / 网站克隆 / 离线浏览 / Go / 开源 / ZIM / Kiwix / 去 JavaScript
原文: 微信公众号「开源先锋」https://mp.weixin.qq.com/s/1Hb4DAloa7bCv2JH6DmVow
GitHub: https://github.com/tamnd/kage (⭐ 2,408)


一句话定位

kage(影,意为"影子")是一个用 Go 编写的命令行工具,专门干一件事:把任意网站克隆成一份可以离线浏览的本地镜像,同时把所有 JavaScript 彻底剔除

普通网页保存只抓 HTML 源码,而现在的网页大多是个空壳,内容都是 JS 动态生成。kage 不一样——它会启动真正的无头 Chrome,等页面完整渲染完毕,再把浏览器"看到"的最终 DOM 快照下来,然后把脚本、事件处理器、追踪代码统统删掉,只留下样式、图片、字体、文字内容。

结果就是一份干净、可离线、零网络请求的本地副本


为什么需要 kage?

做技术的人,多少都有点"收藏癖"。看到一篇好文,第一反应是收藏、加书签、丢进 Notion。等到哪天真想回头看,才发现:

  • 链接 404
  • 站点 重构
  • 打开只剩一个加载动画
  • 不是你没存,是网页本身已经离不开 JS、接口和网络了

一旦断网、改版、关站,那些"存下来的页面"其实什么都没留下。

kage 就是解决这个问题的——把那些花里胡哨的现代网页,打回原形保存,不用联网,不怕跑路,双击就能看。


核心特性

1. 真实渲染后快照,不是存源码

普通保存工具(wget -r、HTTrack、SingleFile)只抓 HTML 源码,而现在的网页大多是个空壳,内容都是 JS 动态生成。

kage 启动真正的无头 Chrome,等页面完整渲染完毕,再把浏览器"看到"的最终 DOM 快照下来。

SPA 内容型页面(博客、文档、Wiki)经 JS 拼装后的正文也能正确捕获,告别白屏空壳

2. JS/追踪全清除,零网络调用

保存的 HTML 里找不到任何 <script>onclick纯静态打开不会有任何网络请求,隐私友好。

3. 资源本地化 + 链接重写

  • 样式表、图片、字体全部下载
  • url() 和站内超链改为相对路径
  • 把文件夹拷到任何地方,双击 index.html 就能点着翻

4. 打包为开放 ZIM 归档或自含二进制

ZIM 格式(Kiwix 生态兼容):

kage pack paulgraham.com              # 生成 paulgraham.com.zim
kage open paulgraham.com.zim         # 用 kage 打开

ZIM 是开放文件格式,专为离线内容设计。你可以用 Kiwix 桌面端Kiwix Android/iOS 打开,把 Wikipedia、Stack Overflow、Project Gutenberg 装进手机,带到飞机上、没有网络的教室、船上都能看。

自包含可执行文件(~13MB + 站点体积):

kage pack paulgraham.com --format binary -o paulgraham
./paulgraham                           # 直接运行,无需安装任何东西

接收者无需装任何东西,直接运行。

5. 爬取范围精确可控

面对大型网站,kage 不会盲目全站扫

kage clone paulgraham.com --max-pages 50 --max-depth 2
参数作用
--scope-prefix /docs只爬某个路径下的内容
--max-pages 50最多抓 50 页就停
--max-depth 3最多跟踪 3 层链接深度
--exclude排除指定路径前缀
--subdomains需要时也可以把子域名纳入范围
--scroll自动滚动每页以触发懒加载图片
--refresh下个月回来重新渲染,捕捉新文章

和同类工具对比

工具原理缺点
wget -r递归下载 HTML 源码SPA/JS 渲染内容抓不到,白屏
HTTrack离线网站复制同样无法处理 JS 动态内容
SingleFile浏览器扩展,保存完整页面仍保留 JS,离线后可能报错
kage无头 Chrome 真实渲染后快照需要本机有 Chrome/Chromium

快速安装

方法一:Go 安装(推荐 Go 1.21+)

go install github.com/tamnd/kage/cmd/kage@latest

方法二:预编译二进制

直接从 项目 Release 页面 下载对应平台的预编译二进制,解压就能用。

支持:macOS / Windows / Linux(含 .deb / .rpm / .apk

方法三:Docker(自带 Chromium,不需要本机装 Chrome)

docker run --rm -v "$PWD/out:/out" ghcr.io/tamnd/kage clone paulgraham.com

方法四:包管理器

# Homebrew (macOS)
brew install --cask tamnd/tap/kage

# Scoop (Windows)
scoop bucket add tamnd https://github.com/tamnd/scoop-bucket
scoop install kage

# apt (Debian, Ubuntu)
curl -fsSL https://tamnd.github.io/linux-repo/gpg.key | sudo gpg --dearmor -o /usr/share/keyrings/tamnd.gpg
echo "deb [signed-by=/usr/share/keyrings/tamnd.gpg] https://tamnd.github.io/linux-repo/apt stable main" | sudo tee /etc/apt/sources.list.d/tamnd.list
sudo apt update && sudo apt install kage

# dnf (Fedora, RHEL)
sudo dnf config-manager --add-repo https://tamnd.github.io/linux-repo/dnf/tamnd.repo
sudo dnf install kage

基本使用

克隆一个网站

kage clone paulgraham.com

等它跑完,镜像默认落在 $HOME/data/kage/paulgraham.com/

本地预览

kage serve $HOME/data/kage/paulgraham.com
# 浏览器打开 http://127.0.0.1:8800

打包成单个 ZIM 文件

kage pack paulgraham.com          # 生成 paulgraham.com.zim
kage open paulgraham.com.zim     # 用 kage 打开

也可以用 Kiwix 桌面端或手机端打开这个 .zim 文件。

打包成自包含可执行文件

kage pack paulgraham.com --format binary -o paulgraham
./paulgraham                      # 直接运行,无需安装任何东西

限制爬取范围,快速试用

kage clone paulgraham.com --max-pages 20 --max-depth 2

做成真正的桌面 App

macOS:生成 .app bundle

kage pack paulgraham.com --app                 # -> paulgraham.app
open paulgraham.app                            # 或 Finder 里双击

双击打开就是一个真正的 macOS App,没有终端窗口

Linux:生成 AppImage

kage pack paulgraham.com --app --base kage-linux-amd64   # -> paulgraham.AppDir (+ .AppImage)

如果安装了 appimagetool,kage 会自动打包成单个双击可用的 .AppImage

Windows:生成无控制台窗口的 .exe

Release 提供 kage_<version>_windows-gui_<arch>.zip,其中的二进制链接为 GUI 子系统,打包后的查看器运行时没有控制台窗口

kage pack paulgraham.com --format binary --base kage-windows-gui-amd64.exe   # -> paulgraham.exe

原生窗口(不是浏览器标签页)

默认情况下,打包的二进制文件会打开系统浏览器,这意味着网站会作为另一个标签页出现,地址栏一应俱全。

使用 webview 标签构建 kage,它会在自己的窗口中打开网站,由操作系统的 WebView 支持(macOS 用 WKWebView,Windows 用 WebView2,Linux 用 WebKitGTK)。

make build-webview                       # 或: CGO_ENABLED=1 go build -tags webview ./cmd/kage
kage pack paulgraham.com --format binary --base bin/kage -o paulgraham
./paulgraham                             # 打开一个原生窗口,看不到浏览器

Paul Graham 的文章,离线,在一个看起来和感觉都像真正 App 的窗口里:

paulgraham.com served offline in a native kage window


工作原理

种子 URL ─▶ 无头 Chrome ─▶ 最终 DOM ─▶ 去除 JS ─▶ 本地化资源 ─▶ 写入磁盘
              (渲染)          (快照)      (清理)       (重写链接)
  1. 渲染:启动无头 Chrome,等待页面完全渲染
  2. 快照:捕获浏览器"看到"的最终 DOM
  3. 清理:删除所有 <script>、事件处理器、javascript: URL
  4. 本地化:下载 CSS、图片、字体,重写 url() 和站内链接为相对路径
  5. 写入磁盘:生成可离线浏览的静态文件

输出目录结构:

paulgraham.com/
├── index.html                  # 首页,脚本已剥离
├── greatwork.html              # /greatwork.html,一篇文章
├── _kage/                    # 保留:资源和爬取状态
│   ├── paulgraham.com/site.css  # 本地化样式表(url() 已重写)
│   ├── paulgraham.com/pg.png
│   └── state.json             # 已访问集合,用于恢复
└── ...

项目结构

cmd/kage/      # 主入口:接管主线程,然后交给 cli.Execute
cli/           # Cobra 命令树和参数绑定
clone/         # 爬取:frontier、渲染 worker、资源 worker、恢复状态
browser/       # 无头 Chrome 控制和 DOM 快照
sanitize/      # 从 DOM 中去除脚本、处理器和 javascript: URL
asset/         # 下载和本地化 CSS、图片和字体
urlx/          # 确定性的 URL 到路径映射
zim/           # 纯 Go 的 ZIM 读取器和写入器
pack/          # 镜像到 ZIM 或自包含二进制,以及离线 HTTP 处理器
viewer/        # 呈现已服务的站点:系统浏览器或原生窗口(webview 标签)
docs/          # Hugo 文档站点

完整文档

完整文档和指南位于:https://kage.tamnd.com


总结

  • 🌐 真实渲染:无头 Chrome 渲染后快照,SPA/JS 动态内容也能正确保存
  • ✂️ 彻底去 JS:保存的 HTML 里找不到任何 <script>,零网络请求,隐私友好
  • 📦 多种打包格式:ZIM(Kiwix 兼容)/ 自包含二进制(~13MB+站点)/ 桌面 App
  • 🎯 爬取范围精确可控--scope-prefix / --max-pages / --max-depth / --exclude
  • 🖥️ 原生窗口webview 标签构建,打开真正的原生窗口,不是浏览器标签页
  • 🐳 Docker 支持:自带 Chromium,不需要本机装 Chrome
  • 📱 跨平台:macOS / Windows / Linux,支持 Homebrew / Scoop / apt / dnf
  • 🔒 MIT 开源:可自由使用、修改、分发

感觉就像给自己的收藏夹上了份"离线保险",踏实。

如果你有长期保存某些网站内容的需求——技术文档、博客文章、知识库——不妨试试这个工具。


相关链接


Keywords: kage, 网站克隆, 离线浏览, Go, 开源, ZIM, Kiwix, 去JavaScript, 网站镜像, 静态化, 无头浏览器, Chrome headless

推荐文章

介绍25个常用的正则表达式
2024-11-18 12:43:00 +0800 CST
Go 如何做好缓存
2024-11-18 13:33:37 +0800 CST
使用Vue 3实现无刷新数据加载
2024-11-18 17:48:20 +0800 CST
Vue3中的v-slot指令有什么改变?
2024-11-18 07:32:50 +0800 CST
聚合支付管理系统
2025-07-23 13:33:30 +0800 CST
程序员茄子在线接单