普通视图

发现新文章,点击刷新页面。
昨天以前首页
  • ✇ZERO开发
  • 守护C盘,3种指令清理方法北桥苏
    磁盘清理工具虽然有很多,但是对于一些开发工具,或较为隐蔽的缓存还是无法有效清理。眼看着C盘的“垃圾”越积越多,电脑使用起来越来越卡,我们只有两种方法:将较大的软件转移到其他磁盘(直接移动 or 软链接)一条路走到底,对 “垃圾” 大清理。下面我就简单介绍一下软链接和两种指令清理的方法。一、软链接mklink /J 目标文件/文件夹 源文件/文件夹1mklink /J D:\target-dir E:\src-dir二、清理临时文件通过下面命令进入到临时文件的默认位置,然后再点击删除,也可以将这个默认位置指定到其他磁盘。只需要在环境变量种创建变量名TEMP,值为上面显示的默认位置。1cmd 输入 %temp%三、指令清理管理员身份运行命令行 C盘瘦身121、 DISM.exe /Online /Cleanup-Image /StartComponentCleanup2、 powercfg hibernate off
     

守护C盘,3种指令清理方法

作者 北桥苏
2024年12月20日 10:13

磁盘清理工具虽然有很多,但是对于一些开发工具,或较为隐蔽的缓存还是无法有效清理。

眼看着C盘的“垃圾”越积越多,电脑使用起来越来越卡,我们只有两种方法:

  1. 将较大的软件转移到其他磁盘(直接移动 or 软链接)
  2. 一条路走到底,对 “垃圾” 大清理。

下面我就简单介绍一下软链接和两种指令清理的方法。

一、软链接

mklink /J 目标文件/文件夹 源文件/文件夹

1
mklink /J D:\target-dir E:\src-dir

二、清理临时文件

通过下面命令进入到临时文件的默认位置,然后再点击删除,也可以将这个默认位置指定到其他磁盘。

只需要在环境变量种创建变量名TEMP,值为上面显示的默认位置。

1
cmd 输入 %temp%

三、指令清理

管理员身份运行命令行 C盘瘦身

1
2
1、  DISM.exe /Online /Cleanup-Image /StartComponentCleanup
2、 powercfg hibernate off

img

  • ✇ZERO开发
  • 零成本 API 服务搭建,用 GitHub Actions 自动爬取文章北桥苏
    前言本着将成本降到最低,我目前做的应用或小程序都是单机的,也就是不用请求接口,只要一上架就没有任何支出。但是写死的数据毕竟有限,应用的内容单一无法紧跟时事热点,每次打开一个样,自然就没有留存。遇到有错字啥还要更新版本,那有没有方法既能丰富应用内容,又不用增加成本呢?既要又要,当然也有,找网上提供的免费 API 接上去。但是这种有请求数限制,而且还和自己应用的业务不相关,那就只能自己弄接口了。既然可以在 GitHub 上搭静态博客,那整一个静态 API (json 文件),时不时地更新或提交新的 json 文件上去,在 C 端应用上不也看起来像是动态的了。所以下面就实践一下如何在 GitHub 上搭建 API 服务,以及如何自动化更新数据(部署爬虫)?API 服务搭建方法和之前在 GitHub 上搭建 Hexo 类似,就是给仓库开启 GitHub Pages,可以自行绑定域名,也可以用之前主仓设置的域名后面带当前仓库名访问。当前域名要备案过了,然后用访问资源的方式能访问到 json 文件 (xml、csv 等) 就可以了。定时爬虫部署要实现自动化更新数据,那就要定时手动上传和直接爬虫爬取
     

零成本 API 服务搭建,用 GitHub Actions 自动爬取文章

作者 北桥苏
2024年12月9日 16:13

前言

本着将成本降到最低,我目前做的应用或小程序都是单机的,也就是不用请求接口,只要一上架就没有任何支出。但是写死的数据毕竟有限,应用的内容单一无法紧跟时事热点,每次打开一个样,自然就没有留存。遇到有错字啥还要更新版本,那有没有方法既能丰富应用内容,又不用增加成本呢?

既要又要,当然也有,找网上提供的免费 API 接上去。但是这种有请求数限制,而且还和自己应用的业务不相关,那就只能自己弄接口了。

既然可以在 GitHub 上搭静态博客,那整一个静态 API (json 文件),时不时地更新或提交新的 json 文件上去,在 C 端应用上不也看起来像是动态的了。所以下面就实践一下如何在 GitHub 上搭建 API 服务,以及如何自动化更新数据(部署爬虫)?

图片

API 服务搭建

方法和之前在 GitHub 上搭建 Hexo 类似,就是给仓库开启 GitHub Pages,可以自行绑定域名,也可以用之前主仓设置的域名后面带当前仓库名访问。当前域名要备案过了,然后用访问资源的方式能访问到 json 文件 (xml、csv 等) 就可以了。
图片

定时爬虫部署

要实现自动化更新数据,那就要定时手动上传和直接爬虫爬取,可以通过 GitHub Actions 工作流的方式实现,下面第一次使用的方式演示如何创建并运行 workflow。

创建推送 TOKEN

因为生成了 json 文件需要自动推送到仓库,为了不用输入账号密码并使用 PAT,这个和之前 Hexo 搭建时获取的一样。settings->developer settings->github apps->personal access tokens->tokens (classic),然后选择 “Generate new token (classic)”。

TOKEN 权限设置

设置名称,有效时间,勾选权限,主要的把 repo、workflow、user、write:discussion 以及 admin 开头的全勾上,如果不想选都选上也可以。最后创建后就会显示 token 值,记得把那个 ghp 开头的字符串复制下来,不然后面就看不到了。这里再说一下 PAT 下的 Fine-grained tokens 和 Tokens (classic) 的区别,上面比 Tokens (classic) 权限控制更精细,安全性更高,而且无法设置不能失效的 Token。
图片

测试 TOKEN

是否可用用 git 命令运行,换成自己的 token 和仓库报错了则说明该 TOKEN 无效

1
git push https://x-access-token:换成你的TOKEN@github.com/z11r00/你的仓库.git HEAD

创建工作流

打开仓库后,点击 Actions,然后点击 New workflow,set up a workflow yourself 后提交。git 拉取后会在项目中生成一个.github 文件夹,依次点进去是刚才创建的工作流 yml 文件。
图片

