Get Started

About 3 min...

Welcome to Waline. In just a few steps, you can enable Waline to provide comments and pageviews on your site.

LeanCloud Settings (Database)

  1. sign inopen in new window or sign upopen in new window LeanCloud and enter Consoleopen in new window.

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

    Create App
    Create App
  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

    ID and Key
    ID and Key

Deploy to Vercel (Server)

Vercelopen in new window
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.

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

    deploy
    deploy

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

    deploy
    deploy
  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 hereopen in new window.

    set environment variables
    set environment variables
  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.

    redeploy
    redeploy
  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.

    redeploy success
    redeploy success

Assign Domain (Optional)

  1. Click Settings - Domains to go to domain setting page.

  2. Input domain you want to assign and click Add button.

    Add domain
    Add domain
  3. Add a new CNAME record in your domain service server.

    TypeNameValue
    CNAMEexamplecname.vercel-dns.com
  4. You can use your own domain to visit waline comment system after go into effect. 🎉

    • serverURL:example.your-domain.com
    • admin panel:example.your-domain.com/ui
    success
    success

Importing in HTML (Client)

Here is how you can implement Waline on your web page:

  1. Import the stylesheet https://unpkg.com/@waline/client@v2/dist/waline.css in the <head>

  2. Create a <script> tag and initialize with init() from https://unpkg.com/@waline/client@v2/dist/waline.mjs while passing in the necessary el and serverURL options.

    • The el option is the element used for Waline rendering. You can set a CSS selector in the form of a string or an HTMLElement object.
    • serverURL is the link of the server, which you just created in Vercel.
    • For more options, visit the Component Props pageopen in new window

    Here is an example:

    <head>
      <!-- ... -->
      <link
        rel="stylesheet"
        href="https://unpkg.com/@waline/client@v2/dist/waline.css"
      />
    </head>
    <body>
      <!-- ... -->
      <div id="waline"></div>
      <script type="module">
        import { init } from 'https://unpkg.com/@waline/client@v2/dist/waline.mjs';
    
        init({
          el: '#waline',
          serverURL: 'https://your-domain.vercel.app',
          lang: 'en',
        });
      </script>
    </body>
    


     
     
     
     
     




     
     
     
     
     
     
     


  3. 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.

Video Tutorial

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

TIPS: The comment area is only for demo. If you have any questions, please go to Github Discussion to ask.
What do you think?
  • 0
  • 0
  • 0
  • 0
  • 0
  • 0
Comments
  • Latest
  • Oldest
  • Hottest
Powered by Waline v2.14.7