如何部署artalk并开启图床和邮件通知

Artalk 是一个轻量、自托管的评论系统，后端使用 Go 编写，部署简单，非常适合给静态博客添加评论功能。这篇文章记录我部署 Artalk 的完整过程，包括：

Docker 部署与管理员创建
使用 upgit 对接图床，实现评论区图片上传
配置 163 邮箱 SMTP 邮件通知（含自定义邮件模板）
开启表情包
替换 Gravatar 头像代理

部署 Artalk

使用 Docker 一条命令即可启动：

docker run -d \
    --name artalk \
    -p 8080:23366 \
    -v /home/xxx/Artalk/data:/data \
    -e "TZ=Asia/Shanghai" \
    -e "ATK_LOCALE=zh-CN" \
    -e "ATK_SITE_DEFAULT=Xiaohanys的博客" \
    -e "ATK_SITE_URL=https://blog.xiaohanys.top" \
    Chiskat/Artalk-Go-Full

参数说明：

参数	说明
`-p 8080:23366`	将容器的 23366 端口映射到宿主机 8080
`-v .../data:/data`	持久化数据目录（数据库、配置、模板等）
`TZ`	时区
`ATK_LOCALE`	界面语言
`ATK_SITE_DEFAULT`	默认站点名称
`ATK_SITE_URL`	站点地址

注意

其中 /home/xxx/Artalk/… 请替换为你自己的目录。upgit 的挂载依赖下一节准备好的可执行文件，建议先准备好再启动容器。

容器启动后，执行下面的命令创建管理员账户：

然后在浏览器中访问 http://artalk.example.com:8080 即可进入 Artalk 后台登录界面。

开启 upgit 图床上传

Artalk 本身不提供图片存储，但支持通过 upgit 调用外部图床完成上传。

1. 准备 upgit

先到 upgit 的 GitHub 仓库下载适用于服务器系统的可执行文件，放到上面挂载的 /home/xxx/Artalk/upgit/upgit 位置，并赋予执行权限：

2. 编写图床配置

在 Docker 挂载的 ./data 目录下新建 image_upload.toml。这里以兰空图床（Lsky Pro）风格的接口为例：

default = "hmvod"

[uploaders.hmvod]
key = "粘贴你的X-API-Key"

[uploaders.hmvod.recipe.meta]
id = "hmvod"

[uploaders.hmvod.recipe.request]
method = "POST"
url = "https://img.hmvod.cc/api/1/upload"

[uploaders.hmvod.recipe.request.headers]
User-Agent = "upgit"
X-API-Key = "{config.key}"

[uploaders.hmvod.recipe.request.body]
source = { type = "file" }

[uploaders.hmvod.recipe.response]
url = { from = "json", path = "image.url" }

需要根据自己的图床修改的地方：

key：图床的 X-API-Key
url：图床的上传接口地址
response.url.path：从返回 JSON 中取出图片链接的路径

3. 在后台启用

进入 Artalk 网页端：设置 → 图片上传，然后：

启用 upgit
命令行参数填写：

勾选「上传后删除本地的图片」，避免图片同时占用服务器空间

开启邮箱提醒

有人回复评论时，通过邮件通知被回复者，可以显著提升评论互动。这里使用 163 邮箱的 SMTP 服务。

1. 后台设置

进入网页端：设置 → 邮件通知 → 启用邮件通知，按下面填写：

配置项	值
发送方式	SMTP
发信人地址	`xguangpan@163.com`
发件地址（SMTP 服务器）	`smtp.163.com`
发件端口	`465`
用户名	`xguangpan`
密码	163 邮箱的授权码
邮件模板文件	`./data/email-template.html`

密码不是登录密码

需要登录 163 邮箱，在「设置 → POP3/SMTP/IMAP」中开启 SMTP 服务，并申请第三方客户端的授权码，填到密码处。

2. 自定义邮件模板

在 ./data 目录下创建 email-template.html，内容如下（样式参考了 hexo-butterfly-envelope 的信封风格）。模板中的 `{{page_url}}`、`{{nick}}` 等是 Artalk 提供的模板变量，发送时会被自动替换。

展开查看完整邮件模板

