何为友链朋友圈

友链朋友圈 hexo-circle-of-friends 是 Hexo 博客社区的一款插件,原理是使用 Python 定期爬取指定友情链接的博客文章,汇总成更新列表方便博主查看。

对于友情链接很多的博主,可能会苦恼无法及时浏览好友更新的文章内容,如果一个个去访问又非常浪费时间,还可能会扑个空。久而久之,一年到头点进访问别人站点的次数掰手指头都能数出来,友链形同虚设。

那么友链朋友圈将解决这一痛点,它方便博主随时获取友链网站的更新内容,并了解友链的活跃情况 。


01 后端部署

本文演示无服务器部署方案(GitHub 云端部署),如自备服务器可自行参考文档进行私有部署(Server 或 Docker 部署)。

1. 获取项目仓库Repo

首先需要 Fork 项目源仓库 hexo-circle-of-friends

然后编辑 /hexo_circle_of_friends/fc_settings.yaml 文件,完善其中的 Link 配置:

1
2
3
4
5
6
7
8
# 支持配置多个友链页面并指定不同主题策略,每个用{}分隔,它们会被同时爬取,数据保存在一起。
LINK: [
{ link: "https://blog.meta-code.top/link/", theme: "butterfly" }, # 修改为你的友链页地址
# { link: "https://www.yyyzyyyz.cn/link/", theme: "butterfly" }, # 友链页地址1
# { link: "https://noionion.top/link/", theme: "butterfly" }, # 友链页地址2
# { link: "https://immmmm.com/about/", theme: "common1" }, # 友链页地址3
# ...
]

修改完毕后通过 Git 提交。

2. 生成GitHub访问令牌

请参考 官方文档 前往 开发者设置 页面创建 personal access token,其中 Select scopes(作用域)需要勾选 repoworkflow,如下图所示:

注意:除了经典的个人访问令牌 personal access token(可以访问你有权访问的每个存储库),目前 GitHub 官方建议改用细粒度令牌 fine-grained personal access token(可以指定权限细粒度和允许访问的 repo 范围),但是正在 beta 状态可能不太稳定。

因此本文创建的是经典的 personal access token,并设置过期时间为90天:

2023-132 (2)

访问令牌生成后只展示一次,注意及时复制那条字符串到其他地方稍后备用,忘记的话需要重新生成。

如果重新生成访问令牌,那么接下来的 Actions secrets 中 GH_TOKEN 的值也需要重新更新!

3. 添加Actions secrets

点击自己项目仓库的 Settings -> Secrets and variables -> New repository secret,如图所示:

2023-132 (3)

参考下方表格添加 4 个环境变量 Actions secrets,

再次提醒:GitHub 访问令牌 GH_TOKEN 字符串的值稍后还有用,记得复制到其他地方!

Name Secret 用途说明
GH_NAME Barry-Flynn 你的 GitHub 用户名
GH_EMAIL Barry-Flynn@qq.com 你的 GitHub 绑定邮箱
GH_TOKEN 你的 GitHub 个人访问令牌
STORAGE_TYPE sqlite 数据库存储方式

配置完成后,应该如下图所示:

2023-132 (4)

4. 开启Workflow权限

点击自己项目仓库的 Settings -> Actions -> General,往下拉找到 Workflow permissions

查看是否已勾选读写权限 Read and write permissions,如果没有请勾选并点击 Save 保存。

2023-132 (5)

5. 在Vercel上部署项目

前往并登录 Vercel,没有账号的请直接用 GitHub 账号注册。

在控制台 Dashboard 点击按钮 Add New... 创建一个新项目 Project。在 Import Git Repository 中选择自己 fork 的仓库,点击 Import 导入。

2023-132 (6)

然后点击 Deploy 开始部署,等待一会,正常情况下应该会部署成功。

2023-132 (8)

6. 生成Vercel访问令牌

点击 Vercel 页面右上角头像,进入 Account Settings -> Tokens 页面,简单填写 token 信息后点击 Create 即可创建:

2023-132 (9)

注意这里的令牌字符串同样只展示一次,请注意复制到其他地方防止忘记,稍后备用

7. 添加Vercel环境变量

返回控制台 Dashboard 点击进入刚刚部署的项目,选择 Settings -> Environment Variables

2023-132 (11)

参考下方表格通过点击按钮 Add another 添加 4 个环境变量:

Key Value 用途说明
GH_NAME Barry-Flynn 你的 GitHub 用户名
GH_EMAIL Barry-Flynn@qq.com 你的 GitHub 绑定邮箱
GH_TOKEN 你的 GitHub 个人访问令牌
VERCEL_ACCESS_TOKEN 你的 Vercel 访问令牌

2023-132 (12)

添加完成后,应该如下图所示:

2023-132 (13)

8. 启用GitHub Actions

