Preface

After the blog is built, you can add a comment system to facilitate the exchange of feedback from readers. Here the choice is Waline, because Hugo Stack theme supports Waline, so it will be much easier to configure. At the same time Waline, just a few steps, you can enable Waline to provide comment service in your website.

So, in this article, we are going to introduce to add Waline commenting system to your blog and configure it to receive email notification alerts for blog comments at your own domain email address.

Since Waline documentation is quite detailed, so I’m going to copy it directly and make some changes for my own needs.

LeanCloud Settings (Database)

1. sign in or sign up LeanCloud and enter Console.

2. Click Create app button to create a new app and enter a name you like:

   

3. Enter the app, then select Settings > App Keys at the left bottom corner. You will see APP ID, APP Key and Master Key of your app. We will use them later

   

Deploy to Vercel (Server)

Vercel

1. Click the blue button above, it will redirect you to vercel to deploy with waline template.

   Note

   If you haven’t logged ine, we recommend you to sign in with GitHub.

2. Input your Vercel project name then click Create.

   

3. Repo which named you input before will be created and initialized automatically base on waline example template by Vercel.

   

   After one minute or two, vercel should finish the deployment. Click Go to Dashboard button to redirect to your application dashboard.

   

4. Click Settings menu on the top, and Environment Variables button on the side to go to environment variables setting page. Then set LEAN_ID, LEAN_KEY and LEAN_MASTER_KEY. The variables’ value should be the ones you got in the previous step. APP ID is the value of LEAN_ID, and APP Key to LEAN_KEY, Master Key to LEAN_MASTER_KEY. You can learn more about other variables here.

   

5. To let your environment variables setting active, you need redeploy your application. Click Deployments menu on the top and find the latest deployment at the top of list, click Redeploy button in the right dropdown menu.

   

6. If everything is ok, vercel will redirect to Overview page to start redeployment. Wait a moment the STATUS will change to Ready. Now you can click Visit to visit the site. This link is your server address.

   

Stack theme with Waline enabled

Find this block in the config/_default/params.toml configuration file:

1
2
3
4

## Comments
[comments]
enabled = true
provider = "waline"

Change enabled to true, provider to waline, and then set the waline-related configuration in the comments.waline block:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

[comments.waline]
serverURL = "your-server-url"
lang = "zh-CN"
avatar = ""
emoji = ["https://cdn.jsdelivr.net/gh/walinejs/emojis/weibo"]
requiredMeta = ["nick", "mail", "url"]

[comments.waline.locale]
admin = "Admin"
placeholder = "placeholder"

Just change serverURL to the server address of your vercel.

The comment service will now run successfully on your website 🎉!

Comment Management (Management)

1. After the deployment is complete, please visit <serverURL>/ui/register to register. The first person to register will be set as an administrator.
2. After you log in as administrator, you can see the comment management interface. You can edit, mark or delete comments here.
3. Users can also register their account through comment box, and they will be redirected to their profile page after logging in.

Email notification

Email notification needs the following environment variables to be configured:

• SMTP_SERVICE: SMTP Mail delivery service provider

  Tips

  You can find all support provider in here. If your provider is not listed, you must config SMTP_HOST and SMTP_PORT.

  • SMTP_HOST: SMTP server address, it can be found in mailbox’s setting page generally.
  • SMTP_PORT: SMTP server port, it can be found in mailbox’s setting page generally.

• SMTP_USER: SMTP Mail delivery service account, it’s your email address.

• SMTP_PASS: SMTP Mail delivery service password, it’s your email password.

• SMTP_SECURE: SMTP connect with SSL, either true or false.

• SITE_NAME: Your site name, will be displayed in notification message.

• SITE_URL: Your site url, will be displayed in notification message.

• SENDER_NAME: Custom sender’s name in notification

• SENDER_EMAIL: Custom sender’s name in notification, required for some SMTP services.

Here we have chosen Brevo, for the configuration of Brevo see Free to build their own domain name personality email (limuran.top)

1
2
3
4
5

"SendinBlue": {
        "aliases": ["Brevo"],
        "host": "smtp-relay.brevo.com",
        "port": 587
    }

Once you’ve created it, head over to Vercel to continue adding environment variables.

The required environment variables are listed below:

The empty Value is added by itself.

! image-20231216221301059

Then click the Redeploy button again to redeploy, it will take effect and you can test it afterwards.

Video Tutorial

An enthusiastic Waline user made the following video tutorial. If the instructions above are not clear, you can refer to the video:

A YouTube video