Skip to main content

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 for LeanCloud and go to the Consoleopen in new window.

  2. Click the Create appopen in new window button to create a new app. Enter the app name of your choice, and select the Developer price plan:

    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 for your app. Note these credentials, as you will need them later.

    ID and Key
    ID and Key

Deploy to Vercel (Server)

Vercelopen in new window
Vercel
  1. Click the "Deploy" button above. You will be redirected to Vercel to deploy the Waline template.

    Note

    If you haven't logged in, we recommend signing in with GitHub.

  2. Enter a Vercel project name of your choice, then click Create.

    Create Project
    Create Project
  3. Vercel will create a new repository based on the Waline template with the project name you entered earlier.

    deploy
    deploy

    After a minute or two, Vercel should finish the deployment. Click on the Go to Dashboard button to be redirected to your application dashboard.

    deploy
    deploy
  4. Click on your project's Settings tab at the top. On the left-hand sidebar, select Environment Variables to go to environment variables settings page. You will need to create three new environment variables: LEAN_ID, LEAN_KEY and LEAN_MASTER_KEY. The values of each variables correspond to the credentials saved from LeanCloud: APP ID is the value for the LEAN_ID variable, APP Key for LEAN_KEY, and Master Key for LEAN_MASTER_KEY. You can learn more about other variables hereopen in new window.

    set environment variables
    set environment variables
  5. Once the environment variables have been configured, you'll need to redeploy your application. Click on your project's Deployments tab at the top, find the latest deployment at the top of list, and select Redeploy in the dropdown menu on the right.

    redeploy
    redeploy
  6. If everything is ok, Vercel will redirect you to the Overview page to start redeployment. Wait for the STATUS to change to Ready. You can now click Visit to visit the site. This link is your server address.

    redeploy success
    redeploy success

Assign Domain (Optional)

  1. Go to Settings > Domains to go to domain setting page.

  2. Enter the domain you want to assign and click the Add button.

    Add domain
    Add domain
  3. Add a new CNAME record in your domain name service provider.

    TypeNameValue
    CNAMEexamplecname.vercel-dns.com
  4. Once that's set, you can visit your new waline comment system using your own domain. 🎉

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

Importing in HTML (Client)

Here is how you can add Waline to your web page or website:

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

  2. Create a <script> tag and initialize with init() from https://unpkg.com/@waline/client@v3/dist/waline.js 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 to your deployment 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@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',
          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'll be able to access the comment management dashboard. You can edit, mark or delete comments here.

  3. Users can also register for an account via the comment box, and 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 aren't 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 v3.1.3