前言

继上文,我们获得了OneDrive网盘5T空间。作为博客写作者来说,我希望能够搭建一个公共网盘来分享资源,甚至是用网盘来做图床。再一次继上文,部署一个静态网页还不够酷。于是两个教程一拍即合,有了你现在浏览的这个教程。使用Vercel结合OneDrive来创建一个页面索引充当我们的公共网盘。这类似于OneIndex程序,然而OneIndex已经很久没有维护过了,并且Github上面大量的fork让咱无从下手还有就是界面也不好看。这就要引出我们今天使用的程序——onedrive-vercel-index

vIudXV.md.png

(我使用onedrive-vercel-index搭建的公共网盘)

优势

我简单说几点超赞的特性。想要查看完整的特性列表?移步Github
你可以访问我的公共网盘站体验!(https://pan.iamdt.cn/)

  1. 支持超多文件格式在线预览:PDF, EPUB, markdown, code, plain text;docx, pptx, xlsx等Office文件格式。
  2. 在任何文件夹页面创建README.md文件直接在列表底展示出来
  3. 支持多种视频格式在线播放(还可以显示字幕的哦)
  4. 多文件夹或文件打包下载(开发者:事实上它性能不太好,所以我只推荐你用它下载数量大的小文件,而不推荐下载大文件。)
  5. 受密码保护的私密文件夹(开发者:防君子不防小人,明文 token 存储在 localStorage 中,有极大潜在隐患,建议不要用于敏感信息的分享。)
  6. 唯美的UI页面(确信)
  7. 等等…

准备

  1. 一个OneDrive账号(不管是个人账号还是E5账号;国际版还是世纪互联版都可以。世纪互联账号需额外配置)
  2. 一个Github账号
  3. 一个Vercel账号
  4. 一个域名(没有也无关紧要)
  5. 一个智慧的大脑

相关链接

项目地址:https://github.com/spencerwooo/onedrive-vercel-index
官方文档:https://ovi.swo.moe/zh/docs/getting-started
Vercel官网:https://vercel.com/

太长不看版

这是一个简短的构建你自己的 onedrive-vercel-index 的指导。如果你无法理解这些步骤,可以看下方详细教程。

  1. Fork 此项目。
  2. 将 site.config.js 里的 userPrincipleName 改为你的微软账户邮箱。
  3. 将 site.config.js 里的 baseDirectory 修改为你要分享的文件夹路径。
  4. 根据你的 OneDrive 版本示情况修改 api.config.js。
  5. 将你的项目导入到 Vercel 并 添加 Upstash 插件 以更方便地设置 REDIS_URL 环境变量。
  6. 部署,并享受!

部署完成后的项目会引导你进行 OAuth 步骤,并自动将所需的凭证存储到 Redis 数据库里。这就是我们要做的全部事情!

立即上手

onedrive-vercel-index 本质上就是由 Next.js 构建的模板,你可以将其免费部署在 Vercel、Netlify 或者其他托管平台上。下面我们将 完全从头开始 创建你自己的 onedrive-vercel-index。

项目配置

打开onedrive-vercel-index项目的Github链接,点击Fork,将它Fork到自己的仓库以便于后续的配置。

vIu10S.md.png

进入刚刚Fork的项目,按照图中的目录找到site.config.js,打开并且编辑它。

vIulm8.md.png

根据自己的实际情况更改图中的两个配置。

  • userPrincipalName - 是用来在 OAuth 步骤时认证你的个人信息的。通常是你的 微软账户邮箱
  • baseDirectory - 是你要分享的 OneDrive 目录。你必须保证此目录有效且与此参数一致。(你可以直接在 OneDrive 内创建一个叫做 Public 文件夹,并将此项设置为 /Public。)

(其他的配置后续会提及有何作用。)

vIuK6P.md.png

点击绿色的按钮提交刚刚修改的代码。

vIuult.md.png

到这里,你就完成了项目的配置。但是如果你是世纪互联用户,也就是我们常说的微软国内版用户,你还需要进行如下额外的配置。

点击此处,参考官方文档。本文由于篇幅的缘故就不多赘述。

开始部署

打开Vercel官网,进入控制台新建一个项目。

vIuJYj.md.png

导入刚刚fork的项目。点击import

vIuNpn.md.png

按照图中进行设置。

  • 修改 Build command 为 pnpm build
  • 修改 Install command 为 pnpm install

然后点击部署,Vercel 将会下载你的项目并进行部署。这次部署有可能会失败,这是因为我们还没有设定 REDIS_URL 环境变量。这就是我们接下来要做的。

vIuGkQ.md.png

连接到 Redis

打开网站Upstash(https://vercel.com/integrations/upstash),注册并绑定。

点击Add integration添加集成环境,按照提示操作即可,项目依然选择刚刚Fork的项目。

vIuYfs.md.png

完成后可以在Vercel后台看到已经集成好的环境。

vIuUlq.md.png

最后在Vercel的Deployments页面中点击 Redeploy即可完成。

vIua60.md.png

(你可以自行前往Vercel自定义你的域名)

安装

访问你的 onedrive-vercel-index ,如果你从未进行认证,OAuth 认证将会自动开始。

vIu7hd.md.png

安装向导足够清晰,这里不多赘述。

如果你遇到了什么问题,可以前往官方文档查找资料。进行认证 - OneDrive Vercel Index (swo.moe)

安装完成后,你将会跳转到你全新的 onedrive-vercel-index ,完成!

截止到这里,你已经完成了项目的部署与安装,现在你可以正常使用你的公共网盘了!下面是一些自定义的个性配置,建议也一起配置了哦。

vIudXV.md.png

个性化配置

你可以在site.config.js中自定义你的网站,下面摘录了官方文档的部分设置。

icon

icon - 是标题栏中标题左边的图标。 它应该被放置在你的 GitHub 项目的 /public 目录,而不是你的 Onedrive 目录 ,并且填上它在 /public 目录内的路径。

比如说,你的项目的 /public 路径长这样:

.
├── favicon-16x16.png
├── favicon-32x32.png
├── favicon.ico
├── icons
│   └── 64.png
└── ...

然后你想让 64.png 作为你的网页图标,那么你应该将 site.config.js 里的 icon 设置为 /icons/64.png。你的网页的 favicons 也应该放置在 /public 目录,请访问 favicon.io 以生成你的 favicons。

title - 网页标题

标题栏上的网页标题,图标右边那个。

网页的页脚。你可以在这里写 HTML ,但你要注意双引号 - 你需要将 " 替换为 \"。你可以在这里写任何东西。如果你喜欢徽章,可以在 shields.io 生成一些。

protectedRoutes

你可以创建一个需要密码才能访问的文件夹,详情请参考 私密文件夹

email

email - 这是可选项,如果你不想展示任何邮箱,你可以删到只剩 ""

- "email": "mailto:[email protected]",
+ "email": "",

我还是建议你放上一些联系方式的。

links - 你可以添加你想要展示的链接,格式为 { "name": "xxx", "link": "xxx" }。我们已经支持所有来自 Font Awesome 的图标,只要你有 name。请查看下面的演示:

https://ovi.swo.moe/videos/links-copilot-demo-video.mp4

请到 Brand Icons | Font Awesome 查看图标列表。

后记

文章写到这里,我感慨很多。一方面原因是昨天我又触发了一次typecho写作的离奇BUG。事实上,之前一篇文章的写作中我也遇到了同样的问题,并且提交了Issue…如果你感兴趣的话,可以来了解一下。emoji表情导致文章发布/保存草稿内容缺失 · Issue #1486

另一方面,现在深圳疫情不容乐观,从这周一(8.29)小区出了个小阳人导致我所居住的楼层被封控了三天。三天里我的心情起起伏伏,学校无法开学而开始网课(讲真的,我很讨厌上网课)。封控在周四(9.1)下午六点钟解除,但是学校那边不断在传高三返校全封闭管理,刚开始的时候,我很抗拒这件事情,毕竟我还没有体验过住宿生活…心情又低沉了一天。周五学校大致确定高三全封闭,而我开始向往住宿生活了(是的,我调整就是这么快)。周五(9.2)中午我开始了本篇文章的写作,周五下午七点左右完成了文章写作 But! 正如我上面说的,保存的时候文章内容丢失(大约只保留了百分之10),我又裂开了。。。晚上七点左右传闻南山区全小区封闭,后来确认这是真的,是的,我又被封了。这一次是两天。原计划周天的返校计划又被打乱了。

所以请大家,勤洗手,出门戴口罩,不到人员聚集的地方。能够自由的出门真的是一件来之不易的事情,还请珍惜。积极配合防疫工作就是在保障自己的健康!

另外也建议各位博主们养成本地写作的好习惯!我现在重写文章是真的很痛苦且没必要!这里我推荐一个可以多平台同步的简约写作工具喵滴(支持Markdown语法,可以导出.md等文件)。喵滴官网 (miaodiapp.com)

我不恰饭,只是分享。如果你还有什么好用的写作工具欢迎分享哦!

最后总结:我热爱写作