花了兩天時間，終於把 Artalk 部署好了，一款數據自托管帶後端的評論程序，非常適合我。這篇文章就介紹一下我部署的流程，以及我在部署過程中遇到的一些問題，將它記錄一下，以便之後研究，順便對使用 Nuxt.js 搭建部落格的夥伴提供一些參考價值。
Artalk 地址: https://artalk.js.org/
這篇文章我將分為三個部分，後端部署、前端部署、問題研究。
1. 後端部署#
官方有兩個版本，注意分辨，php 和 go，對應的是不同的倉庫，目前官方文檔寫的默認都是 go 語言開發的。
ArtalkGo 倉庫:https://github.com/ArtalkJS/ArtalkGo
我使用的也是 go 版本，功能和優化都比較好。
docker 構建 + 寶塔#
我的伺服器是 Ubuntu 20.04，其他版本類似，沒有很大不同。
首先，使用 ssh 連接伺服器。
sudo su
# 啟用sudo模式
cd /www/wwwroot/
# 進入站點目錄
mkdir ArtalkGo
cd ArtalkGo
# 為 ArtalkGo 創建一個目錄
curl -L https://raw.githubusercontent.com/ArtalkJS/ArtalkGo/master/artalk-go.example.yml > conf.yml
# 下載配置文件模版
到這裡之後，官方說的是用 vim conf.yml 進入配置文件，修改參數然後配置。我不是很建議，因為用著並不是那麼順手（因為我菜），我建議直接到達 /www/wwwroot/ArtalkGo 目錄下修改 conf.yml 文件，文本模式操作起來更順手。
裡面的配置基本都是站點名稱，管理員，郵箱等設置，沒什麼大問題。除此之外，端口等參數都不用碰，不然會報錯。
配置完文件之後直接保存就行了。
在寶塔插件裡面下載 Docker 管理器，點擊鏡像管理。
然後在鏡像名稱輸入 artalk/artalk-go 點擊獲取鏡像即可，大概兩分鐘就下載結束了。
然後回到 ssh 連接，新建 docker 容器。
docker run -d \
--name artalk-go \
-p 0.0.0.0:8080:23366 \
-v $(pwd)/conf.yml:/conf.yml \
-v $(pwd)/data:/data \
artalk/artalk-go
將上面的命令行在命令行，直接回車就行了。
這個時候需要去你的伺服器廠商那裡放行端口 8080 ，如果之前放行過不用管，沒有放行的話需要去設置一下。
然後在瀏覽器輸入 http://ip地址:8080 。
如果出現現在這個頁面，說明你部署成功了，如果打不開或者是其他情況，請檢查是否成功執行上面的步驟。
如果之後修改配置文件了，一定要注意在修改之後執行命令，需要重啟服務才能生效。
docker restart artalk-go
反向代理#
這個如果使用寶塔太簡單，就不細說了。
https://artalk.js.org/guide/backend/reverse-proxy.html#%E5%AE%9D%E5%A1%94%E9%9D%A2%E6%9D%BF
文檔已經說得很詳細，如果出現操作失敗的情況可以在下面評論。
2. 前端部署#
部落格使用 vue + nuxt 開發。
我使用的是通過 cdn 引入的，npm 我目前發現和我部落格有些衝突，暫時不使用該方式。
先在 /components 目錄下新建一個組件名為 Comments.vue
<!-- Comments.vue -->
<template>
<div class="wrapper">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/Artalk.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Artalk.js"></script>
<div id="Comments"></div>
</div>
</template>
<script>
export default {
name: 'Comments',
}
</script>
<style lang="scss" scoped>
<!-- css代碼 -->
</style>
配置代碼我單獨放在 /static/main.js ，然後在 nuxt.config.js 引入。
// nuxt.config.js
head: {
title: '子舒的部落格 | imhan.cn',
meta: [
// ...
]
script: [
{ src: '/js/main.js' },
]
},
在 main.js 中配置 Artalk。
new Artalk({
el: "#Comments",
server: 'https://域名/api',
site: "子舒的部落格",
placeholder: '說點什麼...',
gravatar: {
mirror: 'https://sdn.geekzu.org/avatar/',
default: 'mp',
},
pagination: {
pageSize: 15, // 每頁評論數
readMore: true, // 加載更多 or 分頁條
autoLoad: true, // 自動加載 (加載更多)
},
heightLimit: {
content: 200, // 評論內容限高
children: 300, // 子評論區域限高
},
versionCheck: true, // 前端版本檢測
});
還有一個方案就是將文件放在伺服器或者 github，將它引入，不過有些舍本逐末了，不是很建議。
3. 問題研究#
1. 關於評論路徑問題
提交評論之後會在管理後台生成一個列表，表示哪個路徑產生了評論，
如果想把某個頁面評論轉到其他頁面，可以直接修改頁面的 url，點擊KEY變更。
Artalk 的路徑判斷很嚴格，包括 https://example.com/1 和 https://example.com/1/ 的評論就屬於兩個頁面。
問過作者，覺得他的說法很有道理
qwqcode: https://example.com/1 和 https://example.com/1/ 本來就不屬於相同路徑，後者等價於 https://example.com/1/index.html (和 web 伺服器配置有關)
所以我直接在我部落格裡把路徑然後默認加一個 / 符號，不管打開哪個頁面都會跳轉到帶有 / 的 url，也是非常簡單粗暴的解決了這個問題。
path: `/posts/${key.replace('.md', '').replace('./', '')}/`
2. localhost:3000 和域名
由此引發的另一個問題就是我在本地構建 localhost:3000 是不會顯示域名後的評論，這個問題也不是大問題，我研究過 Artalk 文檔，因為它是一個後端，可以多個前端使用，如果僅僅判斷二級目錄會造成一個很大的問題。
https://a.com/1 和 https://b.com/1 這兩個頁面使用了同一套評論數據，所以為了避免這種情況，在判斷路徑時直接加上域名，這樣的話，域名下的評論自然不會同步到 localhost:3000 。
這對我開發部落格來說沒有什麼影響，所以就不打算解決了。
這是我目前遇到的問題，我會在後續的使用中持續更新本文，以作留存。