目 录CONTENT

文章目录

满满极客风!10分钟搭建专属你自己的信息聚合页——Glance |好玩儿的Docker项目|我不是咕咕鸽

咕咕
2024-06-14 / 2 评论 / 5 点赞 / 5242 阅读 / 20130 字
温馨提示:
本文最后更新于 2024-06-25,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。
广告 广告

搬瓦工 THE PLAN 2024 套餐重磅回归!29美元/季度,55美元/半年,99美元/年(折扣之后92.3美金),2核 CPU,2GB 内存,40GB SSD 硬盘,1000GB 流量,可选美国洛杉矶 DC6 CN2 GIA-E、DC9 CN2 GIA、中国香港 HK85、日本大阪软银、荷兰联通 9929、加拿大温哥华 CN2 GIA 等 18 个机房!同等配置常规套餐需要约 $299.99 美元。
购买链接:https://gao.ee/theplan2024
优惠码:BWHCGLUKKB (优惠6.77%)
搬瓦工介绍:https://blog.laoda.de/archives/vps-bandwagonhost

1. 介绍

好久没更新了,今天来分享一个非常棒的自托管仪表板,可以显示实时 RSS 订阅、Reddit 子版块帖子、天气、书签、特定频道的最新 YouTube 视频、日历、股票信息、iframe、twitch 频道和热门游戏、GitHub 发布和网站监控等。

这是咕咕自己搭建的Demo:

地址:https://glance.gugu.ovh

c5cd35b880abbdb3f779cadef83d7a55.png

a0e2987dd5553988ccf447362cd2bd4b.png

官方Demo:

3f3d8183c5b4b2518d1bb3ccdb322b64.png

主要特色

  • 支持各种主题
    005e476bca6f80105f9e491c40188c48.png
  • 支持Docker部署,升级更新十分方便
  • 支持X86和ARM平台部署
  • 移动端适配非常好

8cc55629d2fb1a3a5e81d6fb34cfbfe4.png

  • 支持各种小部件

    • RSS 源
    • Subreddit 帖子
    • 天气
    • 书签
    • Hacker News
    • Lobsters
    • 特定频道的最新 YouTube 视频
    • 时钟
    • 日历
    • 股票
    • iframe
    • Twitch 频道和热门游戏
    • GitHub 发布
    • 代码库概览
    • 网站监控
    • 搜索框
  • 十分轻量

    • 极少的 JavaScript,无臃肿的框架
    • 极少的依赖
    • 单一且易于分发的 小于15MB 二进制文件以及同样小的 Docker 容器
    • 所有请求都是并行处理的,未缓存的页面通常在 ~1 秒内加载(取决于网速和小部件数量)

2. 相关地址

官方GitHub地址:https://github.com/glanceapp/glance (目前6100个star,欢迎大家去给作者点星星!)

