搭建 Flare 书签-悠然地日志集

前言

几月前，我开始重建 PKM（个人信息管理）系统，其中有一个环节就是浏览器书签的管理。
实话说，我对于现有的书签程序并不是特别满意，主要因为它们都不能同时满足我的以下几个预期：
我希望这个工具能够更高效和更简单，而不是只有极少数内容在书签栏呈现，更多的内容需要在层层「文件夹」中翻找；或者需要绞尽脑汁，通过在搜索栏中碰运气，看看能不能靠关键词和自动补全来匹配出具体内容。猜测和翻找都太浪费时间了。实际上，正如我在之前一篇文章中所提及，在使用 Chrome 的十几年里，上千个书签慢慢的出现在了收藏夹里，然后和现实中放在书柜里的书一样，蒙上了厚厚的灰尘。
我希望书签数据都是私有化的、少一些不确定因素。作为一个使用了各种互联网产品二十多年的「年轻人」，我看到过太多工具和公司的生生死死、浮浮沉沉。不少在线服务和软件背后的公司慢慢变成了时间长河里的一粒沙，在产品和公司陨落的过程中，用户的数据则经常变成陪葬品。 数据随着产品一起消失，这是我不愿意看到的。
我希望书签工具是通用的。书签数据不应该掺和浏览器打架，也跟着玩「生殖隔离」。即使我绝大多数情况下只用 Chrome，但是我依旧希望在我打开 Safari 的时候，也能够用鼠标「指指点点」这些书签，快速的到达我想要去的地方。（我知道有浏览器之间的书签导入功能，但持保留态度，因为曾经在迁移的时候出现「书签大乱斗」「书签影分身」这类意外。）
在尝试了使用各种软件之后，我偶遇了一个波兰程序员小哥的项目 Flame。这是一款个人网址导航制作工具，你可以用它将常用的书签和在线应用制成一个美观的本地页面。
不过，Flame 也并不完全符合我的预期。在深入使用这个软件，重构了一部分代码、封装了容器应用，并提交了几个 PR 之后，我想清楚了我到底要的是什么。于是我决定自己动手，基于 Flame 制作了一个外观和功能相仿，但性能更高、数据更透明、使用起来更简单的书签导航工具——Flare。

作者：

从零开始搭建个人书签导航应用：Flare - 苏洋博客 (soulteary.com)

不满意于现有书签工具，我做了一个专属自己的网址导航 - 少数派 (sspai.com)

Flare 的特点

轻量快速：Flare 的容器镜像体积不到 10MB，内存占用通常低于 30MB，即使添加上千条书签也能快速打开，适合在资源有限的设备上使用。
隐私安全：所有数据存储在本地的 YAML 文件中，用户的数据完全由自己掌控，避免了在线服务带来的隐私风险。
易于配置：Flare 提供了简单的配置文件，适合新手用户，且支持多种设备。
在线编辑：用户可以随时在线编辑书签，方便管理和更新。
图标支持：Flare 内置了 Material Design 图标库，用户可以为每个书签选择统一风格的高质量图标。

项目展示:

1. 使用向导

为了方便我们的使用，大佬制作了一个简单的向导程序，在 flare 启动之后，我们可以随时访问 域名/guide，获取 flare 基础界面功能的介绍。

2. 书签页在线编辑

为了满足随时随地删改导航界面的需求，新增 “在线编辑” 的页面

3. 帮助页面

为了减少不必要的地址记忆负担，新增了一个 “帮助页面”，默认展示所有的程序内的工具页面。

4. 矢量图标

为了方便小伙伴使用 flare，内置了来自 materialdesignicons.com 中所有的 Material Design Icons，你可以让你的每一个书签都拥有风格统一、高质量的矢量图标。

5. 性能

“快” 作为 Flare 的主要优势而言，程序前端部分自然是需要一些 “满分” 来凑个热闹的。

环境准备

详细安装 docker 和 docker-compose 以及配置 daemon.json 的步骤我就省略了。

快速部署 docker 环境