图片

Yml 配置说明

1
2
3
4
5
6
name:工作流名称,展示在用于表示工作流。
on:触发事件,schedule 定时 | push 推送 | pull_request pr 请求,定时任务下有一个 cron 的五个 * 分别是分 时 日 月 星期(, 分割字段多值 - 定义范围 / 指定间隔频率)。
workflow_dispatch: 是否允许在 github actions 操作选项卡中手动操作,默认是可以。
jobs:任务执行的定义。
runs-on: 用于任务执行的运行器,可以说是操作系统,其他的还有 windows 等,具体参考文档,下面会贴出。
steps: 步骤,工作流依次执行的步骤,每个都有一个名字和具体的运行指令,可以使用 actions 包 (github 提供的集成程序,比如用于检出仓库代码的,python 环境的等等)。

图片

爬虫工作流

以下定义一个每天八点十分(不一定准时),先是用 TOKEN 检出仓库中的所有代码,然后设置 python 环境后安装指定依赖,运行 script 目录下的 ArticleSpider.py 脚本,最后将脚本里生成的 json 文件提交并推送到仓库。

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
# 工作流名称
name: article_spider
# 事件:schedule 定时 | push 推送 | pull_request pr请求
on:
schedule:
# 分 时 日 月 星期 (*每次都 ,分割字段多值 -定义范围 /指定间隔频率)
- cron: '10 0 * * *' # 每日8:10,时间点执行任务,注意时区(UTC, 0+8)

# 是否可在github操作选项卡手动运行
workflow_dispatch:

# 定义任务
jobs:
build:
# 任务运行器(切换可参考文档)
runs-on: ubuntu-latest

# 步骤
steps:
# 使用到的actions包(用于克隆当前仓库的所有代码)
- name: Checkout repository
uses: actions/checkout@v3
with:
ref: main
token: ${{ secrets.PUSH_TOKEN }} # 自定义的个人推送TOKEN
- name: Set up Python
uses: actions/setup-python@v2
with:
python-version: '3.x'
- name: Install dependencies
run: |
python -m pip install --upgrade pip
pip install requests
pip install lxml
- name: execute py script
env:
FM_USERNAME: ${{ secrets.USERNAME }}
run: |
python script/ArticleSpider.py
- name: 列出所有文件
run: |
ls -l
- name: Commit changes
run: |
git config --local user.email "2652364582@qq.com"
git config --local user.name "bqs"
git add .
git commit -m "Add changes" || echo "No changes to commit"
git push origin main

ArticleSpider.py

脚本因为对方站点是一个前后端分离的项目,页面的列表和详情都是用异步请求的方式。所以这种抓取就比较好办,写一个 while 循环,页码不断累加的请求接口,判断有超过某时间点的文章则跳出循环。在循环中将数据保存到指定的目录下的 json 文件中,当然也可以自己调整数据,如果要分页就按固定条数分文件。
图片

图片

图片

运行效果

虽然是定时的,但也可以去 GitHub 控制台手动运行。打开 Actions,选择工作流名字进去,最后 Run workflow 就等待执行了。详细也可以看到脚本里打印出的日志,执行完毕再回到仓库查看是否有 json 文件生成。
图片
图片

写在后面

以上只是演示,如果真要弄自己的 API 还是得对爬取的数据做一下处理,拓展一下是不是还可以用这种方式,实现一个带后台管理的资源 “动态网站”。但是应用也不光只有展示,还有提交部分,所以要想零成本实现将用户数据存储下来就要用到另一些方法了,最后 GitHub Actions 用法也远不止于此……

安利

QQ小程序:**实用工具箱**

img

  • ✇ZERO开发
  • 零成本搭建个人 APP 和小程序后台北桥苏
    前言前面也说了,通过 GitHub Pages+GitHub Actions 只是解决了动态数据展示,但是要零成本得完成将用户信息存储下来,并实现数据交互呢?我开始是想用云文档,种种原因,我还是希望有个自己能二次修改的后台,于是就选择了 Vercel+Railway 方式。虽然网上也有很多人介绍这俩平台的玩法,但都是 2024 年以前的文章,有些平台最新的修改,和自己踩到的坑而别人没提到的细节,我还是想记录一下。坑点域名已经解析成功了,但是一直无法访问 Vercel 上的页面。vercel-php 版本和 Vercel 上的 NodeJs 版本冲突,和一些配置问题。代码提交推送后,Vercel 没有完成自动部署等等。准备Vercel: 略过详细介绍,暂且把他理解成云服务器,入门配置免费,需要注册登陆。 Railway: 同样略过详细介绍,暂且把他理解成云数据库,几乎免费,需要注册登陆。 GitHub: 先创建存放程序的仓库,也几乎完全免费,需要注册登陆。Typecho: 博客程序 ,其他语言的像 Flask 也行,开源免费,下载或自行编写。Vercel 配置进入 vercel 官网
     

零成本搭建个人 APP 和小程序后台

作者 北桥苏
2024年12月8日 16:13

前言

前面也说了,通过 GitHub Pages+GitHub Actions 只是解决了动态数据展示,但是要零成本得完成将用户信息存储下来,并实现数据交互呢?

我开始是想用云文档,种种原因,我还是希望有个自己能二次修改的后台,于是就选择了 Vercel+Railway 方式。

虽然网上也有很多人介绍这俩平台的玩法,但都是 2024 年以前的文章,有些平台最新的修改,和自己踩到的坑而别人没提到的细节,我还是想记录一下。

图片

坑点

  1. 域名已经解析成功了,但是一直无法访问 Vercel 上的页面。
  2. vercel-php 版本和 Vercel 上的 NodeJs 版本冲突,和一些配置问题。
  3. 代码提交推送后,Vercel 没有完成自动部署等等。

准备

  • Vercel: 略过详细介绍,暂且把他理解成云服务器,入门配置免费,需要注册登陆。
  • Railway: 同样略过详细介绍,暂且把他理解成云数据库,几乎免费,需要注册登陆。
  • GitHub: 先创建存放程序的仓库,也几乎完全免费,需要注册登陆。
  • Typecho: 博客程序 ,其他语言的像 Flask 也行,开源免费,下载或自行编写。

Vercel 配置

进入 vercel 官网,推荐使用 GitHub 账号登陆,配置主要完成仓库的代码导入,域名解析绑定,项目部署和相关参数设置。

