背景：之前在找网络分享盘的时候就很纠结h5ai还是filebrowser，两款工具都很轻量，h5ai比较简洁漂亮但是只有下载功能。filebrowser功能性强一点，但是界面不是很喜欢。最后，只好把两个综合起来用了。实在不想让我的甲骨文白白躺着不用，充分利用起来，做好科技分享站！

特别感谢：玩家@mzzsfy在搭建过程中的手把手教学，让我少走了好多弯路！！！

官网地址：https://filebrowser.org/
项目地址：https://github.com/filebrowser/filebrowser

本站演示地址：科技玩家Share

特别开通了一个科技玩家账号给大家体验，“科技玩家圈”公众号发送“share”即可获得账号密码，祝君享用愉快。

个人觉得h5ai更适合做下载站，filebrowser就适合做网盘分享，可以上传文件，生成分享链接（支持时效性），功能性上没话说。最主要的是支持docker安装，非常方便！（但是我的甲骨文arm安装docker真的把我折磨死了，后面另外写一篇记录）。先看一下FileBrower效果。

下面开始认真码字。

解题思路

服务器?安装宝塔+Docker?部署FileBrowser?基本配置

准备工作：1、服务器；2、域名

服务器安装好宝塔：小白请参考下面的文章，教程默认已经安装宝塔。

服务器宝塔Docker安装教程（小白特供）

LAzySheep

• 21年12月19日
• 喜欢：10
• 浏览：19.6k

解析的域名：自行购买，挑活动时候购买比较划算，最近新网在搞活动可以看一下。

LAzySheep

“老朋友”新网活动：0.99元买com域名、0元购企业邮箱、虚机1折

22年1月11日

• 利好1
• 利空0

我的运行环境：Oracle Linux 7.9（Arm）+宝塔+Docker

甲骨文因为当时白嫖的，已经装了系统了，不打算重装，新朋友还是推荐服务器安装Centos7系统。

部署FileBrowser

官方支持多种方式，详见?官方安装。我这里主要说Docker安装方式，比较方便快捷。

一、安装FileBrowser

1、了解一下FileBrowser的目录树结构：

├── 网站根目录
│   ├── 分享文件目录
│   └── 自定义logo目录
├── 数据文件目录
│   ├── config
│   └── database

啰嗦一下，数据文件目录其实可以和网站根目录一样，但是放根目录下就会显示在分享站点，个人觉得这些数据文件没必要前台显示，所以我另外建立了映射目录。总之，举一反三吧，理解逻辑意思就好。

下面是我的目录树：

2、新建文件夹和文件

这里需要手动建立数据库filebrowser.db文件和配置文件settings.json。

如果不先建立好的话，docker命令安装时，只会对应生成文件夹，而不是生成一个文件。不信你就试试。

其中配置文件settings.json也可以选择不映射，如果映射，则需要编辑默认内容，否则报错。

touch /www/wwwroot/filebrowser/database/filebrowser.db
touch /www/wwwroot/filebrowser/config/settings.json

settings.json默认配置内容：

{
  "port": 80,
  "baseURL": "",
  "address": "",
  "log": "stdout",
  "database": "/database/filebrowser.db",
  "root": "/srv"
}

按键盘字母i进入编辑模式，在最末尾粘贴上面?的内容，再按键盘esc退出编辑模式，输入:wq保存并退出编辑。

 我的目录树：

├── filebrowser
│   ├── config
│   │   └── settings.json
│   └── database
│       └── filebrowser.db
├── kejiwanjia
│   ├── 分享文件
│   ├── 分享文件夹
│   └── 分享文件夹 ─ 分享文件

3、一键安装FileBrowser

sudo docker run -d \
    -v /www/wwwroot/kejiwanjia:/srv \  
    -v /www/wwwroot/filebrowser/database/filebrowser.db:/database/filebrowser.db \
    -v /www/wwwroot/filebrowser/config/settings.json:/config/settings.json \
    -e PUID=$(id -u) \
    -e PGID=$(id -g) \
    -p 8080:80 \
    --name=share \
    --privileged=true \
    --restart always \
