After spending two days, I finally managed to deploy Artalk, a self-hosted comment system with a backend, which is very suitable for me. This article will introduce the deployment process and some issues I encountered during the deployment, documenting them for future reference and providing some valuable insights for those who use Nuxt.js to build blogs.
Artalk URL: https://artalk.js.org/
I will divide this article into three parts: backend deployment, frontend deployment, and issue investigation.
1. Backend Deployment#
There are two official versions, so make sure to distinguish between them: PHP and Go. They correspond to different repositories, and the default documentation is currently written for the Go version.
ArtalkGo Repository: https://github.com/ArtalkJS/ArtalkGo
I am using the Go version, which has good functionality and optimization.
Docker Build + Baota#
My server is Ubuntu 20.04, but the process is similar for other versions.
First, connect to the server using SSH.
sudo su
# Enable sudo mode
cd /www/wwwroot/
# Go to the site directory
mkdir ArtalkGo
cd ArtalkGo
# Create a directory for ArtalkGo
curl -L https://raw.githubusercontent.com/ArtalkJS/ArtalkGo/master/artalk-go.example.yml > conf.yml
# Download the configuration file template
After this, the official documentation suggests using vim conf.yml to enter the configuration file, modify the parameters, and configure it. However, I don't recommend it because it's not very user-friendly (because I'm not familiar with it). I suggest directly modifying the conf.yml file in the /www/wwwroot/ArtalkGo directory, as it is more convenient to operate in text mode.
The configuration mainly includes site name, administrator, email, and other settings, which should not cause any major issues. In addition, do not modify the port and other parameters, as it may cause errors.
After configuring the file, simply save it.
In the Baota plugin, download the Docker Manager and click on Image Management.
Then, enter artalk/artalk-go as the image name and click on "Get Image". The download should be completed in about two minutes.
Then, go back to the SSH connection and create a new Docker container.
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
Simply enter the above command in the command line and press Enter.
At this point, you need to open port 8080 on your server. If you have already opened it, you can skip this step. Otherwise, you need to configure it.
Then, open your browser and enter http://ip-address:8080.
If you see the following page, it means that you have successfully deployed it. If it doesn't open or if there are other issues, please check if you have followed the above steps correctly.
If you make changes to the configuration file later, make sure to execute the following command after modifying it. You need to restart the service for the changes to take effect.
docker restart artalk-go
Reverse Proxy#
If you are using Baota, setting up a reverse proxy is quite simple, so I won't go into detail here.
https://artalk.js.org/guide/backend/reverse-proxy.html#%E5%AE%9D%E5%A1%94%E9%9D%A2%E6%9D%BF
The documentation provides detailed instructions, and if you encounter any issues, you can ask for help in the comments section below.
2. Frontend Deployment#
The blog is developed using Vue.js and Nuxt.js.
I am using a CDN to import it, as I have encountered some conflicts with npm in my blog, so I am not using that method for now.
First, create a component named Comments.vue in the /components directory.
<!-- 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 code -->
</style>
I have placed the configuration code separately in /static/main.js and imported it in nuxt.config.js.
// nuxt.config.js
head: {
title: 'My Blog | imhan.cn',
meta: [
// ...
]
script: [
{ src: '/js/main.js' },
]
},
Configure Artalk in main.js.
new Artalk({
el: "#Comments",
server: 'https://domain/api',
site: "My Blog",
placeholder: 'Leave a comment...',
gravatar: {
mirror: 'https://sdn.geekzu.org/avatar/',
default: 'mp',
},
pagination: {
pageSize: 15, // Number of comments per page
readMore: true, // Load more or pagination bar
autoLoad: true, // Auto load (load more)
},
heightLimit: {
content: 200, // Comment content height limit
children: 300, // Child comment area height limit
},
versionCheck: true, // Frontend version check
});
Another option is to host the files on a server or GitHub and import them. However, this may be unnecessary and not recommended.
3. Issue Investigation#
1. Issue with Comment Paths
After submitting a comment, a list is generated in the admin panel to indicate which path the comment belongs to.
If you want to transfer comments from one page to another, you can directly modify the URL of the page by clicking on "KEY 变更" (Change Key).
Artalk has strict path matching rules, so comments on https://example.com/1 and https://example.com/1/ are considered as two different pages.
I asked the author about this, and I think his explanation makes sense:
qwqcode:
https://example.com/1andhttps://example.com/1/are not the same path to begin with. The latter is equivalent tohttps://example.com/1/index.html(depending on the web server configuration).
Therefore, I simply added a / symbol to the end of the URL in my blog, so no matter which page is opened, it will redirect to the URL with /. This is a simple and effective solution to this problem.
path: `/posts/${key.replace('.md', '').replace('./', '')}/`
2. localhost:3000 and Domain Name
This leads to another issue where comments after building on localhost:3000 are not displayed with the domain name. However, this is not a major issue for me. I have studied the Artalk documentation, and since it is a backend that can be used by multiple frontends, only considering the subdirectory would cause a big problem.
For example, https://a.com/1 and https://b.com/1 use the same set of comment data. To avoid this situation, the domain name is directly added when checking the path. This ensures that comments under the domain name are not synchronized to localhost:3000.
This does not affect the development of my blog, so I don't plan to solve it.
These are the issues I have encountered so far. I will continue to update this article based on my usage in the future for reference.