代码导入

登陆后点击 “Import Git Repository”,然后选择仓库安装并设置权限,接着是 Configure Project,Congratulations 都可以直接下一步进入到 Production Deployment,可参考下图。

图片

图片

图片

图片

域名解析绑定

进入到 “Production Deployment” 时,我们可以看到项目已经创建成功。不但可以看到 source 源仓库分支和提交信息,还能看到 Domains 分配的域名,但是该域名被墙无法访问。

图片

点击上面的 “Domains” 按钮(在 Visit 左边),输入即将要解析过来的域名,系统会展示需要用 CNAM 类型被解析的域名,复制该 value 去到自己的域名服务商控制台,添加一条 CNAME 解析记录。

图片

图片

如果说服务商那边解析成功了,并且 Vercel 平台也显示域名验证成功,也就是前面提到的坑点一。这种一般是 DNS 缓存原因,可以换一台电脑或用手机访问测试,如果能就等待一下,直到能 ping 通。

还有 Vercel 会自动办法 SSL 证书,所以后面只需要留意日期就可以,下图我暂时放了一个 index.html 页面,动态程序演示要放到 Railway 后。

图片

图片

Railway 配置

进入 Railway 官网,同样推荐 GitHub 账号登陆,进来后选择 “MySQL” 类型,直接按默认后进入到 production,最主要的是我们需要分配给他的 Host,账号和密码,数据库名等等。

需要注意的是 Railway 每个月只有 5 刀的限额,需要提前备份数据库。超过限额后没有备份的数据就没了,需要删掉账户重新注册才可以。

图片

打开 Data,选择 “Connect” -> “Public Network”,Connection URL 就是该产品对外的连接 Host,用户密码,端口等信息。只需要复制下来,用于在程序中连接配置,Navicat for MySQL 图形化工具连接失败,我试过了。

图片

后端程序部署

以下简单介绍 php 和 python 两种语言的 hello world,和有数据库连接的博客程序,第一步是后端入口文件都不能放在项目的根目录下,放在新建文件夹的 api 中,并添加 vercel.json(用于配置路由和分配内存等信息)。

图片

Python 的 Hello World

新建 vercel.json 文件,和用于打印的 py 文件,最后访问自定义的域名。

1
2
3
4
5
{
"rewrites": [
{ "source": "/(.*)", "destination": "/api/index" }
]
}

PHP 的 Hello World

需要注意的是部署 php 项目要用到 vercel-php,而 vercel-php 又与 NodeJs 版本有一定对应关系。目前 2024 年 8 月 vercel 平台默认 Node 版本是 20.x,我下面演示的是 vercel-php@0.6.0,所以再部署前需要先将 Node 版本切换为 18.x,如下图。(以下有两种情况的报错都要 node 和 vercel-php 版本相关)

1
2
3
4
5
部署后报错合集

1. PHP Built-In Server HTTP error: Error: connect ECONNREFUSED 127.0.0.1:8000

2. The following Serverless Functions contain an invalid "runtime": - api/index (nodejs18.x)

图片

Typecho 安装

从官网下载源码后,找到 config.inc.php 文件,将数据库的参数修改为 Railway 复制过来的配置。

图片

然后通过 Git 提交代码到仓库,如果发现没有部署成功,可以进入 vercel 平台的 Deployments 查看部署记录,有报错的根据信息修改。

图片

提交并成功部署后,输入自定义域名,并带上 install.php 进行安装,然后用 pdo 方式安装数据库,上面的 railway 参数就再输入一遍。

图片

安装成功后,可以到 Railway 查看到新增的表格,这就表示全部都能正常使用了。

图片

写在后面

当然 Vercel 也不只是可以用来部署动静态网站或 API,也能搭一些国外工具的镜像,像 npm 之类的。

还有一种是,比如国外有一些很好用还免费的 API,你想用在小程序进行调用,但是在小程序后台填写这些 API 访问域名时无法添加,没有国内的备案信息。

这时候就可以用自己备案过的域名再 Vercel 中搭建一个中转,小程序请求自己的域名,而部署的程序请求别人的地址,更多玩法待后续更新了……

Snipaste_2024-07-31_14-08-07

  • ✇ZERO开发
  • 零成本加速 “个人图床服务”北桥苏
    前言上次简单分享了一下通过 Github Pages 方式搭建图床,但是国内对 github 资源的加载普遍不太稳定,多数情况下很慢甚至打不开。而这次我要推荐两个解决方法,一种是助力方案,使用 CDN 加速;另一种是代替方案,换成真正的图床或其他托管服务(先卖个关子)。方案一方案一提供助力,github 上的仓库和资源保持不变,只需要对其进行 CDN 加速就可以了。那么,好用的 jsDelivr 就上场了,这是一个免费、开源的加速 CDN 公共服务,托管了许多大大小小的项目,可加速访问托管的项目目录或图片资源。并且他同时对 github、npm、wordpress 提供支持,无需安装或搭建什么就能使用,下面就简单介绍一下使用方法。前提是比如你已经创建了 github 仓库,这次无需开启 github pages,只要是一个 public 的仓库就可以。访问 github1https://cdn.jsdelivr.net/gh/用户名称/仓库名称@版本号/目录访问 npm1https://cdn.jsdelivr.net/npm/包名@版本号/目录访问 wordpress12345678
     

零成本加速 “个人图床服务”

作者 北桥苏
2024年12月6日 16:13

前言

上次简单分享了一下通过 Github Pages 方式搭建图床,但是国内对 github 资源的加载普遍不太稳定,多数情况下很慢甚至打不开。而这次我要推荐两个解决方法,一种是助力方案,使用 CDN 加速;另一种是代替方案,换成真正的图床或其他托管服务(先卖个关子)。

img

方案一

方案一提供助力,github 上的仓库和资源保持不变,只需要对其进行 CDN 加速就可以了。那么,好用的 jsDelivr 就上场了,这是一个免费、开源的加速 CDN 公共服务,托管了许多大大小小的项目,可加速访问托管的项目目录或图片资源。

并且他同时对 github、npm、wordpress 提供支持,无需安装或搭建什么就能使用,下面就简单介绍一下使用方法。前提是比如你已经创建了 github 仓库,这次无需开启 github pages,只要是一个 public 的仓库就可以

