从零搭建磨砂玻璃风格导航站 - Docker/Cloudflare 双版本部署指南

打造属于你的个人导航站,支持 Cloudflare 和 Docker 两种部署方式,还有浏览器插件快速添加收藏

📌 项目简介

NavDashboard 是一个简洁美观的个人导航仪表盘,支持分类管理、图标自动获取、数据导入导出等功能。

项目特点

🎨 毛玻璃 UI 设计,颜值在线

📁 支持多分类管理

🔍 站点搜索功能

📤 Chrome 浏览器插件,右键快速添加

🔒 密码保护后台

💾 数据导入导出备份

项目地址 https://github.com/debbide/nav-dashboard

演示地址 https://nav.csee.de5.net

☁️ 方式一 Cloudflare 部署

使用 GitHub Actions 自动部署到 Cloudflare Pages,完全免费,全球 CDN 加速。

前置准备

1 注册 Cloudflare 账号 https://dash.cloudflare.com

2 注册 GitHub 账号

3 Fork 本项目到你的 GitHub

第一步创建 Cloudflare 资源

创建 D1 数据库

进入 Workers and Pages 然后点击 D1

点击 Create database

输入名称 nav-dashboard-db

记录下 Database ID 后面要用

创建 KV 命名空间

进入 Workers and Pages 然后点击 KV

点击 Create a namespace

输入名称 nav-dashboard-kv

记录下 Namespace ID 后面要用

第二步获取 API Token

访问 https://dash.cloudflare.com/profile/api-tokens

点击 Create Token

选择 Edit Cloudflare Workers 模板

确认权限包含

Account Workers Scripts Edit

Account Cloudflare Pages Edit

Account D1 Edit

Account Workers KV Storage Edit

点击 Create Token

立即复制 Token 只显示一次

第三步配置 GitHub Secrets

进入你 Fork 的仓库

点击 Settings 然后 Secrets and variables 然后 Actions

添加以下 4 个 Secrets

CLOUDFLARE_API_TOKEN

填入刚才复制的 API Token

CLOUDFLARE_ACCOUNT_ID

在 Cloudflare Dashboard 右侧找到 Account ID 复制填入

D1_DATABASE_ID

填入第一步创建的数据库 ID

KV_NAMESPACE_ID

填入第一步创建的 KV 命名空间 ID

第四步运行部署

进入仓库的 Actions 页面

点击左侧 Deploy to Cloudflare

点击 Run workflow

选择 main 分支运行

等待部署完成大约 2 分钟

第五步配置 Pages 绑定

重要首次部署后需要手动配置一次绑定

进入 Cloudflare Dashboard

点击 Pages 找到 nav-dashboard 项目

进入 Settings 然后 Functions

添加 D1 绑定

Variable name 填 DB

选择 nav-dashboard-db 数据库

添加 KV 绑定

Variable name 填 KV

选择刚才创建的 KV 命名空间

点击 Save

完成后访问

主页 https://nav-dashboard.pages.dev

后台 https://nav-dashboard.pages.dev/admin.html

默认密码 admin123

🐳 方式二 Docker 部署

适合有自己服务器的用户,一键部署,数据本地存储。

docker-compose.yml 配置

services:

  nav-dashboard:

    image: ghcr.io/debbide/simple-nav-dashboard:latest

    container_name: nav-dashboard

    restart: unless-stopped

    ports:

      - "3000:3000"

    volumes:

      - ./data:/app/data

      - ./uploads:/app/uploads

    environment:

      - ADMIN_PASSWORD=admin123

      - TZ=Asia/Shanghai

部署步骤

1 创建目录

mkdir nav-dashboard

cd nav-dashboard

2 创建 docker-compose.yml 文件

复制上面的配置内容保存

3 启动容器

docker-compose up -d

4 访问站点

主页 http://你的IP:3000

后台 http://你的IP:3000/admin.html

配置说明

3000:3000 左边是主机端口可以改成其他如 8080:3000

ADMIN_PASSWORD 修改为你自己的密码

data 目录存储 SQLite 数据库

uploads 目录存储上传的图标

更新升级

docker-compose pull

docker-compose up -d

🧩 浏览器插件使用

支持在任意网页右键快速添加到导航仪表盘,告别手动复制粘贴。

插件功能

✨ 右键菜单快速添加当前网页

📌 点击图标添加当前页面

🔄 自动获取网页标题和图标

📁 支持选择分类

🔐 支持密码验证

🌐 同时支持 CF 版和 Docker 版

安装步骤

1 下载插件

从仓库下载 chrome-extension 文件夹到本地

2 打开扩展管理页面

Chrome 浏览器访问 chrome://extensions/

Edge 浏览器访问 edge://extensions/

3 开启开发者模式

打开页面右上角的开发者模式开关

4 加载插件

点击加载已解压的扩展程序

选择 chrome-extension 文件夹

插件安装完成

配置插件

1 点击浏览器工具栏的插件图标

2 点击设置按钮

3 输入你的导航站地址

CF 版填 https://nav-dashboard.pages.dev

Docker 版填 http://你的IP:3000

4 如果设置了密码保护,填入密码

5 点击保存设置

6 点击测试连接确认配置正确

使用方法

方法一右键菜单

在任意网页空白处右键

点击添加到导航仪表盘

确认信息选择分类后点击添加

方法二点击图标

直接点击工具栏的插件图标

自动填充当前页面信息

选择分类后点击添加

❓ 常见问题

Q CF 版访问显示 Not Found

A 检查是否完成了 Pages 绑定配置

Q Docker 版无法访问

A 检查防火墙是否开放了对应端口

Q 插件提示网络错误

A 检查 API 地址是否正确,确认导航站正在运行

Q 忘记后台密码

A CF 版需要重新部署,Docker 版修改环境变量后重启容器

🎉 结语

到这里你就拥有了一个属于自己的导航仪表盘

CF 版适合追求免费和全球访问速度的用户

Docker 版适合有服务器想要完全掌控数据的用户

浏览器插件让收藏网站变得超级方便

如果觉得项目不错,欢迎给个 Star 支持一下

项目地址 https://github.com/debbide/nav-dashboard

评论