<div
    style="background: url(https://tva3.sinaimg.cn/large/c56b8822ly1h62npb7s1ej201y01y0lh.jpg);padding:40px 0px 20px;margin:0px;background-color:#FFCDCE;width:100%;">
    <style type="text/css">
        @media screen and (max-width: 600px) {

            .afterimg,
            .beforeimg {
                display: none !important
            }
        }
    </style>

    <div
        style="border-radius: 10px 10px 10px 10px;font-size:14px;color: #555555;width: 530px;font-family:'Century Gothic','Trebuchet MS','Hiragino Sans GB',微软雅黑,'Microsoft Yahei',Tahoma,Helvetica,Arial,'SimSun',sans-serif;margin:50px auto;max-width:100%;background: #ffffff;">
        <img class="beforeimg" style="width:530px;height:317px;z-index:-100;pointer-events:none"
            src="https://npm.elemecdn.com/hexo-butterfly-envelope/lib/before.png">
        <img src="https://npm.elemecdn.com/hexo-butterfly-envelope/lib/violet.jpg"
            style="width:100%;overflow:hidden;pointer-events:none;margin-top: -120px;">
        <div style="width:100%;background: #FFFFFF;height: 66px;display: flex;justify-content: center;flex-direction: column;">
            <p style="font-size:16px;font-weight: bold;text-align:center;word-break:break-all;margin:0;">
                您在<a style="text-decoration:none;color: #9d2850;border-bottom:1px dashed #499EFF;" href="{{page_url}}">『{{page_title}}』</a>上的留言有新回复啦！
            </p>
        </div>

        <div class="formmain"
            style="background:#fff;width:100%;max-width:800px;margin:auto auto;overflow:hidden;margin-bottom: -155px;">
            <div style="margin:40px auto;width:90%;">
                <div class="Messages_box">
                    <p style="display:flex;justify-content:flex-end">老大您({{nick}})曾评论：</p>
                    <div class="ax_post_box-comments-single Messages-author"
                        style="display: flex;justify-content: flex-end;margin-bottom: 5px;margin-top: 7px;">
                        <div class="ax_post_box-comment-avatar" style="width: auto;flex: none;order: 2">
                            <img src="https://cravatar.cn/avatar/{{parent_comment.email_encrypted}}?d=monsterid&s=80"
                                style="width: 40px;height: 40px;border-radius: 5px">
                        </div>
                        <div class="ax_post_box-comment-text" style="position: relative;margin-right: 10px">
                            <div class="ax_post_box-comment-text-inner"
                                style="background-color: #f1f3fa;padding: 10px;border-radius: 9px;margin-bottom: 3px">
                                {{parent_comment.content}}</div>
                        </div>
                    </div>
                    <p><strong>{{reply_nick}}</strong> 回复您：</p>
                    <div class="ax_post_box-comments-single Messages-user" style="display: flex;margin-bottom: 5px;margin-top: 7px;">
                        <div class="ax_post_box-comment-avatar" style="width: auto;flex: none">
                            <img src="https://cravatar.cn/avatar/{{comment.email_encrypted}}?d=monsterid&s=80"
                                style="width: 40px;height: 40px;border-radius: 5px">
                        </div>
                        <div class="ax_post_box-comment-text" style="position: relative;margin-left: 10px">

                            <div class="ax_post_box-comment-text-inner"
                                style="background-color: #f1f3fa;padding: 10px;border-radius: 9px;margin-bottom: 3px">
                                {{comment.content}}</div>
                        </div>
                    </div>
                </div>

                <p>您可以点击<a style="text-decoration:none; color:#cf5c83" href="{{link_to_reply}}" target="_blank">
                        查看回复的完整內容 </a>，欢迎再次光临<a style="text-decoration:none; color:#cf5c83" href="{{site_url}}"
                        target="_blank">{{site_name}}</a>。
                    <hr />
                <p style="font-size:14px;color:#b7adad;text-align:center;position: relative;z-index: 99;">
                    本邮件为系统自动发送，请勿直接回复邮件哦，可到博文内容回复。<br />站点地址：{{site_url}}</p>
                </p>
                <img src="https://npm.elemecdn.com/hexo-butterfly-envelope/lib/line.png"
                    style="width:100%;margin:25px auto 5px auto;display:block;pointer-events:none">
                <p class="bottomhr" style="font-size:12px;text-align:center;color:#999">{{site_name}}竭诚为您服务！</p>
            </div>
        </div>
        <img class="afterimg" style="width:535px;height:317px;z-index:100;margin-left: -3px;"
            src="https://npm.elemecdn.com/hexo-butterfly-envelope/lib/after.png">
    </div></div>

开启表情包

我使用的是 Stellar 主题作者提供的表情包。由于 raw.githubusercontent.com 在国内访问不稳定，这里改用 jsDelivr 镜像代理：

镜像代理地址

原始地址

在后台：设置 → 界面配置 → 表情包 中填入上面的地址即可。

头像 Gravatar 代理

Artalk 默认使用 Gravatar 官方接口获取头像，国内通常无法访问，会导致头像加载失败。把 API 地址换成代理即可：

在后台：设置 → 界面配置 → 头像 Gravatar → API 地址 中修改。

总结

到这里，Artalk 就已经具备了完整的使用体验：

Docker 一键部署，数据通过挂载目录持久化

借助 upgit 对接图床，评论可直接上传图片

通过 163 SMTP 实现回复邮件通知，并使用了自定义模板

配置了表情包与头像代理，解决国内访问问题

最后别忘了在博客前端引入 Artalk 客户端，并把服务端地址指向你部署的地址，评论区就能正常使用了。