img

访问 github

1
https://cdn.jsdelivr.net/gh/用户名称/仓库名称@版本号/目录

img

访问 npm

1
https://cdn.jsdelivr.net/npm/包名@版本号/目录

访问 wordpress

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 加载任何插件从WordPress.org插件SVN repo

https://cdn.jsdelivr.net/wp/plugins/project/tags/version/file

// 加载精确版本

https://cdn.jsdelivr.net/wp/plugins/wp-slimstat/tags/4.6.5/wp-slimstat.js


// 加载最新版本

// 你不应该在生产中使用这个

https://cdn.jsdelivr.net/wp/plugins/wp-slimstat/trunk/wp-slimstat.js


// 从WordPress.org的主题SVN repo加载任何主题

https://cdn.jsdelivr.net/wp/themes/project/version/file


// 加载精确版本

https://cdn.jsdelivr.net/wp/themes/twenty-eightteen/1.7/assets/js/html5.js

方案二

方案二是替代方法,就是找其他免费的做图床服务的网站或平台。但是以我自己体验过的几个做图床的平台,个人感觉还是很不好。比如他们可能是出于监管或业务原因,对图片内容做了识别,稍微有点敏感的或者是有二维码的都无法上传,而且有的对单位时间内上传个数做了限制等等。

毕竟是人家免费提供的图床服务,每天的流量消耗也很大,都要生存,所以限制之类的也很正常。那用付费的图床服务不就行了吗,这当然也是很不错的,但是我这里写的是零成本,所以就把目光转移到了其他提供托管服务的平台

没错就用国内的 Gitee,图片和视频放上去绝对比在 Github 上访问要稳定,而且使用方法也是一样。创建一个 public 仓库,通过 git 工具提交后,参考我下面的访问链接就能使用了

1
https://gitee.com/gaoxingqufuhchao/bqs-toolsbox-uniapp/raw/master/static/images/componentBg.png

img

写在后面

关于零成本可能要做成一个系列了,因为作为独立开发者,在自己的产品还没有经过市场检验,降低成本绝对是首选。尽管开发方面不用支出,但是面向 C 端至少要有个云服务器和数据库吧,需要数据炼丹总得要部署个爬虫吧,现在都进入 AI 时代了,给产品加上 AI 功能也得要吧。

这些其实都可以通过 Github 和零零散散的小众平台来实现零成本,比如用某云文档做数据库,Github 来定时跑爬虫,某平台的 GPTs 也提供了带有限制的 API 服务。别看人家平台的 api 每天就 1000 次的调用限制,要知道很多情况下,自己刚做的小程序和什么应用每天有几百的访问就很不错了,所以能用一些免费 api 来给自己应用增加有用性就先用着,量起来了可以选择付费或自研。

那么,后面我再慢慢分享怎么零成本玩上面我提到的几个东西吧。

img

  • ✇ZERO开发
  • 零成本搭建个人图床服务器北桥苏
    前言图床服务器是一种用于存储和管理图片的服务器,可以给我们提供将图片上传后能外部访问浏览的服务。这样我们在写文章时插入的说明图片,就可以集中放到图床里,既方便多平台文章发布,又能统一管理和备份。当然下面通过在GitHub上搭建的图床,不光不用成本,而且还能上传视频或音乐。操作方法和以前在GitHub上搭建静态博客类似,但是中间会多一些一些工具介绍和技巧。流程创建仓库设置仓库连接仓库应用Typora创建仓库创建仓库和平时的代码托管一样,添加一个public权限仓库,用默认的main分支。当然也可以提前创建一个目录,但是根目录最好有一个index.html。设置仓库设置仓库主要是添加提交Token,和配置GitHub Pages参数。而这两小步的设置,在前面文章 “Hexo博客搭建” 有比较详细介绍,所以这里就稍微文字带过了。Token生成登陆GitHub -> Settings -> Developer settings -> Personal access tokens -> Tokens(classic),然后点击 “Generate new token”,填
     

零成本搭建个人图床服务器

作者 北桥苏
2024年12月5日 16:13

前言

图床服务器是一种用于存储和管理图片的服务器,可以给我们提供将图片上传后能外部访问浏览的服务。这样我们在写文章时插入的说明图片,就可以集中放到图床里,既方便多平台文章发布,又能统一管理和备份。

当然下面通过在GitHub上搭建的图床,不光不用成本,而且还能上传视频或音乐。操作方法和以前在GitHub上搭建静态博客类似,但是中间会多一些一些工具介绍和技巧。

流程

  • 创建仓库
  • 设置仓库
  • 连接仓库
  • 应用Typora

创建仓库

创建仓库和平时的代码托管一样,添加一个public权限仓库,用默认的main分支。当然也可以提前创建一个目录,但是根目录最好有一个index.html。

image-20240608131742136

设置仓库

设置仓库主要是添加提交Token,和配置GitHub Pages参数。而这两小步的设置,在前面文章 “Hexo博客搭建” 有比较详细介绍,所以这里就稍微文字带过了。

Token生成

登陆GitHub -> Settings -> Developer settings -> Personal access tokens -> Tokens(classic),然后点击 “Generate new token”,填写备注和过期时间,权限主要勾选 “repo”、“workflow”、“user”。最后生成 “ghp_” 前缀的字符串就是Token了,复制并保存下来。

GitHub Pages配置

进入仓库页 -> Settings -> Pages,设置Branch,指定仓库的分支和分支根目录,Source选择 “Deploy from a branch”,最后刷新或者重新进入,把访问链接地址复制保存下来。

image-20240608134712059

连接仓库

连接可以除了API方式,也可以用第三方的工具,比如 “PicGo”。工具位置自行搜索哈,下面以他为例,演示工具的连接配置、文件上传和访问测试。

连接配置

找到 “图床设置” -> “GitHub”,下面主要填写仓库名(需带上账户名),分支名(默认main即可),Token(上面生成保存下来的),存储路径(后带斜杠)可以填写已存在,如果不存在则在仓库根目录下新建。

image-20240608140418396

文件上传

文件格式除了下面指定的如Markdown、HTML、URL外,还能上传图片音乐视频等(亲测有效)。点击 “上传区”,将文件直接拖动到该窗口,提示上传成功后,进入GitHub仓库下查看是否存在。

image-20240608141234199

访问测试

