使用Github+Cloudflare Worker 搭建免费的PikPak网页版

作者: 扬帆大海 分类: 佳软推荐,技术文章 发布时间: 2021-10-29 22:50


PikPak这个网盘十分好用,但是目前官方只有安卓客户端,对于PC和MAC电脑用户就十分不友好。
好在网友的力量是强大的,现在Win,Mac,Web的第三方客户端都被开发了出来。
这次就是水一篇教程,教大家怎么用Github+cloudflare worker搭建一个免费的PikPak网页版出来,教程偏新手向。
提醒:这样部署的需要你能够访问github,不然你还要再用Cloudflare Worker部署一个反向代理服务,去反向代理github,反代的教程一搜一大把,我就不说了。

源码:github.com/mumuchenchen/pikpak
Demo:tjsky.github.io/pikpak/
网页版使用教程:https://www.tjsky.net/?p=220



注册必须的账号

分别是pikpak github cloudflare,如果你已经都有了,请跳过这一步

pikpak账号

使用官方的安卓客户端注册,没有安卓手机的,要么借一个手机,要么电脑上用模拟器,要么电脑上用第三方客户端注册吧。
PS:如果你最开始登录PIkPak客户端是用的谷歌账号关联登录,请在客户端内点击右下角图标,再点击左上角你的头像,修改密码/找回密码。

GitHub

