使用Vercel+PicX加速Github图床

672 字

3 分钟

使用Vercel+PicX加速Github图床

2025-07-14

教程

Github

/

Vercel

/

图床

/

PicX

众所周知，Github的访问速度在国内一直都是跌宕起伏，

而本博客原来使用的图床 Telegraph-Image(由 Cloudflare Pages驱动)也有众多缺点。

最重要的是，Cloudflare CDN在大陆中国移动的访问全部超时，导致移动用户无法看到图片资源。

在网上了解之后，发现Vercel的服务在绑定自定义域名之后在国内访问速度非常可以，

因此在这篇文章中，我将会记录下完整部署过程，也充作本人操作备份。

WARNING
使用Vercel加速，每月有100GB流量限制，大流量博客请勿使用。
你需要准备
1.一个Github账号
2.一个Vercel账号
3.域名

1.部署PicX图床#

打开Github PicX项目 README文件，按照要求部署图床。#

你会发现一个Github存储库已创建。

打开PicX,进行授权操作#

随后你可以进行图片上传操作。

2.修改图床存储库#

打开你的Github picx-images-hosting 存储库

在根目录新建 index.html 文件，便于Vercel识别为静态网站。

这是我的 index.html 文件，显示为一个时钟。

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
<meta charset="UTF-8">
5
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6
<title>实时时钟</title>
7
<style>
8
  body {
9
    display: flex;
10
    justify-content: center;
11
    align-items: center;
12
    height: 100vh;
13
    margin: 0;
14
    font-family: Arial, sans-serif;
15
    background-color: #f5f5f5;
16
  }
17
  #clock {
18
    font-size: 48px; /* 增大字体大小 */
19
    font-weight: bold;
20
    color: #333;
21
  }
22
</style>
23
<script>
24
function updateTime() {
25
    var now = new Date(); // 获取当前时间
26
    var hours = now.getHours(); // 小时
27
    var minutes = now.getMinutes(); // 分钟
28
    var seconds = now.getSeconds(); // 秒数
29
    var formattedTime = hours + ':' +
30
                        (minutes < 10 ? '0' : '') + minutes + ':' +
31
                        (seconds < 10 ? '0' : '') + seconds;
32
    document.getElementById('clock').textContent = formattedTime;
33
}
34
setInterval(updateTime, 1000); // 每1000毫秒（1秒）更新时间
35
</script>
36
</head>
37
<body onload="updateTime()">
38
<div id="clock"></div> <!-- 时间显示的位置 -->
39
</body>
40
</html>