【 Roof placement 】【 special column 】 use Github Pages+Hexo Build a blog

1. register LeanCloud

Go to LeanCloud Register and log in

2. establish & Configure the application

I'm gonna go ahead and create an app

Enter the app name ( Name at will ), Choose development , Click Create

After the creation is successful, click the settings in the upper right corner of the application

Click on Storage , establish Class,Class The name is set to Counter( It has to be for Counter), Choose unlimited , Click Create

Click settings after creation , Click application Key, obtain App ID and App Key, Copy standby

3. Modify theme profile

The theme profile /themes/next/_config.yml Medium leancloud_visitors: Of enable Set to true, And will App ID and App Key fill

4. Configure the domain name , Set up network security

Click Security Center , Fill in the domain name corresponding to your blog （ Pay attention to the protocol 、 The domain name and port number should be strictly consistent ）

because App ID and App Key Is completely exposed , So prevent others from using , We can set... In the application settings Web Secure domain name , Only the added domain name can use this application , Prevent someone Hack Our database . Click Settings , Security Center ,Web Domain name security , add to Blog domain name , Click Save to OK 了

5. Restart deployment Hexo

hexo clean
hexo g
hexo d

6. Background management

When the above parts are configured , When our blog page first opened , It will automatically send information to the server , In the application just created test Of Counter Create a piece of data in the table .

7. Deploy the cloud engine to ensure that the number of visitors is not tampered with at will

Click the cloud engine on the left in turn -> Deploy -> Online editing

Click Create function

Select... In the pop-up window Hook type , In the choice Hook Place selection beforeUpdate, In the choice Class Place selection Counter class . After pasting the code below , Point save .

var query = new AV.Query("Counter");
if (request.object.updatedKeys.indexOf('time') !== -1) {
    return query.get(request.object.id).then(function (obj) {
        if (obj.get("time") + 1 !== request.object.get("time")) {
            throw new AV.Cloud.Error('Invalid update!');
        }
    })
}

Then click deploy... To the right of the Create button -> Production environment -> Deploy

To be displayed, the deployment is completed ：1 If an instance is deployed successfully

8. Some of the pit

Many articles end here , But there are still some pits …

Solve the problem that some articles do not display the number of readings ,LeanCloud Automatic deployment failed ？

terms of settlement ： Manually create LeanCloud Of Counter data row

Imitate existing data formats to create ：



If your manual creation fails , I'm going to check url Is the format correct .

Solve the number of readings : Counter not initialized! More info at console err msg.

Method 1 、 Installing a plug-in hexo-leancloud-counter-security
Command line execution npm install hexo-leancloud-counter-security

Method 2 、 The theme profile _config.yml The corresponding item in security Set as false

solve hexo+next The number of times you read the home page has always been 0, The reading times in the article can be displayed normally ？

A lot on the Internet hexo Add reading statistics are old versions next Theme approach , The new version has been collected leancloud, Just open the topic below lean_cloud Function and in

/next/layout/_macro/post.swig The following code is enough

{# LeanCould PageView #}
          {% if theme.leancloud_visitors.enable %}
             <span id="{
   { url_for(post.path) }}" class="leancloud_visitors" data-flag-title="{
   { post.title }}">
               <span class="post-meta-divider">|</span>
               {% if theme.post_meta.item_text %}
             </span>
          {% endif %}