filebrowser/filebrowser:v2-s6

容器内文件夹/srv映射的/kejiwanjia目录就是站点根目录，需要分享的文件放在/kejiwanjia目录下即可。

请注意，映射的8080端口不要和其他服务冲突，同时记得在宝塔和云平台放行端口。

不出意外的话，你现在可以通过ip+端口来访问你的filebrowser了，初始用户名和密码都是admin。

好啦，一个分享小站即将诞生，坐稳扶好，马上开始飙车咯！

二、配置FileBrowser

1、个人设置

点击设置可以进行一些自定义设置。

第一步就是先去setting里面修改语言为“中文”，然后修改默认密码。刷新界面。

2、分享管理

如果你分享过文件的话，这里会有分享记录，可以进行复制和删除操作。

3、全局设置

可以开启用户注册、设定用户权限、自定义品牌信息。

自定义品牌信息等下在美化部分展开说。

4、用户管理

可以建立多个用户访问，同时可以指定权限和目录范围。这里的[.]代表就是根目录。

了解了基础功能设置后，咱们再来好好美化一下自己的分享站点吧。

三、美化FileBrowser

细心的小伙伴可能已经发现，懒羊羊的截图logo都已经换成“小灯泡”了。下面我就来教大家怎么美化这些小东东。

说到这里，就必须搬出来@mzzsfy大佬了，全靠他点拨我才顺利完成了这些美化工作。再次感谢这位大佬的耐心指导！

官方说话叫“Custom Branding“（自定义品牌），详见官方文档。

1、显示品牌名称：即登录时显示的名称。

在 设置-全局设置-品牌-实例名称 进行修改

2、显示品牌logo：即站点logo、favicon图标等。

在映射的根目录下新建一个文件夹，来管理自定义品牌信息，主要就是logo.svg和img目录。custom.css用来定义一些样式，等下说。目录树如下：

├── kejiwanjia
│   └── style
│       ├── custom.css
│       └── img
│           ├── icons
│           └── logo.svg

由于是Docker部署的，所以品牌路径应该要填容器内的目录路径，而不是容器外的。
所以填/srv/style。同时，☑️勾选 禁止外部链接 选项。

logo.svg主要是控制站点的登录logo，和管理面板左上角的logo。

如果还想修改浏览器标签页的favicon图标等，则需要在/style/img/icons目录下分别定义不同尺寸的icon图标来实现。

可以参考?官方文档，这里我再推荐一个在线图片转换网站?SVG转PNG，非常友好，我是用这个网站完成转换的。

实现效果是这样的：（我的强迫症真的很严重。）

3、其他页面美化

通过custom.css文件来实现，文件放在img的同级目录下。

custom.css可以直接填写代码，也可以通过引用链接的方式来实现。这里继续推荐一个css文件，黑夜模式效果极佳。

1）如果是代码模式，直接复制地址代码到custom.css文件即可.

2）如果用引用的方式，则按下面的方式填写。

import@ url("https://raw.githubusercontent.com/jniggemann/filebrowser-css/main/custom.css");

设置了新的logo和样式之后，请务必清除缓存，强制刷新网页才能生效！如果配置了反代和cdn，缓存也都要清理！建议用ip+端口的方式先强制刷新，访问看看是否已经生效。

总的来说，filebrowser还是很实用的。支持在线编辑文件，上传/下载，分享还可以设置密码和时效。

如果有闲置服务器，推荐各位玩家体验一下哦，在线编辑js文件也是可以的哦。

特别开通了一个科技玩家账号给大家体验，公众号发送“share”即可获得账号密码，祝君享用愉快。

网盘分享的事情终于可以告一段落啦，后面逐步更新导航的资源链接。

其他网盘搭建：

H5ai文件目录列表程序(云网盘)搭建小记

LAzySheep

• 22年1月16日
• 喜欢：2
• 浏览：3.5k

H5ai文件目录列表程序(云网盘)基础界面美化介绍

LAzySheep

• 22年1月16日
• 喜欢：1
• 浏览：2.4k