接下来回到 GitHub 上你 fork 后的项目仓库,选中 Actions 面板,点击 I understand my workflows, go ahead and enable them 按钮:

2023-132 (14)

然后选中 update-friends-posts 并点击按钮 Enable workflow 启用:

2023-132 (15)

然后点击 Run workflow -> Run workflow 开始第一次运行:

2023-132 (16)

等待运行完毕后,仓库正常情况下会上传 data.db,并且 Vercel 也会同步更新。

2023-132 (17)

9. 测试接口返回数据

返回 Vercel 控制台 Dashboard 点击进入刚刚部署的项目,选择 Settings -> DOMAINS 可以看到一个域名地址,如 hexo-circle-of-friends-xxxx.vercel.app。复制这个地址,尝试在其后面拼接 /all 路径进行访问,如果出现数据说明配置成功。

该域名地址即为前端所需 API 地址: https://hexo-circle-of-friends-xxxx.vercel.app/

至此,后端部分搭建完成。如果想使用其他数据库,请自行参考文档 配置项说明


02 前端部署

本文作者博客使用的是 Hexo 框架的 Butterfly 主题,如有其他需要请自行参考文档

1. 新建Hexo博客页面

在本地博客仓库打开终端,使用 hexo 命令创建新页面,如:

1
hexo new page fcircle

创建完成后,编辑 source/fcircle/index.md 文件,粘贴如下内容(注意修改成你的 API 地址):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
---
title: 友链文章朋友圈
date: 2023-11-23 18:54:05
update: 2023-11-23 18:54:05
comments:
top_img:
aside:
---

<div id="hexo-circle-of-friends-root"></div>
<script>
let UserConfig = {
// 填写你的api地址
private_api_url: 'http://127.0.0.1:8000/',
// 初始加载几篇文章
page_init_number: 20,
// 点击加载更多时,一次最多加载几篇文章,默认10
page_turning_number: 10,
// 头像加载失败时,默认头像地址
error_img: 'https://sdn.geekzu.org/avatar/57d8260dfb55501c37dde588e7c3852c',
// 进入页面时第一次的排序规则
sort_rule: 'created',
// 本地文章缓存数据过期时间(天)
expire_days: 1,
}
</script>
<script type="text/javascript" src="https://npm.elemecdn.com/fcircle-theme-yyyz@1.0.13/dist/fcircle.min.js"></script>

然后本地运行博客,访问 http://localhost:4000/fcircle/ 即可查看效果:

1
hexo s

如果觉得该 CDN 比较慢,可以手动将上方 JavaScript 文件下载或存储在其他渠道。

2. 友链朋友圈管理面板

在友链朋友圈顶部卡片右侧有管理面板按钮:

2023-132 (18)

第一次部署完成并在前端打开管理面板时,输入的第一个密码将作为登录密码。

对于本文演示的 GitHub + Vercel + SQLite 部署方案,当保存设置时,会经历推送 GitHub、Vercel 重建的步骤,可能需要一段时间才能同步你的更改,因此在这种部署方式下,会有一定的延迟存在。

除了在管理面板配置之外,朋友圈同样支持修改配置文件进行配置,详见 配置项说明


03 自定义域名解析到Vercel

由于域名 vercel.app 目前在中国大陆遭遇 DNS 污染导致无法访问,因此为了提高用户体验,如果有域名的话,可以创建一个二级域名自行解析到 Vercel 的服务器。

1. 新建子域名解析

前往自己的域名解析平台,添加一个解析记录。我用阿里云平台的云解析DNS做演示:

  • 记录类型:CNAME-将域名指向另外一个域名
  • 主机记录:可以填 hexoCircle,它将作为你的子域名地址。
  • 解析线路:默认即可
  • 记录值:填写 vercel-dns.com
  • TTL:默认10分钟即可

或者指向一个具体的IP,如:

  • 记录类型:A-将域名指向IPV4地址
  • 主机记录:可以填 hexoCircle,它将作为你的子域名地址。
  • 解析线路:默认即可
  • 记录值:填写 76.223.126.88
  • TTL:默认10分钟即可

2. 为Vervel项目添加域

前往 Vercel 控制台 Dashboard,点击进入友链朋友圈项目,选择 Settings -> DOMAINS

在输入框填写刚刚新建解析的子域名,如 hexoCircle.xxxx.com,然后点击 Add 按钮即可。

现在关闭特殊网络,使用大陆内网尝试访问 hexoCircle.xxxx.com/all 接口,如果能够正常返回数据,说明添加成功。

3. 更新朋友圈页面API

更新博客 source/fcircle/index.md 文件中的 private_api_url 值,

填写成你刚刚的子域名地址 httpS://hexoCircle.xxxx.com/,大功告成!


【参考内容】

[1] 友链朋友圈 - 使用文档备用地址