Inevitable

文字所表现出来的美丽、恐惧。。还有率真之类的东西，我觉得在其他事物中还是很难寻得的。

0%

自动推送新文章的特殊解决方案

发表于 更新于 分类于 阅读次数： Valine：

如何自动通知读者有更新了？即只要正常更新博客，读者便可以在第一时间收到关于新文章的通知。

Intro

注意，这一篇文章是更加泛用的自动推送通知的方法。

上一篇文章我们讲到了 Web push notification 的好处,以及如何为我们的网站添加 Web push notification.

这一篇文章将关于如何自动推送新文章。即站长只要一更新博客，读者就会自动接受到通知。

以下方法具有一定局限性。如果你跟我的博客配置一样，那么你可以直接套用。如果不一样，那么你可以学习一下我的思路，或者可以开一个 Issue。我会尽力解决兼容性的问题。

关于我的博客配置：

  1. 我的博客网站源码放在Github上。因此可以使用 Github Action。
  2. 我的博客托管在Netlify上面。因此可以方便的比较网站源码的区别。刚刚推送到 Github 上的网站源码和托管在 Netlify 的进行比较。在比较之后再触发 Netlify 的 Build。
  3. 我的 Hexo 博客 URL 的构成是https://www.inevitable.tech/posts/98ae9e55/，98ae9e55是使用了hexo-abbrlink这个插件。这关系到之后newPost.json中id的构造。

hexo-detect-new-post

使用hexo-detect-new-post生成newPost.json。newPost.json中含有最新文章的信息。通过对比newPost.json，我们就可以知道有没有更新新的文章。

newPost.json是这样的格式:

1
2
3
4
5
6
7
8
9
{
  "title": "静态博客优化",
  "id": "7a4bc632",
  "date_published": "2020-02-07T00:00:00.000Z",
  "summary": "新的一年从优化博客开始。这一次从内容，性能这两方面对博客进行优化。",
  "url": "https:\\www.inevitable.tech\\posts\\7a4bc632",
  "tags": ["博客优化", "性能", "Hexo"],
  "categories": ["开发"]
}

我的每篇文章开头是这个样子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
---
title: 静态博客优化
tags:
  - 博客优化
  - 性能
  - Hexo
categories:
  - 开发
abbrlink: 7a4bc632
date: 2020-02-07 00:00:00
---

新的一年从优化博客开始。这一次从内容，性能这两方面对博客进行优化。

<!-- more -->

Here the main content starts.

Title，Date，Tags，Categories 都是直接源自文章的头部。Summary 是文章的 excerpt 部分。Id 为文章的 abbrlink。Url 是直接进行拼接得出的。

web-push-notification Action

想要能够自动检测出文章的更新，除了hexo-detect-new-post这个还不够。我们还需要进行比较。

我们要比较的是 Github 上的newPost.json与托管在 Netlify 上的newPost.json。

首先我们要关闭 Netlify 的 Auto Build,并且打开 Build Hook。这样只有通过 Url 触发，Netlify 才会进行新的一次构建。

关闭 Netlify 的 Auto Build 只需要关闭 Github App 的权限。取消 Netlify Github App 读取对应 Repo 的权限。Build Hook 则在 Setting>Build&Deploy>Build Hooks 中打开。

接下来我们只需要安装这个 Action就行了。这个 Action 会被 push 触发。接着它会对比newPost.json,并且触发 Netlify Build Hook。如果有文章更新则访问 Webpushr 的 API 进行通知推送。

安装这个 Action很简单。只需要在 hexo 根目录下的source/中新建 .github/workflows/main.yml。main.yml中写入

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
name: web push notification

on: [push]

jobs:
  build:

    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v2
    - name: Push web notification
      id: notification
      uses: glazec/[email protected]
      env:
        webpushrKey: ${{ secrets.webpushrKey }}
        webpushrAuthToken: ${{ secrets.webpushrAuthToken }}
        newPostRepo: ${{ secrets.newPostRepo }}
        newPostOnlineSite: ${{ secrets.newPostOnlineSite }}
        buildHook: ${{ secrets.buildHook }}

接着打开 Hexo 根目录下的_config.yml,找到deploy做如下更改。

1
2
deploy:
  ignore_hidden: false

将ignore_hidden改为false会把隐藏文件也推送到 Github 仓库中。即我们的.github也会被推送上去。

做好了这些就只差最后一步，设置 Github Action 中的环境变量。打开你的 Github 放置网站的仓库，前往 Settings>Secrets。添加buildHook,newPostOnlineSite,newPostRepo,webpushrAuthToken,webpushrKey。

buildHook是你的 Netlify Build Hooks Url.

newPostOnlineSite是你网站上newPost.json的地址。比如我的就是https://www.inevitable.tech/newPost.json。

newPostRepo则为放置网站源码的 Github 库中，newPost.json的地址。比如我的是https://raw.githubusercontent.com/glazec/glazec.github.io/master/newPost.json。

webpushrAuthToken,webpushrKey则用来调用 webPushr API 进行通知推送。可以在 Integration>Rest API Key 中找到。

有关如何具体设置 Webpushr，请参考上一篇文章。

结语

这个自动推送通知处理好之后还是挺好用的。每次发布新文章，只要hexo deploy就完成了所有事情。用户也会收到通知。

我的这个方法用到了很多工具，建立在使用这些工具之上。对于那些工具链和我不一样的人来说，不是那么的使用。

那么接下来，我考虑将 Github Action 所做的事情本地化。也就是将这个 Action合并到hexo-detect-new-post，相信这样就可以对大部分人实用。

再将newPost.json中的依赖减少一些。比如 Id 的生成使用 SHA 而不是hexo-abbrlink这个插件。

我已经对流程进行了优化。现在有更加泛用的解决方案。请见这一篇文章

相关文章

欢迎关注我的其它发布渠道