如何免费部署Magnet Player这样的P2P流媒体站点到GitHub Pages？Jekyll+HTTPS避坑指南

如何免费部署Magnet Player这样的P2P流媒体站点到GitHub PagesJekyllHTTPS避坑指南【免费下载链接】magnet-playerStream torrents directly from your browser using WebTorrent. Paste a magnet link or torrent URL and watch videos instantly with peer-to-peer WebRTC streaming.项目地址: https://gitcode.com/gh_mirrors/ma/magnet-playerMagnet Player是一个基于 WebTorrent WebRTC 的浏览器端 P2P 流媒体播放器粘贴磁力链接magnet URI或种子文件 URL视频即可在浏览器里直接边下边播无需安装任何插件。它本质上是一个纯静态 Jekyll 站点这意味着你可以零成本部署到 GitHub Pages还能免费获得 HTTPS 和全球 CDN 加速。本文带你完成一次免费上线并提前绕开新手最容易踩的 3 个大坑。一、Magnet Player 是什么30秒理解这个P2P流媒体播放器简单说它就是一个浏览器里的磁力链接视频播放器浏览器原生运行基于 WebTorrent v2用 WebRTC 做真正的 P2P 传输零安装、零插件⚡边下边播自动选取种子中最大的文件通过file.streamTo()流式输出到video标签分享即链接播放中的视频会生成带 infoHash 的 URL复制给好友即可继续观看️纯静态架构Jekyll 负责页面生成esbuild 负责 JS 打包没有服务端代码——这正是它能免费跑在 GitHub Pages 上的原因核心逻辑集中在 js/webtorrent.js 中UI 交互在 js/main.js 中两个文件通过 esbuild 打包为 js/bundle.js。二、一键部署四步免费上线到 GitHub Pages前置要求电脑已安装 Ruby 和 Node.js并注册了代码托管账号。第 1 步克隆仓库git clone https://gitcode.com/gh_mirrors/ma/magnet-player cd magnet-player第 2 步安装依赖# Ruby 侧Jekyll 4.4 minima 主题 SEO 插件 bundle install # JS 侧esbuild 打包器 npm install依赖声明分别在 Gemfile 和 package.json 中。第 3 步打包 JS关键一步别跳过npm run build这步会用 esbuild 把js/main.js重新打包为 js/bundle.js。该文件已提交在仓库中但你修改过任何 JS 后必须重新执行否则线上页面会用旧代码。第 4 步推送到 gh-pages 分支将站点文件推送到仓库的gh-pages分支并在仓库设置中开启 Pages 服务。几分钟后你的 P2P 流媒体站点就带 HTTPS 上线了——免费、稳定、无需自己维护服务器。 为什么不用 CI 直接构建这个项目的设计就是预构建产物直接入库bundle.js、webtorrent.min.js 都在仓库里部署路径最短新手最不容易出错。三、避坑指南Jekyll HTTPS 的 3 个新手必踩坑坑 1HTTPS 不是加分项是功能刚需这是最大的坑。Magnet Player 依赖Service Workersw.min.js来支持streamTo()流式播放而 Service Worker只在安全上下文HTTPS 或 localhost下可用。✅ 部署到 GitHub Pages 后自动获得 HTTPS开箱即用❌ 用http://IP或自建的无证书站点部署页面能打开但视频永远播不了⚠️ 本地调试时localhost虽可用但bundle exec jekyll serve用局域网 IP 访问同样会失败所以如果你的目标就是 P2P 流媒体播放优先选免费自带 HTTPS 的静态托管服务GitHub Pages 是最省心的选择之一。坑 2baseurl 子路径没配对静态资源 404当站点部署在用户名.github.io/项目名/这种子路径下时_config.yml 中必须正确配置baseurl本项目为/magnet-player和url主域名模板里所有资源路径都通过{{ site.baseurl }}拼接。配错的表现页面文字能显示但 JS、样式、图标全部 404播放器变成一具空壳。修改 _config.yml 后记得重启本地服务——Jekyll 不会热加载该文件。坑 3不是所有磁力链接都能播浏览器里的 WebTorrent 只能连接WebRTC 种子源而大多数传统客户端BitTorrent、Transmission 等走的是 TCP 协议不参与 WebRTC 组网。项目做了针对性优化在 js/webtorrent.js 中tracker 列表被过滤为仅保留wss://开头的 WebSocket tracker专为浏览器环境兼容。即便如此若 30 秒内搜索不到 peer页面会明确提示Only torrents with WebRTC seeders are supported。这不是你部署的问题而是浏览器端 P2P 的客观限制——支持 WebTorrent 的客户端如 Vuze、Brave 浏览器越多可播的内容就越多。四、项目结构速览关键文件都在哪文件作用index.html首页输入框 播放器 进度/速度统计区js/webtorrent.js核心逻辑注册 Service Worker、创建客户端、下载并流式播放js/main.jsUI 交互分享链接复制esbuild 入口js/bundle.jsesbuild 打包产物改动 JS 后需npm run build重新生成js/webtorrent.min.jsWebTorrent v2.8.5 预构建浏览器包IIFE 格式sw.min.jsService Worker流式播放的必需组件_config.ymlJekyll 配置站点信息、baseurl、SEO 插件GemfileRuby 依赖Jekyll 4.4、minima 主题、jekyll-seo-tag、jekyll-sitemap_sass/player.scss播放器自定义样式SEO 方面站点通过jekyll-seo-tag与jekyll-sitemap两个插件声明于 Gemfile自动生成 meta 标签和站点地图你无需额外配置。五、总结免费部署 P2P 流媒体站点的核心清单✅免费上线Jekyll 纯静态架构 GitHub Pages 零服务器成本 免费 HTTPS/CDN ✅最短路径clone → bundle install → npm install → npm run build → 推送 gh-pages 分支✅HTTPS 是刚需Service Worker WebRTC 要求安全上下文本地 localhost 调试即可、公网部署必须带证书 ✅配好baseurl子路径部署时资源 404 的头号元凶 ✅管理预期浏览器端只能播放有 WebRTC 种子源的磁力链接按这份清单走一遍你拥有的不只是一个免费站点而是一个可以分享给任何人、打开即播的 P2P 流媒体页面 【免费下载链接】magnet-playerStream torrents directly from your browser using WebTorrent. Paste a magnet link or torrent URL and watch videos instantly with peer-to-peer WebRTC streaming.项目地址: https://gitcode.com/gh_mirrors/ma/magnet-player创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考