Waline comments deployed on Vercel

Using the deployment method I like for Waline comments (I personally think it's the simplest)

Required Accounts#

A GitHub account
A Vercel account
A leancloud account (preferably the international version; if you have GitHub, why use the mainland version? The mainland version requires filing, so I won't elaborate here, and the original link is at the end)

Create a Database in LeanCloud#

Log in or register for LeanCloud International Version and enter the console
Click on Create Application in the upper left corner and give it a name you like (please choose the free development version):
Enter the application, select Settings > Application Key in the lower left corner. You can see your APP ID, APP Key, and Master Key. Please record them for future use.

Deploy on Vercel#

Click the button above to jump to Vercel for server-side deployment.

::: note

If you are not logged in, Vercel will prompt you to register or log in; please use your GitHub account for quick login.

:::
Enter a Vercel project name you like and click Create to continue:
At this point, Vercel will help you create and initialize a repository based on the Waline template, with the repository name being the project name you entered earlier.

After a minute or two, a screen full of fireworks will celebrate your successful deployment. At this point, click Go to Dashboard to jump to the application's console.
Click on Settings - Environment Variables at the top to enter the environment variable configuration page, and configure three environment variables: LEAN_ID, LEAN_KEY, and LEAN_MASTER_KEY. Their values correspond to the APP ID, APP KEY, and Master Key obtained in the previous step.
After configuring the environment variables, click on Deployments at the top and click the Redeploy button on the right side of the latest deployment at the top to redeploy. This step is to make the environment variables you just set take effect.
You will then be redirected to the Overview interface to start the deployment. After a moment, the STATUS will change to Ready. At this point, please click Visit, and you will be redirected to the deployed website address, which is your server address.

Bind Domain Name (Optional)#

Click on Settings - Domains at the top to enter the domain configuration page.
Enter the domain name you want to bind and click Add.
Add a new CNAME resolution record at your domain name server provider.

Type Name Value
CNAME example cname.vercel-dns.com (for the mainland region, use cname-china.vercel-dns.com)
Wait for it to take effect, and you can access it through your own domain 🎉
- Comment system: example.yourdomain.com
- Comment management: example.yourdomain.com/ui

Type	Name	Value
CNAME	example	cname.vercel-dns.com (for the mainland region, use cname-china.vercel-dns.com)

success

HTML Introduction (Client Side)#

Set up the following in your webpage:

Import Waline styles

https://unpkg.com/@waline/client@v3/dist/waline.css

Create a <script> tag using

https://unpkg.com/@waline/client@v3/dist/waline.js

The init() function to initialize, passing in the necessary el and serverURL options.

The el option is the element used by Waline for rendering; you can set a CSS selector in string form or an HTMLElement object.
serverURL is the server address, which is the value obtained in the previous step.

<head>
  <!-- ... -->
  <link
    rel="stylesheet"
    href="https://unpkg.com/@waline/client@v3/dist/waline.css"
  />
  <!-- ... -->
</head>
<body>
  <!-- ... -->
  <div id="waline"></div>
  <script type="module">
    import { init } from 'https://unpkg.com/@waline/client@v3/dist/waline.js';

    init({
      el: '#waline',
      serverURL: 'https://your-domain.vercel.app',
    });
  </script>
</body>

The comment service will now successfully run on your website 🎉

Comment Management (Admin Side)#

After deployment is complete, please visit <serverURL>/ui/register to register. The first person to register will be set as the administrator.
After the administrator logs in, they will see the comment management interface. Here, comments can be modified, marked, or deleted.
Users can also register an account through the comment box, and after logging in, they will be redirected to their profile page.

Video Tutorials#

Here are video tutorials made by enthusiastic users; you can refer to them if you are unclear about the above operations.

Waline Deployment Tutorial (Quick Start)#

UP Master: rickroll 摇

Easily Deploy Waline Comment System Using Vercel#

UP Master: 岚天呀

The above is part of the modified original text#

Original link: https://waline.js.org/guide/get-started/