给博客装上“萌萌”的眼睛：Moe-Counter 全流程部署实录

前言：

很多博主都喜欢在博客的页脚挂一个萌萌的计数器，这不仅能记录每一次不期而遇的访问，也为网站增添了几分灵动。而在众多的选择中，Moe-Counter 凭借可爱的二次元像素风格成为了我的首选

网上虽然有不少部署教程，但大多略过了反向代理、HTTPS 证书申请以及环境变量对齐等容易卡关的细节。为了方便自己以后复盘，也为了帮大家避雷，本文将以宝塔 Linux 面板为例，手把手带你完成从 Docker 镜像拉取到最终完美引用的全流程。

准备工作：

在正式开始部署之前，请确保你已经准备好以下环境与资源：

服务器环境：
已安装宝塔 Linux 面板
面板内已安装 Docker 模块
拥有服务器的 ROOT 权限

域名准备：
准备一个域名，确保你有该域名的完全控制权

网络要求：
服务器需拥有公网 IPv4 地址 （至少有80/443）
服务器需能够正常访问 GitHub 镜像仓库，用于拉取 Docker 镜像

一、部署 Docker 项目

部署的第一步是拉取镜像，在宝塔面板的 Docker -> 容器 里，选择创建容器

1.获取与配置镜像
在弹出的窗口中，镜像直接入官方地址，系统会自动从 GitHub 下载

ghcr.io/journey-ad/moe-counter:latest

2.端口与网络设置
为了能让外部访问这个计数器，我们需要在端口映射进行配置，将主机的 3000 端口映射到容器的 3000 端口，如下图所示：

*容器名称不支持空格或特殊字符

做完这一步后点击创建，等待系统下载

二、域名配置

容器成功运行后，目前它仅在服务器内部的 127.0.0.1:3000 端口监听，为了让外界能够安全地访问它，我们需要配置域名解析，并通过反向代理将其“引流”出来

添加 DNS 记录：
登录你的域名解析后台，添加一条指向你服务器的记录，这个域名将用于后续反向代理的绑定，以及作为你的计数器对外展示的唯一入口

主机记录：这里填写你想要的前缀，这里我使用 moe 作为演示（最终访问地址为 moe.xiaonyxy.top），请根据你的实际情况进行替换
记录类型：A
记录值：你的服务器的公网 IPv4 地址

在解析界面，我们需要准确填入以下信息，你可以参考我下方的实际配置截图

设置完成后，解析不会立即生效，一般几分钟后生效

三、反向代理

域名解析生效后，我们可以在宝塔面板里通过反向代理，把域名和容器连接起来

我们回到刚才的页面，点击网站 -> 创建

选择反代容器，如下图所示，填写你刚才解析好的域名，并在容列表选择刚才创建的容器，宝塔面板会自动帮你填充 3000 端口

创建完成后，直接在浏览器访问你的域名可以看到演示页面，不过你会发现此时浏览器地址栏显示的是“不安全”，这是因为我们还没有配置 SSL 证书。为了更好的安全性和兼容性以及后续的引用，开启 HTTPS 是必不可少的一步

四、安全与进阶配置

为了消除浏览器地址栏的“不安全”警告，并确保计数器能被你的网站正常调用，我们需要为这个域名申请一个加密证书

在刚才的网站列表中，点击你的域名后面的设置，在弹出的窗口找 SSL 选项卡

选择免费证书，点击上面的免费证书，申请证书

不要选择 LetsSSL ，为了稳定和免费，请务必选择 Let's Encrypt ，勾选你的域名后点击申请，通常十几秒就能搞定

申请完毕后，勾选强制 HTTPS，点击保存

五、对齐环境变量

这个时候我们回到站点，会发现浏览器不会报不安全了，但是页面的图片无法加载，这是因为我们在 Docker 内部运行时，程序默认使用的是内部环境。现在我们给他套上了 HTTPS 的外壳，就必须告诉程序的身份，否则返回的链接还是旧的

我们回到宝塔面板的 Docker -> 容器 ，找到刚才的项目，点击管理

切换到编辑容器选项卡，展开更多设置，在页面的最底部的环境变量的末尾添加以下内容，注意域名最后面不要有斜杠，如图所示：

APP_SITE=https://[你的域名]

点击保存容器配置，输入确认无误后面板会自动帮你重启容器，现在刷新你的域名，你会发现刚才无法加载的图标已经全部“复活”了，并且浏览器左上角还带着安全的小锁，核心部署工作已经圆满完成了

如何在你的HTML或者Markdown文档引用？

部署完毕后，你不需要去翻阅复杂的文档来研究怎么写你的戴拿，直接访问刚才部署好的域名，你会发现页面最下方带了一个强大的 Tool
这些东西看上去很复杂，其实你只需要关注几个核心参数，调整完毕后点击 Generate 后就能直接看到预览和链接

如何挑选你喜欢的主题？
在 Moe Counter 首页的 More theme 区域，展示了所有可用的皮肤
对应关系：每一种图片上面都有一个名字（如 asoul、miku、minecraft 等）
如何使用：你只需要机制这个名字，然后在 Tool 的 theme 下拉框找到对应的选项即可

Tools 的参数详解：

Param 参数	功能	Value 参考
name	计数器的唯一标识。它决定了统计数据归于谁	为了不容易混淆，建议设置为文档名，只要名字唯一，数据就不会混淆
theme	皮肤风格。决定了数字的外观	填写你在 More theme 区域相中的主题名
padding	数字位数（前导零控制）	默认值 7，如果不足 7 位会自动补 0，如果你不想看到前面的那一堆 0，直接把这个值改为 0 即可，这样它会根据实际数字动态调整长度，允许 0 - 16
offset	垂直对齐微调	如果计数器和内容没有对齐，可以来这里微调，允许 -500 - 500 px
scale	缩放	1 是原始大小，想变小填小数，想变大填大数，允许 0.1 - 2
pixelated	像素锐化	建议开启，否则像素风会变得平滑，失去灵魂
darkmode	深色模式	建议保持 auto

生成链接后，你会获得一个链接，你可以套上标签后直接粘贴到你的文档里

HTML

写在最后：一点避坑的小建议

到这里，你的萌系计数器应该已经完美地出现在你的网站上了。在正式关闭教程之前，还有两点实操经验想分享给你：
数据备份：由于我们使用的是 Docker 容器部署，所有的计数数据都存储在容器内的数据库中。如果你以后计划迁移服务器，记得备份宝塔面板中对应的容器卷数据，否则你的访问量可能会“从零开始”。
关于 CDN 缓存：如果你使用了 Cloudflare 或其他 CDN，有时候刷新页面数字没变，可能是因为图片被 CDN 缓存了。如果遇到这种情况，可以在后台设置 CDN 忽略该域名的图片缓存。

如果你调出了更好看的主题组合，或者在部署中遇到了什么奇怪的报错，欢迎在评论区留言，我们一起交流！