访问就是能将仓库里的图片或视频以外链的方式展示,就像将文件放在云平台的存储桶一样。将前面GitHub Pages开启的链接复制下来,然后拼接存储路径和文件名就可以访问了。

image-20240608144141950

image-20240608144227453

应用Typora

Typora通过PicGo软件自动上传图片到GitHub仓库中。打开Typora的文件 ->偏好设置 -> 图像 -> 上传图片 -> 配置PicGo路径,然后指定一下PicGo的安装位置。

image-20240608145919367

开始使用

可以点击 “验证图片上传选项”,验证成功就代表已经将Typora的图标上传到仓库,也可以直接将图片复制到当前md文档位置。

image-20240608150003173

1
![image-20240608145607117](https://raw.githubusercontent.com/z11r00/zd_image_bed/main/img/image-20240608145607117.png)

上传成功后会将返回一个如上面的远程链接,并且无法打开和显示,这是就要在PicGo工具的图床设置中。将自己GitHUb上的域名设定为自定义域名,格式 “域名/仓库名”, 在Typora上传图片后重启就可展示了。

image-20240612104856943

  • ✇ZERO开发
  • 零成本搭建个人 APP 和小程序后台北桥苏
    前言前面也说了,通过 GitHub Pages+GitHub Actions 只是解决了动态数据展示,但是要零成本得完成将用户信息存储下来,并实现数据交互呢?我开始是想用云文档,种种原因,我还是希望有个自己能二次修改的后台,于是就选择了 Vercel+Railway 方式。虽然网上也有很多人介绍这俩平台的玩法,但都是 2024 年以前的文章,有些平台最新的修改,和自己踩到的坑而别人没提到的细节,我还是想记录一下。坑点域名已经解析成功了,但是一直无法访问 Vercel 上的页面。vercel-php 版本和 Vercel 上的 NodeJs 版本冲突,和一些配置问题。代码提交推送后,Vercel 没有完成自动部署等等。准备Vercel: 略过详细介绍,暂且把他理解成云服务器,入门配置免费,需要注册登陆。 Railway: 同样略过详细介绍,暂且把他理解成云数据库,几乎免费,需要注册登陆。 GitHub: 先创建存放程序的仓库,也几乎完全免费,需要注册登陆。Typecho: 博客程序 ,其他语言的像 Flask 也行,开源免费,下载或自行编写。Vercel 配置进入 vercel 官网
     

零成本搭建个人 APP 和小程序后台

作者 北桥苏
2024年8月22日 16:13

前言

前面也说了,通过 GitHub Pages+GitHub Actions 只是解决了动态数据展示,但是要零成本得完成将用户信息存储下来,并实现数据交互呢?

我开始是想用云文档,种种原因,我还是希望有个自己能二次修改的后台,于是就选择了 Vercel+Railway 方式。

虽然网上也有很多人介绍这俩平台的玩法,但都是 2024 年以前的文章,有些平台最新的修改,和自己踩到的坑而别人没提到的细节,我还是想记录一下。

图片

坑点

  1. 域名已经解析成功了,但是一直无法访问 Vercel 上的页面。
  2. vercel-php 版本和 Vercel 上的 NodeJs 版本冲突,和一些配置问题。
  3. 代码提交推送后,Vercel 没有完成自动部署等等。

准备

  • Vercel: 略过详细介绍,暂且把他理解成云服务器,入门配置免费,需要注册登陆。
  • Railway: 同样略过详细介绍,暂且把他理解成云数据库,几乎免费,需要注册登陆。
  • GitHub: 先创建存放程序的仓库,也几乎完全免费,需要注册登陆。
  • Typecho: 博客程序 ,其他语言的像 Flask 也行,开源免费,下载或自行编写。

Vercel 配置

进入 vercel 官网,推荐使用 GitHub 账号登陆,配置主要完成仓库的代码导入,域名解析绑定,项目部署和相关参数设置。

代码导入

登陆后点击 “Import Git Repository”,然后选择仓库安装并设置权限,接着是 Configure Project,Congratulations 都可以直接下一步进入到 Production Deployment,可参考下图。

图片

图片

图片

图片

域名解析绑定

进入到 “Production Deployment” 时,我们可以看到项目已经创建成功。不但可以看到 source 源仓库分支和提交信息,还能看到 Domains 分配的域名,但是该域名被墙无法访问。

图片

点击上面的 “Domains” 按钮(在 Visit 左边),输入即将要解析过来的域名,系统会展示需要用 CNAM 类型被解析的域名,复制该 value 去到自己的域名服务商控制台,添加一条 CNAME 解析记录。

图片

图片

如果说服务商那边解析成功了,并且 Vercel 平台也显示域名验证成功,也就是前面提到的坑点一。这种一般是 DNS 缓存原因,可以换一台电脑或用手机访问测试,如果能就等待一下,直到能 ping 通。

还有 Vercel 会自动办法 SSL 证书,所以后面只需要留意日期就可以,下图我暂时放了一个 index.html 页面,动态程序演示要放到 Railway 后。

图片

图片

Railway 配置

进入 Railway 官网,同样推荐 GitHub 账号登陆,进来后选择 “MySQL” 类型,直接按默认后进入到 production,最主要的是我们需要分配给他的 Host,账号和密码,数据库名等等。

需要注意的是 Railway 每个月只有 5 刀的限额,需要提前备份数据库。超过限额后没有备份的数据就没了,需要删掉账户重新注册才可以。

图片

打开 Data,选择 “Connect” -> “Public Network”,Connection URL 就是该产品对外的连接 Host,用户密码,端口等信息。只需要复制下来,用于在程序中连接配置,Navicat for MySQL 图形化工具连接失败,我试过了。

图片

后端程序部署

以下简单介绍 php 和 python 两种语言的 hello world,和有数据库连接的博客程序,第一步是后端入口文件都不能放在项目的根目录下,放在新建文件夹的 api 中,并添加 vercel.json(用于配置路由和分配内存等信息)。

图片

Python 的 Hello World

新建 vercel.json 文件,和用于打印的 py 文件,最后访问自定义的域名。

1
2
3
4
5
{
"rewrites": [
{ "source": "/(.*)", "destination": "/api/index" }
]
}

PHP 的 Hello World

需要注意的是部署 php 项目要用到 vercel-php,而 vercel-php 又与 NodeJs 版本有一定对应关系。目前 2024 年 8 月 vercel 平台默认 Node 版本是 20.x,我下面演示的是 vercel-php@0.6.0,所以再部署前需要先将 Node 版本切换为 18.x,如下图。(以下有两种情况的报错都要 node 和 vercel-php 版本相关)

1
2
3
4
5
部署后报错合集

1. PHP Built-In Server HTTP error: Error: connect ECONNREFUSED 127.0.0.1:8000

2. The following Serverless Functions contain an invalid "runtime": - api/index (nodejs18.x)

图片

Typecho 安装

从官网下载源码后,找到 config.inc.php 文件,将数据库的参数修改为 Railway 复制过来的配置。

图片

然后通过 Git 提交代码到仓库,如果发现没有部署成功,可以进入 vercel 平台的 Deployments 查看部署记录,有报错的根据信息修改。

图片

提交并成功部署后,输入自定义域名,并带上 install.php 进行安装,然后用 pdo 方式安装数据库,上面的 railway 参数就再输入一遍。

图片

安装成功后,可以到 Railway 查看到新增的表格,这就表示全部都能正常使用了。

图片

写在后面

当然 Vercel 也不只是可以用来部署动静态网站或 API,也能搭一些国外工具的镜像,像 npm 之类的。

还有一种是,比如国外有一些很好用还免费的 API,你想用在小程序进行调用,但是在小程序后台填写这些 API 访问域名时无法添加,没有国内的备案信息。

这时候就可以用自己备案过的域名再 Vercel 中搭建一个中转,小程序请求自己的域名,而部署的程序请求别人的地址,更多玩法待后续更新了……

Snipaste_2024-07-31_14-08-07

  • ✇ZERO开发
  • 零成本 API 服务搭建,用 GitHub Actions 自动爬取文章北桥苏
    前言本着将成本降到最低,我目前做的应用或小程序都是单机的,也就是不用请求接口,只要一上架就没有任何支出。但是写死的数据毕竟有限,应用的内容单一无法紧跟时事热点,每次打开一个样,自然就没有留存。遇到有错字啥还要更新版本,那有没有方法既能丰富应用内容,又不用增加成本呢?既要又要,当然也有,找网上提供的免费 API 接上去。但是这种有请求数限制,而且还和自己应用的业务不相关,那就只能自己弄接口了。既然可以在 GitHub 上搭静态博客,那整一个静态 API (json 文件),时不时地更新或提交新的 json 文件上去,在 C 端应用上不也看起来像是动态的了。所以下面就实践一下如何在 GitHub 上搭建 API 服务,以及如何自动化更新数据(部署爬虫)?API 服务搭建方法和之前在 GitHub 上搭建 Hexo 类似,就是给仓库开启 GitHub Pages,可以自行绑定域名,也可以用之前主仓设置的域名后面带当前仓库名访问。当前域名要备案过了,然后用访问资源的方式能访问到 json 文件 (xml、csv 等) 就可以了。定时爬虫部署要实现自动化更新数据,那就要定时手动上传和直接爬虫爬取
     

零成本 API 服务搭建,用 GitHub Actions 自动爬取文章

作者 北桥苏
2024年8月16日 16:13

前言

本着将成本降到最低,我目前做的应用或小程序都是单机的,也就是不用请求接口,只要一上架就没有任何支出。但是写死的数据毕竟有限,应用的内容单一无法紧跟时事热点,每次打开一个样,自然就没有留存。遇到有错字啥还要更新版本,那有没有方法既能丰富应用内容,又不用增加成本呢?

既要又要,当然也有,找网上提供的免费 API 接上去。但是这种有请求数限制,而且还和自己应用的业务不相关,那就只能自己弄接口了。

既然可以在 GitHub 上搭静态博客,那整一个静态 API (json 文件),时不时地更新或提交新的 json 文件上去,在 C 端应用上不也看起来像是动态的了。所以下面就实践一下如何在 GitHub 上搭建 API 服务,以及如何自动化更新数据(部署爬虫)?

图片

API 服务搭建

方法和之前在 GitHub 上搭建 Hexo 类似,就是给仓库开启 GitHub Pages,可以自行绑定域名,也可以用之前主仓设置的域名后面带当前仓库名访问。当前域名要备案过了,然后用访问资源的方式能访问到 json 文件 (xml、csv 等) 就可以了。
图片

定时爬虫部署

要实现自动化更新数据,那就要定时手动上传和直接爬虫爬取,可以通过 GitHub Actions 工作流的方式实现,下面第一次使用的方式演示如何创建并运行 workflow。

创建推送 TOKEN

因为生成了 json 文件需要自动推送到仓库,为了不用输入账号密码并使用 PAT,这个和之前 Hexo 搭建时获取的一样。settings->developer settings->github apps->personal access tokens->tokens (classic),然后选择 “Generate new token (classic)”。

TOKEN 权限设置

设置名称,有效时间,勾选权限,主要的把 repo、workflow、user、write:discussion 以及 admin 开头的全勾上,如果不想选都选上也可以。最后创建后就会显示 token 值,记得把那个 ghp 开头的字符串复制下来,不然后面就看不到了。这里再说一下 PAT 下的 Fine-grained tokens 和 Tokens (classic) 的区别,上面比 Tokens (classic) 权限控制更精细,安全性更高,而且无法设置不能失效的 Token。
图片

测试 TOKEN

是否可用用 git 命令运行,换成自己的 token 和仓库报错了则说明该 TOKEN 无效

1
git push https://x-access-token:换成你的TOKEN@github.com/z11r00/你的仓库.git HEAD

创建工作流

打开仓库后,点击 Actions,然后点击 New workflow,set up a workflow yourself 后提交。git 拉取后会在项目中生成一个.github 文件夹,依次点进去是刚才创建的工作流 yml 文件。
图片

图片

Yml 配置说明

1
2
3
4
5
6
name:工作流名称,展示在用于表示工作流。
on:触发事件,schedule 定时 | push 推送 | pull_request pr 请求,定时任务下有一个 cron 的五个 * 分别是分 时 日 月 星期(, 分割字段多值 - 定义范围 / 指定间隔频率)。
workflow_dispatch: 是否允许在 github actions 操作选项卡中手动操作,默认是可以。
jobs:任务执行的定义。
runs-on: 用于任务执行的运行器,可以说是操作系统,其他的还有 windows 等,具体参考文档,下面会贴出。
steps: 步骤,工作流依次执行的步骤,每个都有一个名字和具体的运行指令,可以使用 actions 包 (github 提供的集成程序,比如用于检出仓库代码的,python 环境的等等)。

图片

爬虫工作流

以下定义一个每天八点十分(不一定准时),先是用 TOKEN 检出仓库中的所有代码,然后设置 python 环境后安装指定依赖,运行 script 目录下的 ArticleSpider.py 脚本,最后将脚本里生成的 json 文件提交并推送到仓库。

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
# 工作流名称
name: article_spider
# 事件:schedule 定时 | push 推送 | pull_request pr请求
on:
schedule:
# 分 时 日 月 星期 (*每次都 ,分割字段多值 -定义范围 /指定间隔频率)
- cron: '10 0 * * *' # 每日8:10,时间点执行任务,注意时区(UTC, 0+8)

# 是否可在github操作选项卡手动运行
workflow_dispatch:

# 定义任务
jobs:
build:
# 任务运行器(切换可参考文档)
runs-on: ubuntu-latest

# 步骤
steps:
# 使用到的actions包(用于克隆当前仓库的所有代码)
- name: Checkout repository
uses: actions/checkout@v3
with:
ref: main
token: ${{ secrets.PUSH_TOKEN }} # 自定义的个人推送TOKEN
- name: Set up Python
uses: actions/setup-python@v2
with:
python-version: '3.x'
- name: Install dependencies
run: |
python -m pip install --upgrade pip
pip install requests
pip install lxml
- name: execute py script
env:
FM_USERNAME: ${{ secrets.USERNAME }}
run: |
python script/ArticleSpider.py
- name: 列出所有文件
run: |
ls -l
- name: Commit changes
run: |
git config --local user.email "2652364582@qq.com"
git config --local user.name "bqs"
git add .
git commit -m "Add changes" || echo "No changes to commit"
git push origin main

ArticleSpider.py

脚本因为对方站点是一个前后端分离的项目,页面的列表和详情都是用异步请求的方式。所以这种抓取就比较好办,写一个 while 循环,页码不断累加的请求接口,判断有超过某时间点的文章则跳出循环。在循环中将数据保存到指定的目录下的 json 文件中,当然也可以自己调整数据,如果要分页就按固定条数分文件。
图片

图片

图片

运行效果

虽然是定时的,但也可以去 GitHub 控制台手动运行。打开 Actions,选择工作流名字进去,最后 Run workflow 就等待执行了。详细也可以看到脚本里打印出的日志,执行完毕再回到仓库查看是否有 json 文件生成。
图片
图片

写在后面

以上只是演示,如果真要弄自己的 API 还是得对爬取的数据做一下处理,拓展一下是不是还可以用这种方式,实现一个带后台管理的资源 “动态网站”。但是应用也不光只有展示,还有提交部分,所以要想零成本实现将用户数据存储下来就要用到另一些方法了,最后 GitHub Actions 用法也远不止于此……

安利

QQ小程序:**实用工具箱**

img

  • ✇ZERO开发
  • 零成本加速 “个人图床服务”北桥苏
    前言上次简单分享了一下通过 Github Pages 方式搭建图床,但是国内对 github 资源的加载普遍不太稳定,多数情况下很慢甚至打不开。而这次我要推荐两个解决方法,一种是助力方案,使用 CDN 加速;另一种是代替方案,换成真正的图床或其他托管服务(先卖个关子)。方案一方案一提供助力,github 上的仓库和资源保持不变,只需要对其进行 CDN 加速就可以了。那么,好用的 jsDelivr 就上场了,这是一个免费、开源的加速 CDN 公共服务,托管了许多大大小小的项目,可加速访问托管的项目目录或图片资源。并且他同时对 github、npm、wordpress 提供支持,无需安装或搭建什么就能使用,下面就简单介绍一下使用方法。前提是比如你已经创建了 github 仓库,这次无需开启 github pages,只要是一个 public 的仓库就可以。访问 github1https://cdn.jsdelivr.net/gh/用户名称/仓库名称@版本号/目录访问 npm1https://cdn.jsdelivr.net/npm/包名@版本号/目录访问 wordpress12345678
     

零成本加速 “个人图床服务”

作者 北桥苏
2024年8月1日 16:13

前言

上次简单分享了一下通过 Github Pages 方式搭建图床,但是国内对 github 资源的加载普遍不太稳定,多数情况下很慢甚至打不开。而这次我要推荐两个解决方法,一种是助力方案,使用 CDN 加速;另一种是代替方案,换成真正的图床或其他托管服务(先卖个关子)。

img

方案一

方案一提供助力,github 上的仓库和资源保持不变,只需要对其进行 CDN 加速就可以了。那么,好用的 jsDelivr 就上场了,这是一个免费、开源的加速 CDN 公共服务,托管了许多大大小小的项目,可加速访问托管的项目目录或图片资源。

并且他同时对 github、npm、wordpress 提供支持,无需安装或搭建什么就能使用,下面就简单介绍一下使用方法。前提是比如你已经创建了 github 仓库,这次无需开启 github pages,只要是一个 public 的仓库就可以

img

访问 github

1
https://cdn.jsdelivr.net/gh/用户名称/仓库名称@版本号/目录

img

访问 npm

1
https://cdn.jsdelivr.net/npm/包名@版本号/目录

访问 wordpress

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 加载任何插件从WordPress.org插件SVN repo

https://cdn.jsdelivr.net/wp/plugins/project/tags/version/file

// 加载精确版本

https://cdn.jsdelivr.net/wp/plugins/wp-slimstat/tags/4.6.5/wp-slimstat.js


// 加载最新版本

// 你不应该在生产中使用这个

https://cdn.jsdelivr.net/wp/plugins/wp-slimstat/trunk/wp-slimstat.js


// 从WordPress.org的主题SVN repo加载任何主题

https://cdn.jsdelivr.net/wp/themes/project/version/file


// 加载精确版本

https://cdn.jsdelivr.net/wp/themes/twenty-eightteen/1.7/assets/js/html5.js

方案二

方案二是替代方法,就是找其他免费的做图床服务的网站或平台。但是以我自己体验过的几个做图床的平台,个人感觉还是很不好。比如他们可能是出于监管或业务原因,对图片内容做了识别,稍微有点敏感的或者是有二维码的都无法上传,而且有的对单位时间内上传个数做了限制等等。

毕竟是人家免费提供的图床服务,每天的流量消耗也很大,都要生存,所以限制之类的也很正常。那用付费的图床服务不就行了吗,这当然也是很不错的,但是我这里写的是零成本,所以就把目光转移到了其他提供托管服务的平台

没错就用国内的 Gitee,图片和视频放上去绝对比在 Github 上访问要稳定,而且使用方法也是一样。创建一个 public 仓库,通过 git 工具提交后,参考我下面的访问链接就能使用了

1
https://gitee.com/gaoxingqufuhchao/bqs-toolsbox-uniapp/raw/master/static/images/componentBg.png

img

写在后面

关于零成本可能要做成一个系列了,因为作为独立开发者,在自己的产品还没有经过市场检验,降低成本绝对是首选。尽管开发方面不用支出,但是面向 C 端至少要有个云服务器和数据库吧,需要数据炼丹总得要部署个爬虫吧,现在都进入 AI 时代了,给产品加上 AI 功能也得要吧。

这些其实都可以通过 Github 和零零散散的小众平台来实现零成本,比如用某云文档做数据库,Github 来定时跑爬虫,某平台的 GPTs 也提供了带有限制的 API 服务。别看人家平台的 api 每天就 1000 次的调用限制,要知道很多情况下,自己刚做的小程序和什么应用每天有几百的访问就很不错了,所以能用一些免费 api 来给自己应用增加有用性就先用着,量起来了可以选择付费或自研。

那么,后面我再慢慢分享怎么零成本玩上面我提到的几个东西吧。

img

  • ✇ZERO开发
  • 零成本搭建个人图床服务器北桥苏
    前言图床服务器是一种用于存储和管理图片的服务器,可以给我们提供将图片上传后能外部访问浏览的服务。这样我们在写文章时插入的说明图片,就可以集中放到图床里,既方便多平台文章发布,又能统一管理和备份。当然下面通过在GitHub上搭建的图床,不光不用成本,而且还能上传视频或音乐。操作方法和以前在GitHub上搭建静态博客类似,但是中间会多一些一些工具介绍和技巧。流程创建仓库设置仓库连接仓库应用Typora创建仓库创建仓库和平时的代码托管一样,添加一个public权限仓库,用默认的main分支。当然也可以提前创建一个目录,但是根目录最好有一个index.html。设置仓库设置仓库主要是添加提交Token,和配置GitHub Pages参数。而这两小步的设置,在前面文章 “Hexo博客搭建” 有比较详细介绍,所以这里就稍微文字带过了。Token生成登陆GitHub -> Settings -> Developer settings -> Personal access tokens -> Tokens(classic),然后点击 “Generate new token”,填
     

零成本搭建个人图床服务器

作者 北桥苏
2024年6月2日 16:13

前言

图床服务器是一种用于存储和管理图片的服务器,可以给我们提供将图片上传后能外部访问浏览的服务。这样我们在写文章时插入的说明图片,就可以集中放到图床里,既方便多平台文章发布,又能统一管理和备份。

当然下面通过在GitHub上搭建的图床,不光不用成本,而且还能上传视频或音乐。操作方法和以前在GitHub上搭建静态博客类似,但是中间会多一些一些工具介绍和技巧。

流程

  • 创建仓库
  • 设置仓库
  • 连接仓库
  • 应用Typora

创建仓库

创建仓库和平时的代码托管一样,添加一个public权限仓库,用默认的main分支。当然也可以提前创建一个目录,但是根目录最好有一个index.html。

image-20240608131742136

设置仓库

设置仓库主要是添加提交Token,和配置GitHub Pages参数。而这两小步的设置,在前面文章 “Hexo博客搭建” 有比较详细介绍,所以这里就稍微文字带过了。

Token生成

登陆GitHub -> Settings -> Developer settings -> Personal access tokens -> Tokens(classic),然后点击 “Generate new token”,填写备注和过期时间,权限主要勾选 “repo”、“workflow”、“user”。最后生成 “ghp_” 前缀的字符串就是Token了,复制并保存下来。

GitHub Pages配置

进入仓库页 -> Settings -> Pages,设置Branch,指定仓库的分支和分支根目录,Source选择 “Deploy from a branch”,最后刷新或者重新进入,把访问链接地址复制保存下来。

image-20240608134712059

连接仓库

连接可以除了API方式,也可以用第三方的工具,比如 “PicGo”。工具位置自行搜索哈,下面以他为例,演示工具的连接配置、文件上传和访问测试。

连接配置

找到 “图床设置” -> “GitHub”,下面主要填写仓库名(需带上账户名),分支名(默认main即可),Token(上面生成保存下来的),存储路径(后带斜杠)可以填写已存在,如果不存在则在仓库根目录下新建。

image-20240608140418396

文件上传

文件格式除了下面指定的如Markdown、HTML、URL外,还能上传图片音乐视频等(亲测有效)。点击 “上传区”,将文件直接拖动到该窗口,提示上传成功后,进入GitHub仓库下查看是否存在。

image-20240608141234199

访问测试

访问就是能将仓库里的图片或视频以外链的方式展示,就像将文件放在云平台的存储桶一样。将前面GitHub Pages开启的链接复制下来,然后拼接存储路径和文件名就可以访问了。

image-20240608144141950

image-20240608144227453

应用Typora

Typora通过PicGo软件自动上传图片到GitHub仓库中。打开Typora的文件 ->偏好设置 -> 图像 -> 上传图片 -> 配置PicGo路径,然后指定一下PicGo的安装位置。

image-20240608145919367

开始使用

可以点击 “验证图片上传选项”,验证成功就代表已经将Typora的图标上传到仓库,也可以直接将图片复制到当前md文档位置。

image-20240608150003173

1
![image-20240608145607117](https://raw.githubusercontent.com/z11r00/zd_image_bed/main/img/image-20240608145607117.png)

上传成功后会将返回一个如上面的远程链接,并且无法打开和显示,这是就要在PicGo工具的图床设置中。将自己GitHUb上的域名设定为自定义域名,格式 “域名/仓库名”, 在Typora上传图片后重启就可展示了。

image-20240612104856943

❌
❌