【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" },  




]

修改完毕后通过 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>

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

hexo s

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

2. 友链朋友圈管理面板

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

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

对于本文演示的 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/，大功告成！

【参考内容】

推荐订阅源

百里飞洋