3. 搭建环境

  • 服务器:咕咕这边用的莱卡云香港服务器,你也可以选择使用其他高性价比的服务器。虽然这个项目对配置要求很低,但还是建议服务器内存1G以上
  • 系统:Debian 11 (DD 脚本 非必需 DD,用原来的系统也 OK,之后教程都是用 Debian 或者 Ubuntu 搭建~)
  • 安装好 Docker、Docker-compose(相关脚本
  • 【必需】域名一枚,并做好解析到服务器上(域名购买、域名解析 视频教程
  • 【非必需】提前安装好宝塔面板海外版本 aapanel,并安装好 Nginx(安装地址
  • 【非必需本教程选用】安装好 Nginx Proxy Manager(相关教程

4. 搭建视频

4.1 YouTube

视频地址:https://youtu.be/evoARBa3Epw

4.2 哔哩哔哩

哔哩哔哩:https://www.bilibili.com/video/BV1Sb421J7N9

5. 搭建方式

5.1 安装 Docker 与 Nginx Proxy Manager

可以直接参考这篇内容:

https://blog.laoda.de/archives/nginxproxymanager/

5.2 创建安装目录

创建一下安装的目录:

sudo -i

mkdir -p /root/data/docker_data/glance

cd /root/data/docker_data/glance

mkdir assets

Glance 的配置是通过单个 YAML 文件完成的,修改了glance.yml文件的话需要重新启动Docker容器才能使任何更改生效。尝试使用无效的配置文件启动服务器,将导致错误。

这边我们就来先创建glance.yml文件

vim glance.yml

以下两个任性其一即可,后续也可以自行根据需求修改。

这边就可以利用之前在趁着618,分享一下自己常用的工具里面介绍的 Sublime Text 来编辑内容,编辑好了之后再粘贴回服务器。

注意YAML文件对格式要求很高,不能随便用空格来做缩进啥的。

基础版本,只包括了日历(calendar)、RSS和天气(weather):

pages:
  - name: Home
    columns:
      - size: small
        widgets:
          - type: calendar

      - size: full
        widgets:
          - type: rss
            limit: 10
            collapse-after: 10
            cache: 3h
            feeds:
              - url: https://blog.laoda.de/rss.xml
                title: 我不是咕咕鸽

      - size: small
        widgets:
          - type: weather
            location: Shanghai, China

弄完大概这个效果:

0b94c5f281a67529a82904fc7054d03d.png

咕咕Demo版本:

pages:
  - name: Home
    columns:
      - size: small
        widgets:
          - type: calendar
          - type: clock
            hour-format: 24h
            timezones:
              - timezone: Europe/Paris
                label: Paris
              - timezone: America/New_York
                label: New York
              - timezone: Asia/Tokyo
                label: Tokyo

          - type: monitor
            cache: 1m
            title: Services
            sites:
              - title: Jellyfin
                url: https://jellyfin.yourdomain.com
                icon: /assets/jellyfin-logo.png
              - title: Gitea
                url: https://gitea.yourdomain.com
                icon: /assets/gitea-logo.png
              - title: Immich
                url: https://immich.yourdomain.com
                icon: /assets/immich-logo.png
              - title: AdGuard Home
                url: https://adguard.yourdomain.com
                icon: /assets/adguard-logo.png
              - title: Vaultwarden
                url: https://vault.yourdomain.com
                icon: /assets/vaultwarden-logo.png

          - type: bookmarks
            groups:
              - links:
                  - title: Gmail
                    url: https://mail.google.com/mail/u/0/
                  - title: Amazon
                    url: https://www.amazon.com/
                  - title: Github
                    url: https://github.com/
                  - title: Wikipedia
                    url: https://en.wikipedia.org/
              - title: Entertainment
                color: 10 70 50
                links:
                  - title: Netflix
                    url: https://www.netflix.com/
                  - title: Disney+
                    url: https://www.disneyplus.com/
                  - title: YouTube
                    url: https://www.youtube.com/
                  - title: Prime Video
                    url: https://www.primevideo.com/
              - title: Social
                color: 200 50 50
                links:
                  - title: Reddit
                    url: https://www.reddit.com/
                  - title: Twitter
                    url: https://twitter.com/
                  - title: Instagram
                    url: https://www.instagram.com/


      - size: full
        widgets:
          - type: rss
            title: News
            style: horizontal-cards
            limit: 10
            collapse-after: 10
            cache: 3h
            feeds:
              - url: https://blog.laoda.de/rss.xml
                title: 我不是咕咕鸽
          - type: videos
            channels:
              - UCJeNmdZBL8QahqCbzxj4l3Q

      - size: small
        widgets:
          - type: weather
            location: Shanghai, China

          - type: markets
            markets:
              - symbol: SPY
                name: S&P 500
              - symbol: TSLA
                name: TSLA
              - symbol: BTC-USD
                name: Bitcoin
              - symbol: NVDA
                name: NVIDIA
              - symbol: AAPL
                name: Apple
              - symbol: MSFT
                name: Microsoft
              - symbol: GOOGL
                name: Google
              - symbol: AMD
                name: AMD

修改完成之后,可以在英文输入法下,按 i 修改,完成之后,按一下 esc,然后 :wq 保存退出。

接着我们来编辑下docker-compose.yml

vim docker-compose.yml
services:
  glance:
    image: glanceapp/glance
    container_name: glance
    restart: unless-stopped
    ports:
      - 8080:8080        # 左边的8080可以自由修改成服务器上没有被占用的端口,右边的8080不要动。
    volumes:
      - ./glance.yml:/app/glance.yml
      - ./assets:/app/assets
      - /etc/TZ:/etc/timezone:ro
      - /etc/localtime:/etc/localtime:ro

同样,修改完成之后,可以在英文输入法下,按 i 修改,完成之后,按一下 esc,然后 :wq 保存退出。

5.3 打开服务器防火墙(非必需)并访问网页

打开防火墙的端口 8080

举例,腾讯云打开方法如下(部分服务商没有自带的面板防火墙,就不用这步操作了):

image-20220630215240864 image-20220630220546335

类似图中的,这边我们填 8080,示例填 glance ,确定即可(如果你在 docker-compose 文件里换了 9009,这边就需要填 9009,以此类推)

56a42aff23098af08c1ae587e19739ae.png

查看端口是否被占用(以 8080 为例),输入:

lsof -i:8080  #查看 8080 端口是否被占用,如果被占用,重新自定义一个端口

如果啥也没出现,表示端口未被占用,我们可以继续下面的操作了~

如果出现:

-bash: lsof: command not found

运行:

apt install lsof  #安装 lsof

如果端口没有被占用(被占用了就修改一下端口,比如改成 8381,注意 docker 命令行里和防火墙都要改)

5.4 启动 glance

cd /root/data/docker_data/glance

docker compose up -d   # 注意,老版本用户用 docker-compose up -d

等待拉取好镜像,出现 done的字样之后,

理论上我们就可以输入 http://ip:8080 访问了。

但是这边我们推荐先搞一下反向代理!

做反向代理前,你需要一个域名!

namesilo 上面 xyz 后缀的域名一年就 7 块钱,可以年抛。(冷知识,namesilo上 6位数字的xyz续费永远都是0.99美元 = =)

如果想要长期使用,还是建议买 com 后缀的域名,更加正规一些,可以输入 laodade 来获得 1 美元的优惠(不知道现在还有没有)

namesilo 自带隐私保护,咕咕一直在用这家,价格也是这些注册商里面比较低的,关键是他家不像其他家域名注册商,没有七七八八的套路!(就是后台界面有些 古老 = =)

【域名购买】Namesilo 优惠码和域名解析教程(附带服务器购买推荐和注意事项)

我们接着往下看!

6. 反向代理

6.1 利用 Nginx Proxy Manager

在添加反向代理之前,确保你已经完成了域名解析,不会的可以看这个:域名一枚,并做好解析到服务器上域名购买、域名解析 视频教程

image-20221016140213282

之后,登陆 Nginx Proxy Manager(不会的看这个:安装 Nginx Proxy Manager相关教程))

注意:

Nginx Proxy Manager(以下简称 NPM)会用到 80443 端口,所以本机不能占用(比如原来就有 Nginx)

直接丢几张图:

9c8c78516f5e2022e39806c56983c8bd.png 638fecbf5522e0a5a7cf85f14f65c06d.png c3696b5fd82b37a14d75b1c5c59f9669.png de1c674e5c0a52f2ff55040c91500817.png

注意填写对应的 域名IP端口,按文章来的话,应该是 8080

IP 填写:

如果 Nginx Proxy Manager 和 glance 在同一台服务器上,可以在终端输入:

ip addr show docker0

查看对应的 Docker 容器内部 IP。

否则直接填 glance 所在的服务器 IP 就行。

6.2 利用宝塔面板

发现还是有不少小伙伴习惯用宝塔面板,这边也贴一个宝塔面板的反代配置:

直接新建一个站点,不要数据库,不要 php,纯静态即可。

然后打开下面的配置,修改 Nginx 的配置。

image-20220819150345725 image-20220819150542867

代码如下:

location / {
      proxy_pass http://127.0.0.1:8080/;       # 注意改成你实际使用的端口
      rewrite ^/(.*)$ /$1 break;
      proxy_redirect off;
      proxy_set_header Host $host;
      proxy_set_header X-Forwarded-Proto $scheme;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header Upgrade-Insecure-Requests 1;
      proxy_set_header X-Forwarded-Proto https;
    }

此方法对 90% 的反向代理都能生效,然后就可以用域名来安装访问了。

有同学可能会问,为什么不直接用宝塔自带的反向代理功能。

image-20220819150730128

也可以,不过咕咕自己之前遇到过当有多个网站需要反代的时候,在这边设置会报错的情况 = =

所以后来就不用了,直接用上面的方法来操作了。

7. 使用教程

建议参考官方配置文档:https://github.com/glanceapp/glance/blob/main/docs/configuration.md

其实说白了就是一个YAML文件里修改。

以这个配置文件为例子,简单看下:

pages:
  - name: Home
    columns:
      - size: small
        widgets:
          - type: calendar
          - type: clock
            hour-format: 24h
            timezones:
              - timezone: Europe/Paris
                label: Paris
              - timezone: America/New_York
                label: New York
              - timezone: Asia/Tokyo
                label: Tokyo

          - type: monitor
            cache: 1m
            title: Services
            sites:
              - title: Jellyfin
                url: https://jellyfin.yourdomain.com
                icon: /assets/jellyfin-logo.png
              - title: Gitea
                url: https://gitea.yourdomain.com
                icon: /assets/gitea-logo.png
              - title: Immich
                url: https://immich.yourdomain.com
                icon: /assets/immich-logo.png
              - title: AdGuard Home
                url: https://adguard.yourdomain.com
                icon: /assets/adguard-logo.png
              - title: Vaultwarden
                url: https://vault.yourdomain.com
                icon: /assets/vaultwarden-logo.png

          - type: bookmarks
            groups:
              - links:
                  - title: Gmail
                    url: https://mail.google.com/mail/u/0/
                  - title: Amazon
                    url: https://www.amazon.com/
                  - title: Github
                    url: https://github.com/
                  - title: Wikipedia
                    url: https://en.wikipedia.org/
              - title: Entertainment
                color: 10 70 50
                links:
                  - title: Netflix
                    url: https://www.netflix.com/
                  - title: Disney+
                    url: https://www.disneyplus.com/
                  - title: YouTube
                    url: https://www.youtube.com/
                  - title: Prime Video
                    url: https://www.primevideo.com/
              - title: Social
                color: 200 50 50
                links:
                  - title: Reddit
                    url: https://www.reddit.com/
                  - title: Twitter
                    url: https://twitter.com/
                  - title: Instagram
                    url: https://www.instagram.com/


      - size: full
        widgets:
          - type: rss
            title: News
            style: horizontal-cards
            limit: 10
            collapse-after: 10
            cache: 3h
            feeds:
              - url: https://blog.laoda.de/rss.xml
                title: 我不是咕咕鸽
          - type: videos
            channels:
              - UCJeNmdZBL8QahqCbzxj4l3Q

      - size: small
        widgets:
          - type: weather
            location: Shanghai, China

          - type: markets
            markets:
              - symbol: SPY
                name: S&P 500
              - symbol: TSLA
                name: TSLA
              - symbol: BTC-USD
                name: Bitcoin
              - symbol: NVDA
                name: NVIDIA
              - symbol: AAPL
                name: Apple
              - symbol: MSFT
                name: Microsoft
              - symbol: GOOGL
                name: Google
              - symbol: AMD
                name: AMD

几点需要注意的。

  • 你可以新增很多个页面,这个里面就只有一页- name: Home

  • 一个页面最多只能有三列(columns),分别用- size: small 或者 - size: full 来表示。

    f5f26adebaa17fdf0838d7bcec979d85.png

  • 注意缩进问题,如果尝试使用无效的配置文件启动服务器,将导致错误。

  • 主题修改可以看这边:https://github.com/glanceapp/glance/blob/main/docs/themes.md

  • icon图标都放在/root/data/docker_data/glance/assets文件夹里面,比如monitor里面的/assets/gitea-logo.png

7.1 更新 glance

cd /root/data/docker_data/glance

docker compose pull

docker compose up -d    # 请不要使用 docker compose stop 来停止容器,因为这么做需要额外的时间等待容器停止;docker compose up -d 直接升级容器时会自动停止并立刻重建新的容器,完全没有必要浪费那些时间。

docker image prune  # prune 命令用来删除不再使用的 docker 对象。删除所有未被 tag 标记和未被容器使用的镜像

提示:

WARNING! This will remove all dangling images.
Are you sure you want to continue? [y/N]

输入 y

利用 Docker 搭建的应用,更新非常容易~

7.2 卸载 glance

同样进入安装页面,先停止所有容器。

cd /root/data/docker_data/glance

docker compose down

cd ..

rm -rf /root/data/docker_data/glance  # 完全删除

可以卸载得很干净。

8. 常见问题及注意点

暂无。大家有意见或者建议欢迎反馈。

9. 结尾

祝大家用得开心,有问题可以去 GitHub 提 Issues,也可以在评论区互相交流探讨。

同时,项目处于初期,有能力给项目做贡献的同学,也欢迎积极加入到 项目 中来,贡献自己的一份力量!

最后,感谢开发人员们的辛苦付出,让我们能用到这么优秀的项目!

10. 参考资料

官方GitHub:https://github.com/glanceapp/glance

5
广告 广告

评论区