1.1 安装 Docker（非大陆服务器）

curl -sSL https://get.docker.com | sh
docker -v #查看 docker 版本

1.2 安装 Docker-compose（非大陆服务器）

sudo curl -L "https://github.com/docker/compose/releases/download/1.29.2/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
sudo chmod +x /usr/local/bin/docker-compose
docker-compose --version #查看 docker-compose 版本

2.1 安装 Docker（国内服务器）

curl -sSL https://get.daocloud.io/docker | sh
curl -sSL https://get.daocloud.io/docker | sh
systemctl enable docker # 设置开机自动启动

2.2 安装 Docker-compose（国内服务器）

curl -L https://get.daocloud.io/docker/compose/releases/download/v2.1.1/docker-compose-`uname -s`-`uname
 -m` > /usr/local/bin/docker-compose
chmod +x /usr/local/bin/docker-compose
docker-compose --version #查看 docker-compose 版本

安装和使用 Flare

如果想直接使用感受一下，可以直接 docker 快速部署，但是在实际使用推荐使用 docker-compose。

1.1 使用 Docker 快速试用 Flare

docker pull soulteary/flare
docker run --rm -d -p 5005:5005 -v `pwd`/app:/app soulteary/flare:latest

这个时候，我们在浏览器中打开 http://ip:5005，就能够看到前文中的书签导航页面了。

1.2 使用 docker-compose 运行 Flare

创建运行目录

sudo -i
mkdir -p /opt/Flare
cd /opt/Flare
cat > docker-compose.yml << EOF
version: '3.6'
services:
  flare:
    image: soulteary/flare:latest
    restart: always
    command: flare
    ports:
      - 5005:5005
    volumes: 
      - ./app:/app
EOF
docker-compose up -d

然后我们就可以输入 http://ip:5005 进行访问了。

进阶用法：在公网服务器上使用

尽管 Flare 的常见使用场景是在本地运行，但也不排除有的小伙伴希望软件能够跑在云服务器上，比如让吃灰久矣的「轻量云」焕发生机。这就会涉及到两个问题：如何增加登录要求，防止未经授权的访问和修改；以及如何配置自定义域名和反向代理。

对于前者，Flare 支持通过 --nologin 参数来关闭默认的「免登录模式」：

flare --nologin=0

默认情况下，程序会使用 flare 作为账户名称，并随机生成的管理密码。这可以从运行时输出的日志看到。如果我们想使用自己的指定账号和密码登录的话，可以通过在环境变量中设置 FLARE_USER 和 FLARE_PASS 来实现。

因此，如果使用 Compose 文件来表述，完整的配置是：

version: '3.6'
services:
  flare:
    image: soulteary/flare:latest
    restart: always
    command: flare --nologin=0
    # 关闭免登录模式
    environment:
      - FLARE_USER=flare
      # 指定的用户名
      - FLARE_PASS=password
      # 指定的密码
    ports:
      - 5005:5005
    volumes:
      - ./app:/app

美化页面

Flare的默认页面时黑白的，轻便简约。如果你想让的页面变得好看一点可以通过在页脚里面写html来实现。

通过主题修改字体颜色，我这里使用的是最后一个onedark。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>插件容器示例</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }
        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: -1;
            background-image: url('https://bing.img.run/rand.php'); /* 必应随机壁纸 */
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            filter: blur(0px); /* 图片模糊程度，0为不模糊 */
        }
        .plugin-container {
            background-color: rgba(0, 0, 0, 0.5);
            border: 1px solid rgba(0, 0, 0, 0.1); /* 背景框颜色及透明度 */
            border-radius: 10px;
            padding: 20px;
            box-sizing: border-box;
            margin: 0 auto;
            max-width: 1200px;
        }
        .content {
            text-align: center;
            color: #333;
        }
        .content h1 {
            font-size: 2em;
            margin-bottom: 20px;
        }
        .content p {
            font-size: 1.2em;
            margin-bottom: 40px;
        }
    </style>
</head>
</html>

目录CONTENT

搭建 Flare 书签

前言