注册地址(https://github.com/signup
输入邮箱地址和密码,选择免费计划,验证邮箱地址,按照提示操作,创建您的个人帐户。
PS:如果你感觉部分内容是英文的识别困难,用浏览器的翻译功能吧。

CloudFlare

注册地址(https://dash.cloudflare.com/sign-up
输入您的电子邮箱地址和密码。单击 Create Account。
PS:CloudFlare有中文界面,在右上角切换

Cloudflare Workers部署

  1. 登录你的Cloudflare
  2. 在主页右侧找到【Workers】
  3. 点进【Workers】选择一个预设的子域,点击【set up】之后,我们选择免费套餐。
  4. 点进【Workers】,选择【创建Workers】
  5. 把这里的代码(https://github.com/mumuchenchen/pikpak/blob/main/cf-worker/index.js) 粘贴到页面右侧的输入框
  6. 点击【保存并部署】按钮,
  7. (非必须)单击你刚创建的Worker,选择重命名,起个好记好写的名字,比如pikpak
  8. 记住你的Worker的域名pikpak.XXXX.workers.dev之后要用到

GitHub部署

Github Aciton

  1. 登录你的Github,并且进入项目(https://github.com/mumuchenchen/pikpak
  2. 点击右上角的【Fork】将项目复刻到你自己的仓库
  3. 点击上侧一排的最后一个按钮【settings】切换到设置页面
  4. 选择左侧的【secrets】项,点击【new repository secrets】
  5. Name填CF_DOMAIN,Value填你Worker的域名pikpak.XXXX.workers.dev(注意只是域名本身,不带https://之类的累赘),点【Add secret】
  6. 如果你修改了仓库名则进行这一步,否则直接执行下边的第7步
    点击【new repository secrets】,Name填BASE_PATH,Value填你的仓库名如tjskypikpak
  7. 点击上侧一排的【actions】按钮,点【I understand my workdlows, go ahead and enable them】表示你明白你要干啥。
  8. 点击左侧的【deploy】,点右侧的【Run workflow ▽】切换到main分支,选择绿色的【Run workflow】 按钮。等待代码被构架并运行,如果没出什么问题,你会看到一个绿色√出现。(不超过5分钟)

Github Page

  1. 再次点击上侧那一排按钮中最后的【settings】切换到设置页面
  2. 这次选择左侧的【pages】
  3. 把Source这一项的branch切换到【gh-pages】【/(root)】,然后点击保存。
  4. 等1分钟左右你就可以通过页面上部显示的
    Your site is published at https://tjsky.github.io/pikpak/
    访问你的PikPak网页版客户端了。

后期更新

因为网页版还在不断的迭代中,上游代码更新后,如果你希望更新,那么需要这样更新一下

更新正常流程

  1. 回到你的Github主页(https://github.com/)切换到项目。
  2. 点击【Fetch upsteam ▽】,如果上游有更新,【Fetch and merge】按钮会是可点击的,选择【Fetch and merge】。
  3. 正常来说,没自己改过文件,就不会出问题,Github Aciton会自动重新deploy,在几分钟内就更新好了。如果出现无法合并,deploy时出错等等问题,要么自己介入处理导致了报错的文件,要么用更新出错时流程更新吧。
    PS:只需合并main分支即可,不需要合并gh-pages分支,合并main后deploy会更新gh_pages分支内容。

  4. 检查一下https://github.com/mumuchenchen/pikpak/blob/main/cf-worker/index.js 在你部署后有没有更新过,如果有更新,将更新后的代码,更新到你的Workers中,重新部署Workers

更新出错时流程

这个操作不是最简单的,但是是最不容易出错的方式

  1. 首先注意一下https://github.com/mumuchenchen/pikpak/blob/main/cf-worker/index.js 在你部署后有没有更新过,如果有更新,将更新后的代码,更新到你的Workers中,重新部署Workers(或者就直接不管是否更新,就直接无脑复制过去重新部署)
  2. 回到你的Github主页(https://github.com/)切换到项目,选择【settings】,拉到底,在Danger Zone中找到【Delete this repository】,在输入框中输入他要求的XXXX/pikpak删除整个仓库。
  3. 然后重新执行一遍 GitHub部署 操作

一些可能需要你注意的东西
1. 没必要绑定自己的域名,用github.io就好,github的那个绑定咋说呢,广播的有点慢。进行绑定子域时,站点会有不短的一段时间都无法访问,尤其是在你设置了HTTPS时。
2. 一般来说没必要改仓库名,保持是XXXX/pikpak,如果你真的希望改,请新建一个secrets,Name填BASE_PATH,Value填你的仓库名如/tjskypikpak
3. 如果你想绑自己的域名,因为绑定后地址就从类似tjsky.github.io/pikpak/变成了类似pikpak.tjsky.net的无子目录状态,所以新建的secrets,Name填BASE_PATH,Value填一个/就可以了。
3. Cloudflare Workers是有限制的,免费计划每分钟最多1000次请求,每天最多10W次请求,超了就会报错。
4. 这个的部署方式非常多,比如你可以用cloudflare page代替GitHub page部署网站,可以用自己的服务器,替代Cloudflare Workers去做反代。。。等等很多方式。

22条评论
  • Lu

    2021-11-04 14:50

    自己搭建登录不上是怎么回事

    1. 扬帆大海

      2021-11-06 15:36

      现在可以了吗?昨天有一波更新

  • dliner

    2021-11-06 19:53

    登陆不上。

    1. 扬帆大海

      2021-11-08 11:08

      你自己搭建的?还是Demo站?

  • xdddhd

    2021-11-10 20:53

    有个坑,不能改fork后的项目名称,改了会变空白

    1. 扬帆大海

      2021-11-11 20:00

      可以改的,你需要同步改一下vite.config.ts里第八行的代码

      1. xdddhd

        2021-11-12 19:13

        OK,thanks

        1. 扬帆大海

          2021-11-26 09:37

          代码更新了,可以直接适配仓库名的修改,可以具体看一下代码的comments

  • bbb

    2021-11-21 20:41

    请问aria2暂时还是不支持对吧?

    1. 扬帆大海

      2021-11-22 15:45

      支持的。网页版设置里有调用aria2的设置,如果那个不好用,自定义菜单有个通过AriaNG变通实现的方法

      1. QiTianzu

        2021-11-27 15:59

        请问绑定自己的域名无法访问的表现是页面空白吗,怎么部署到cloudflare page呢?

  • QiTianzu

    2021-11-26 22:39

    进行绑定子域时,站点会有不短的一段时间都无法访问,尤其是在你设置了HTTPS时,无法访问的表现是页面空白吗?

    1. 扬帆大海

      2021-11-27 22:12

      如果绑定前白屏,那应该是github page选不对

      1. QiTianzu

        2021-11-28 12:01

        是绑定后才白屏,我发了 issue,大佬看一下吧 https://github.com/mumuchenchen/pikpak/issues/10

  • QiTianzu

    2021-11-27 00:53

    “进行绑定子域时,站点会有不短的一段时间都无法访问,尤其是在你设置了HTTPS时”,请问无法访问的表现是页面空白吗?

  • andysea

    2021-11-27 06:32

    你好,我设置了自定义域名后提示404
    文件未找到

    在此地址配置的站点不包含请求的文件。

    如果这是您的站点,请确保文件名大小写与 URL 匹配。
    对于根 URL(如http://example.com/),您必须提供一个 index.html文件。
    不知道怎么回事,谢谢。

    1. 扬帆大海

      2021-11-27 22:17

      后面加个/pikpak试试

      1. andysea

        2021-11-28 11:02

        就是加了/pikpak/才是404,不加是空白

  • QiTianzu

    2021-11-27 10:43

    自定义域名站点访问不了的表现是网页空白吗

    1. andysea

      2021-11-28 11:26

      是的,后面+pikpak就是404错误。我是用的GitHub Pages的https

      1. QiTianzu

        2021-11-28 20:48

        https://github.com/mumuchenchen/pikpak/commit/12da47ca8f3c881ba082c39be82ef98aef96b095
        这个原来早就解决了,在 Secrets 里新建一个 Name 为 BASE_PATH,Value 为 / 的 Secret 就行了。

        1. 扬帆大海

          2021-11-28 20:50

          谢谢啦~

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注