注意到博客往往都有一个资源站，由于现在博客刚刚起步，我也想尝试在博客里搞个“资源库”，分享一下资料和图片。
刚开始我也不知道要怎么做，本着现在刚刚起步，我目前想的是零成本路线。
经过不断地查找资料，我敲定了先使用 AList + Vercel + 网盘的路线(主要是因为 Cloudflare R2 的免费套餐存储空间有限)。
本来我想的是 Microsoft 的 OneDrive E5，这个容量大但是白白折腾了一圈后发现：之前薅羊毛的人太多，微软修改了规则，普通微软账号，不再直接赠送 E5 开发沙箱。
微软的方案显然作罢。
但是想到网盘，我想起了国内 123盘 的空间很大，值得尝试。

以下是今天的折腾记录，给有同样需求的做个参考。

Vercel 不适配，转向 Zeabur

本来我想的是之前使用过 Vercel，干脆统一渠道，在资源站这里也使用 Vercel。但由于种种问题，我没有找到适配 AList 的 Vercel。

在这里，服务器我改选了 Zeabur，有一键部署的 AList 镜像，对个人博客来说免费额度够用了。

  1. 首先是进入 Zeabur 网页(也可以选择国内版 Zeabur )，登录并进入控制台。

  2. 接着 创建项目 -> 模板(选 AList) -> Deploy

    1bbf122aa0d5bcc928b2e5162e0da3f6.png

    这里域名随便写，之后要改成自己的子域名。

  3. 接着在服务状态这个页面中点击日志，在日志中找到 Successfully created the admin user and the initial password is 即初始管理员密码

  4. 进入Zeabur 分配的域名中，并加入 /@manage 输入对应的管理员用户名和密码进入管理页面。

  5. 最后在管理员页面点击 存储 -> 添加 -> 驱动选择123盘
    d5c00d61e590ef21b6427552c9ff1cf8.png

123盘风控拦截，转向阿里云盘Open

由于我暂时还没有做域名备案，所有上一步我选择的时国际版的 Zeabur，所以同时只能选择国外的节点，这里123盘出现了风控的问题：

b03c30fac1579a4e900e18d95cc618eb.png

几经辗转，我选择了 阿里云盘Open。

  1. 进入 AList 后台，在存储中点击添加，选择 阿里云盘Open。
  2. 登录阿里云盘，选择对应文件夹并进入，在url中获取文件夹id https://www.alipan.com/drive/file/all/xxx，其中 xxx 就是文件id，天瑞对应的文件id并保存。
  3. 在 zeabur 后台进入对应域名，检查是否成功

子域名设置 + Cloudflare 后台锁

子域名设置

由于第一步中我在 Zeabur 中是随便设置的域名，但是博客是独立域名indolyn.com。如果访客点击资源，但会“跳出”博客会显得这个非常业余，同时使用 Zeabur给的二级域名很容易被 DNS 污染，在这里要重新设置资源站的域名。

  1. 首先是进入 Zeabur 的控制台并进入对应的项目，在网络分页中，点击 +自定域名。
  2. 输入对应的子域名，次数 Zeabur 会给出一条 DNS 的的记录。在对应的域名解析中加入一条 DNS 记录即可。

Cloudflare 后台锁

实现玩域名修改我本以为后端已经万事大吉了，但是我注意到，我自己在调整网盘策略是就频繁登录后台。这显然是不安全的。

为了增加安全性，我使用了 Cloudflare 的 Zero Trust 为 AList 后台上了锁。这样，这个后台只有经过我的邮箱验证才能打开(前提是这个域名由 Cloudflare 托管)。

以下是配置步骤:

  1. 登录 Cloudflare，点击左侧的 Zero Trust。如下图依次点击，这里我选择的是 Emails 策略，这样必须经过我的邮箱才能访问这个网站，同时由于之前设置的域名邮箱，这样我也没有暴露自己的真实邮箱，同时也不用担心被邮件轰炸。

55bb5fdd64a74ef7b0ace0b16dd29c0e.png

  1. 进入对应域名，左侧点击 Access，右侧点击启用 Zero Trust。
  2. 进入页面后左侧依次点击 访问控制 -> 应用程序，右侧点击 添加应用程序，选择自托管。
  3. 点击添加公共主机名，选择对应的子域名的路径(AList 这里是 @manage)，并应用第一步添加的策略。

到这里就大功告成了。

调整资源站样式

现在解决了资源站的域名问题，但资源站的样式是 AList 自带的样式，预我的博客样式不符

为了解决这个问题，我决定把 AList 的顶栏和页脚全部魔改，让它长得和我的 Butterfly 主题一模一样。

我的想法很简单：在 Hexo 里新建个页面，用 <iframe> 把 AList 网盘嵌进去。

结果折腾了一下午，心态崩了：

  1. 无限弹窗：因为跨域限制，浏览器拦截了 Cookie，AList 就算登录了也一直弹窗让我重新登录。
  2. 双重滚动条：博客有一个滚动条，网盘里又有一个，手机上体验极差。
  3. 样式割裂：AList 自带的白色界面和我的博客风格完全不搭。

既然“硬塞”进去不行，我换了个思路：直接用子域名部署 AList，然后通过 CSS 把它“易容”成我的博客。
在 AList 后台 设置 -> 全局 -> 自定义头部 里，我加了下面这段代码。
它的作用是：隐藏 AList 原生元素 + 注入一个高仿的博客导航栏。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<link rel="stylesheet" href="[https://npm.elemecdn.com/font-awesome@4.7.0/css/font-awesome.min.css](https://npm.elemecdn.com/font-awesome@4.7.0/css/font-awesome.min.css)">

<style>
    :root {
        --hope-colors-primary: #4A6FA5 !important;
        --hope-colors-background: #F8F9FB !important;
    }
    .footer { display: none !important; }
    .header-left { display: none !important; }
    .hope-c-PJLV-ijhzIfm-css { display: none !important; }
    .custom-nav {
        position: fixed; top: 0; left: 0; width: 100%; height: 60px;
        background: #4A6FA5;
        z-index: 9999;
        display: flex; align-items: center; padding: 0 20px;
        color: white;
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    }
    #root { padding-top: 60px !important; }
    .header { top: 60px !important; background: transparent !important; box-shadow: none !important; }
    .custom-menu-item {
        color: white; text-decoration: none; margin-right: 20px;
        font-size: 14px; font-weight: bold;
    }
    .custom-logo { font-size: 18px; font-weight: bold; margin-right: 40px; }
</style>

<script>
window.onload = function() {
    var nav = document.createElement('div');
    nav.className = 'custom-nav';
    nav.innerHTML = `
        <div class="custom-logo">Indolyn's Blog</div>
        <a href="[https://www.indolyn.com](https://www.indolyn.com)" class="custom-menu-item"><i class="fa fa-home"></i> 首页</a>
        <a href="[https://www.indolyn.com/archives/](https://www.indolyn.com/archives/)" class="custom-menu-item"><i class="fa fa-archive"></i> 时间轴</a>
        <span class="custom-menu-item" style="opacity:0.6;"><i class="fa fa-cloud"></i> 资源库</span>
    `;
    document.body.insertBefore(nav, document.body.firstChild);
}
</script>

总结

到这里，博客折腾记基本完成了。这次主要是记录我从0开始搭建博客的过程(从仅用一个域名开始)。之后博客有相应的升级我也会在这个系列更新的。