Gitee Pages停了别慌！手把手教你用Vercel免费托管Jekyll博客（附国内访问优化）

最新推荐文章于 2026-06-25 10:27:32 发布

原创最新推荐文章于 2026-06-25 10:27:32 发布 · 552 阅读

8 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#Jekyll #Vercel #博客托管 #CDN优化

从Gitee Pages迁移到Vercel：Jekyll博客的免费托管与国内访问优化方案

当Gitee Pages服务突然停止，许多依赖该平台托管静态网站的用户陷入了困境。对于使用Jekyll构建个人博客或项目文档的开发者来说，寻找一个既免费又稳定的替代方案成为当务之急。本文将详细介绍如何将Jekyll博客从Gitee无缝迁移到Vercel平台，并针对国内访问速度问题提供切实可行的优化方案。

1. 为什么选择Vercel作为Gitee Pages的替代品

在众多静态网站托管平台中，Vercel凭借其出色的性能、易用性和免费套餐脱颖而出。与Gitee Pages相比，Vercel提供了更多专业级功能：

全球CDN加速 ：Vercel拥有遍布全球的边缘节点，确保内容快速分发
自动构建部署 ：与Git仓库无缝集成，代码提交后自动触发构建流程
自定义域名支持 ：免费提供SSL证书，支持HTTPS加密连接
Serverless函数 ：可扩展为动态网站，支持API路由和边缘计算

性能对比表 ：

特性	Vercel	Gitee Pages	GitHub Pages
国内访问速度	中等（需优化）	优秀	较差
构建时间限制	45分钟/月	无明确限制	10分钟/次
带宽限制	100GB/月	无明确限制	100GB/月
自定义域名HTTPS	自动配置	需手动配置	自动配置

提示：虽然Vercel在国内没有直接节点，但通过后续介绍的优化方法，可以显著提升访问速度。

2. 迁移准备：Jekyll项目适配Vercel环境

在开始迁移前，需要确保你的Jekyll项目符合Vercel的部署要求。以下是关键准备步骤：

2.1 检查并更新Gemfile

Vercel使用Ruby 2.7.x环境构建Jekyll项目，建议在本地测试兼容性：

# Gemfile示例
source "https://rubygems.org"
gem "jekyll", "~> 4.2"
gem "webrick"  # Ruby 3.0+需要显式添加

执行以下命令更新依赖：

bundle update
bundle install

2.2 添加vercel.json配置文件

在项目根目录创建 vercel.json ，配置构建和输出设置：

{
  "builds": [
    {
      "src": "/*",
      "use": "@vercel/static",
      "config": { "distDir": "_site" }
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "/$1",
      "headers": { "Cache-Control": "s-maxage=86400" }
    }
  ]
}

2.3 处理特殊插件和依赖

Vercel的构建环境可能不支持某些本地插件，解决方案包括：

将插件代码直接包含在项目中（如放在 _plugins 目录）
用等效的Liquid模板替代插件功能
通过GitHub Actions预先构建再部署到Vercel

3. 分步迁移：从Gitee到Vercel的完整流程

3.1 创建Vercel账户并导入项目

访问 Vercel官网注册账号（推荐使用GitHub账号关联）
在控制台点击"Import Project"按钮
选择你的Jekyll项目仓库（GitHub/GitLab/Bitbucket）
保持默认配置，直接点击"Deploy"

3.2 配置自动构建部署

Vercel会自动检测项目类型并配置构建命令。对于Jekyll项目，确保构建设置如下：

Build Command : bundle exec jekyll build
Output Directory : _site
Environment Variables : 无特殊要求

注意：如果使用自定义插件，可能需要在环境变量中添加 JEKYLL_ENV=production

3.3 自定义域名绑定

在Vercel项目的"Domains"设置中添加你的域名
按照提示在DNS服务商处添加CNAME记录
等待SSL证书自动签发（通常几分钟内完成）

国内访问优化技巧 ：

使用国内DNS解析服务（如DNSPod）
开启CDN加速（后续章节详细介绍）
配置域名备案（非必须但推荐）

4. 国内访问速度优化方案

虽然Vercel的全球网络性能优异，但国内直连速度可能不尽如人意。以下是经过验证的优化方案：

4.1 使用国内CDN加速

注册腾讯云或阿里云CDN服务
添加加速域名（与Vercel绑定的域名相同）
配置回源地址为Vercel提供的域名（如 xxx.vercel.app ）
开启HTTPS和HTTP/2支持

CDN配置关键参数 ：

参数	推荐值	说明
回源协议	HTTPS	确保数据传输安全
缓存策略	遵循源站	保留Vercel的缓存控制头
节点缓存有效期	7天（静态资源）	减少回源频率
智能压缩	开启	减小传输体积

4.2 静态资源优化

本地化第三方资源 ：
- 下载主题引用的JS/CSS/字体文件
- 托管到项目仓库或国内对象存储（如COS/OSS）

图片优化 ：

<!-- 在模板中使用WebP格式 -->
{% picture my-image.jpg --img class="lazyload" --alt "示例图片" %}

延迟加载 ：

<img src="placeholder.jpg" data-src="actual-image.jpg" class="lazyload">
<script>
  document.addEventListener("DOMContentLoaded", function() {
    if("IntersectionObserver" in window) {
      const lazyImages = [].slice.call(document.querySelectorAll("img.lazyload"));
      let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
        entries.forEach(function(entry) {
          if(entry.isIntersecting) {
            let lazyImage = entry.target;
            lazyImage.src = lazyImage.dataset.src;
            lazyImageObserver.unobserve(lazyImage);
          }
        });
      });
      lazyImages.forEach(function(lazyImage) {
        lazyImageObserver.observe(lazyImage);
      });
    }
  });
</script>

4.3 使用边缘函数优化路由

Vercel的边缘函数可以用于智能路由和缓存控制：

// api/route-cache.js
export const config = {
  runtime: 'edge'
};

export default function handler(req) {
  const url = new URL(req.url);
  const response = await fetch(`https://your-domain.com${url.pathname}`, req);
  
  // 克隆响应以修改头信息
  const newResponse = new Response(response.body, response);
  
  // 设置缓存策略
  newResponse.headers.set('Cache-Control', 'public, max-age=86400');
  newResponse.headers.set('CDN-Cache-Control', 'max-age=31536000');
  
  return newResponse;
}