【Hexo博客】添加友链朋友圈，纵览好友最新文章

何为友链朋友圈

友链朋友圈 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 配置：

# 支持配置多个友链页面并指定不同主题策略，每个用{}分隔，它们会被同时爬取，数据保存在一起。
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（作用域）需要勾选 repo 和 workflow，如下图所示：

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

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

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

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

3. 添加Actions secrets

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

参考下方表格添加 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`	数据库存储方式

配置完成后，应该如下图所示：

4. 开启Workflow权限

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

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

5. 在Vercel上部署项目

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

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

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

6. 生成Vercel访问令牌

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

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

7. 添加Vercel环境变量

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

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

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

添加完成后，应该如下图所示：

8. 启用GitHub Actions

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

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

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

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

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 地址)：

---
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>