📦 Getting Started

This guide will help you deploy Artalk on your server. Once deployed, you can integrate the Artalk client into your website or blog to enable comment functionality.

Docker

Here is a simple guide for deploying the Artalk Server and Client.

Launch Server

It is recommended to use Docker for deployment. Pre-install the Docker Engine and create a working directory, then run the command to launch a container in the background:

docker run -d \
    --name artalk \
    -p 8080:23366 \
    -v $(pwd)/data:/data \
    -e "TZ=America/New_York" \
    -e "ATK_LOCALE=en" \
    -e "ATK_SITE_DEFAULT=Artalk Blog" \
    -e "ATK_SITE_URL=https://example.com" \
    artalk/artalk-go

(Tip: We also provide a Docker Compose configuration file).

Run the command to create an admin account:

docker exec -it artalk artalk admin

Enter http://artalk.example.com:8080 in your browser to access the Artalk Dashboard.

Integrate Client

Import the embedded client JS and CSS resources from the Artalk server to your webpage and initialize the Artalk client:

<!-- CSS -->
<link href="http://artalk.example.com:8080/dist/Artalk.css" rel="stylesheet" />

<!-- JS -->
<script src="http://artalk.example.com:8080/dist/Artalk.js"></script>

<!-- Artalk -->
<div id="Comments"></div>
<script>
Artalk.init({
  el:        '#Comments',                       // Selector of the bound element
  pageKey:   '/post/1',                         // Permalink
  pageTitle: 'About Introducing Artalk',        // Page title (leave blank to auto-fetch)
  server:    'http://artalk.example.com:8080',  // Artalk server address
  site:      'Artalk Blog',                     // Your site name
})
</script>

Enter the admin username and email in the comment box, and the "Dashboard" button will appear at the bottom right of the comment box.

In the Dashboard, you can configure the comment system to your liking or migrate comments to Artalk.

🥳 You have successfully deployed Artalk!

Binary

1. Download the program package from GitHub Release

2. Extract it with tar -zxvf artalk_version_system_architecture.tar.gz

3. Run ./artalk server

4. Configure and initialize the client on your webpage:

   Artalk.init({ server: 'http://artalk.example.com:23366' })

Advanced operations:

• Daemon Process (Systemd, Supervisor)
• Reverse Proxy (Caddy, Nginx, Apache)
• Self-compile (Build from the latest code)

Go Install

If you have the Golang toolchain installed, you can run the following commands to compile and install the latest version of Artalk:

go install github.com/artalkjs/artalk/v2@latest

Then run the server:

artalk server

The client integration steps are here.

Linux Distributions

Fedora (Copr)：

dnf install 'dnf-command(copr)'
dnf copr enable @artalk/artalk
dnf install artalk

Arch Linux (AUR):

paru -S artalk

NixOS:

nix-env -iA nixpkgs.artalk

Termux:

pkg install artalk

Docker Compose

Create a working directory and edit the docker-compose.yml file:

version: '3.8'
services:
  artalk:
    container_name: artalk
    image: artalk/artalk-go
    restart: unless-stopped
    ports:
      - 8080:23366
    volumes:
      - ./data:/data
    environment:
      - TZ=America/New_York
      - ATK_LOCALE=en
      - ATK_SITE_DEFAULT=Artalk Blog
      - ATK_SITE_URL=https://your_domain

Start the container to launch Artalk server:

docker-compose up -d

The client integration steps are here.

Common Compose Commands

docker-compose restart  # Restart the container
docker-compose stop     # Stop the container
docker-compose down     # Remove the container
docker-compose pull     # Update the image
docker-compose exec artalk bash # Enter the container

More information: Docker / Environment Variables

Client

If you have a frontend or Node.js web project, this following guide will help you integrate the Artalk Client into your web project.

Client Installation

Install via npm:

npm

npm install artalk

yarn

yarn add artalk

pnpm

pnpm add artalk

bun

bun add artalk

(or see CDN Resources).

Client Usage

Import Artalk in your web project:

import 'artalk/Artalk.css'
import Artalk from 'artalk'

const artalk = Artalk.init({
  el:        document.querySelector('#Comments'), // DOM element where you want to mount
  pageKey:   '/post/1',                           // Permalink
  pageTitle: 'About Introducing Artalk',          // Page title
  server:    'http://artalk.example.com:8080',    // Artalk server address
  site:      'Artalk Blog',                       // Site name
})

For more references:

• Import to Blog Documentation
• Import to Frameworks Documentation
• Client API Reference
• UI (Client) Configuration

Client CDN Resources

To use Artalk in the browser via CDN, for modern browsers (which support ES modules), you can use esm.sh or esm.run:

ES Module

<body>
  <div id="Comments"></div>

  <script type="module">
    import Artalk from 'https://esm.sh/artalk@2.9.1'

    Artalk.init({
      el: '#Comments',
    })
  </script>
</body>

Legacy

<body>
  <div id="Comments"></div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/artalk/2.9.1/Artalk.js"></script>
  <script>
    Artalk.init({
      el: '#Comments',
    })
  </script>
</body>

Don't forget to include the CSS file:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/artalk/2.9.1/Artalk.css">

Latest Version of Artalk

The latest Artalk client version is: 2.9.1

To upgrade the client, replace the numeric part of the version number in the URL.

Note: The Artalk server had embedded the client resources. Ensure version compatibility when using public CDN resources.

Alternative CDNs

CDNJS

https://cdnjs.cloudflare.com/ajax/libs/artalk/2.9.1/Artalk.js

https://cdnjs.cloudflare.com/ajax/libs/artalk/2.9.1/Artalk.css

JSDELIVR

https://cdn.jsdelivr.net/npm/artalk@2.9.1/dist/Artalk.js

https://cdn.jsdelivr.net/npm/artalk@2.9.1/dist/Artalk.css

UNPKG

https://unpkg.com/artalk@2.9.1/dist/Artalk.js

https://unpkg.com/artalk@2.9.1/dist/Artalk.css

Data Migration

Import data from other comment systems: Data Migration.

ArtalkLite

ArtalkLite is a lightweight version of the Artalk client. See: ArtalkLite.

Development Environment

Please refer to: Developer Guide.

Contributors

qwqcode

Changelog

Last edited 8 months ago

View full history

bd0db8c-chore(docs): revise ui config docs on 10/6/2024

ea9c5d9-chore(docs): add install guide for fedora linux distro on 10/1/2024

8707f4f-docs(landing): add more translations on 9/20/2024

34d7936-chore(docs): refine deployment documentation on 9/19/2024

bd121f8-docs: refine deployment documentation on 9/18/2024

9afa7ca-docs(i18n): add English translations for docs (#978) on 9/17/2024