How to deploy Artalk with Nuxt.js and the encountered problems

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 be sure to distinguish between them: PHP and Go, which correspond to different repositories. Currently, the official documentation defaults to 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/
# Enter 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 this approach because it is 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 the 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 result in 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 before, you can skip this step. Otherwise, you need to configure it. Then, enter http://ip-address:8080 in your browser.

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 steps correctly.

If you modify the configuration file later, be sure to execute the following command after the modification. You need to restart the service for the changes to take effect.

docker restart artalk-go

Reverse Proxy#

If you are using Baota, configuring the reverse proxy is quite simple. The documentation provides detailed instructions. If you encounter any issues, you can leave a comment below.

https://artalk.js.org/guide/backend/reverse-proxy.html#%E5%AE%9D%E5%A1%94%E9%9D%A2%E6%9D%BF

2. Frontend Deployment#

The blog is developed using Vue.js + Nuxt.js.

I am using the CDN approach, 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 put the configuration code in a separate file /static/main.js and import 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 approach 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/1 and https://example.com/1/ are not the same path to begin with. The latter is equivalent to https://example.com/1/index.html (depending on the web server configuration).

Therefore, I simply add a / symbol to the end of the URL in my blog, so that no matter which page is opened, it will redirect to the URL with /. This is a simple and straightforward solution to this problem.

path: `/posts/${key.replace('.md', '').replace('./', '')}/`

2. localhost:3000 and Domain

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. As a result, comments under the domain name will not be 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.