Reprint - automatically pushes the generic implementation of the new blog

👉️Original URL: https://www.inevitable.tech/posts/a1b574bb/

✍️Author: glass

📝Description:

This is a solution for most people. It helps you automatically push new blogs to your readers. Effectively increase the traffic of the website.

This is a solution for most people. It helps you automatically push new blogs to your readers. Effectively increase the traffic of the website.

Intro

Review of the past

at Hexo uses the Web Push Notification browser to notify pushes , we talked about the benefits of Web push notifications and how to configure them Webpushr。 at Auto web push notification , we discussed special solutions for automatic push notifications. This solution has many limitations for the toolchain. The website source code must be on Github, and the website needs to be hosted on Netilfy and must be used hexo-abbrlink This plugin.

In this article, I will give a more general solution. This time there are no more prerequisites. The only prerequisite is that you need to register Webpushrto add your website to Webpushr. You don’t need to add Webpushr’s SDK to your website. This plugin will take care of everything for you.

If you want to use another notification push service, please submit Issue or PR。 We can add compatibility improvements to it.

principle

idea

This time we only have to install hexo-web-push-notification can solve all problems. Even the integration of the SDK is automated.

Automating the SDK is simple. Insert the SDK code directly into the rendered HTML.

The idea of the notification section is with Auto web push notification The same. We generate newPost.json。newPost.json Contains information about the latest articles. Then we compare locality newPost.json with online websites newPost.json。 If the ID of the article changes, then we push the reader to the notification.

implement

In addition to simple SDK automatic integration, plugins are mainly divided into two parts. The first part builds newPost.json。 The second part deals with notification push.

With Hexo Event, we let the first part in hexo generate Executed afterward. The second part is in hexo deploy Executed before. At this time, the website has not been updated.

Part I

What the first part does is simple. Find the most recently published article and generate it based on its information newPost.json to local public/newPost.json。 Here are the following newPost.json Examples:

{
  "title": "Auto web push notification",
  "id": "posts/afd56cf2/",
  "date_published": "02/24/2020",
  "summary": " 如何自动通知读者有更新了？即只要正常更新博客，读者便可以在第一时间收到关于新文章的通知。",
  "url": "https://www.inevitable.tech/posts/afd56cf2/",
  "tags": ["hexo", "push notifications", " 自动化 ", "CI"],
  "categories": [" 开发 "]
}

This time, id uses the path of the article directly. No matter how you change HEXO, the path of the article will always be unique. Therefore, this time the solution is more widely applicable.

This compares to the previous time by reading data directly from the source file for processing. This time the data comes from the Hexo API, which enhances the applicability. No matter what your source file looks like, as long as Hexo can read it, the plugin will work properly.

Part II

The second part will be local newPost.json on the website newPost.json Make a comparison. If the article ID is different, then the author made an update (without considering the possibility that the author deleted the latest article). At this time, the notification push is triggered. The push content contains the article title, link, and excerpt. An excerpt is the Summary section.

Installation and use

If you want to automate push notifications, you have to take care of it first Webpushr。 You’ll need to register an account, join your website, configure the certificate that Safari pushes, and customize the style of the request notification popup. You can refer to it for details Hexo uses Web Push Notification browser notification push,。

The rest is all over hexo-web-push-notification。

To install this plugin, you only need to execute npm i hexo-web-push-notification --save。

Before using this plugin, remember to add the following configuration to the Hexo root directory_config.yml。

webPushNotification:
  webpushrKey: "your webpushr rest api key"
  webpushrAuthToken: "your webpushr authorize token"
  trackingCode: "AEGlpbdgvBCWXqXI6PtsUzobY7TLV9gwJU8bzMktrwfrSERg_xnLVbjpCw8x2GmFmi1ZcLTz0ni6OnX5MAwoM88"

trackingCode Can be a bit hard to find. Open WebPushr and go to the home page of the configuration site. Open Setup>TrackingCode.tracking code It looks like this:

<!-- start webpushr tracking code -->
<script>(function(w,d, s, id) {w.webpushr=w.webpushr||function(){(w.webpushr.q=w.webpushr.q||[]).push(arguments)};var js, fjs = d.getElementsByTagName(s)[0];js = d.createElement(s); js.id = id;js.src = "https://cdn.webpushr.com/app.min.js";
fjs.parentNode.appendChild(js);}(window,document, 'script', 'webpushr-jssdk'));
webpushr('init','AEGlpbdgvBCWXqXI6PtsUzobY7TLV9gwJU8bzMktrwfrSERg_xnLVbjpCw8x2GmFmi1ZcLTz0ni6OnX5MAwoM88');</script>
<!-- end webpushr tracking code -->

The last second line AEGlpbdgvBCWXqXI6PtsUzobY7TLV9gwJU8bzMktrwfrSERg_xnLVbjpCw8x2GmFmi1ZcLTz0ni6OnX5MAwoM88 It’s yours trackingCode。

For more installation guides, please refer to README.md。

postscript

This is my first NPM package release. I used Github’s package management service. But the process is really troublesome. As we all know, the first step in distributing a package is npm adduser。 If you are distributing to NPM, simply enter the username and password. However, if it is distributed to Github, the password must use a Personal Access Token. Generating a Personal Access Token is a bit of a hassle.

It seems that the name of the package must be scoped. That is, the name of the package must start with the author’s name.

After successfully publishing to Github, I ran into issues not downloading. use npm i Shows My package not found. May run npm i npm looks for packages on NPM, not on Github.

Given that the above wasn’t a particularly good experience, I wanted to remove this package and release it on NPM. After reading the documentation and other people’s answers, the only way to delete a package is to delete this repository.

Finally, it’s NPM incense.

Related articles

• Hexo uses the Web Push Notification browser to notify pushes