1.Fork开源项目#

我个人推荐在Github上Fork项目，然后在Vercel上部署，这种方式便于后续更新项目代码，Fork仓库可以一键拉取项目作者更新内容，直接Vercel部署会自动创建私有仓库，失去与原作者项目的关联，不利于后续的项目代码更新和维护。

点击下方Github卡片进入开源项目仓库，点击右上角的Fork按钮，填写信息后点击确认即可Fork项目。如果想直接Vercel部署项目可以前往项目仓库的README文件点击Deploy按钮跳转部署页面即可

2.Vercel部署#

前往Vercel平台，根据流程选择Github Fork仓库，着手开始部署项目。

Vercel会自动识别项目为Next.js项目，如果识别错误需要手动修改，点击Deploy开始自动构建。

等待部署完成，预计3~5分钟左右，部署成功后点击Continue to Dashboard进入详情页面。

3.绑定域名#

前往部署好的项目设置页面绑定自己的域名，便于后续项目配置修改访问。

添加好绑定的域名后，根据Vercel的CNAME记录前往自己域名的解析设置，完成记录解析，各大运营商记录解析方法自行查询，在此不做赘述。

4.配置数据库+R2存储#

访问绑定好的域名，首次进入会跳转到项目配置界面，界面上显示x的项目代表当前项目未配置完成，需要进行配置。

接下来逐个进行配置，让我们开始！

1
[{
2
    "AllowedHeaders": ["*"],
3
    "AllowedMethods": [
4
      "GET",
5
      "PUT"
6
    ],
7
    "AllowedOrigins": [
8
       "http://localhost:3000",
9
       "https://{VERCEL_PROJECT_NAME}*.vercel.app",
10
       "{PRODUCTION_DOMAIN}"
11
    ]
12
}]

5.配置环境变量#

接下来将在Vercel项目设置页面进行环境变量的配置，根据项目要求和自定义内容注意添加。

每点击一次Save就会添加一个环境变量。

接下来根据下方教程内容逐一添加环境变量。注意，当你添加一个环境变量之后Vercel会提醒你重新部署，推荐全部添加完成后再进行重新部署，否则多次部署会造成大量资源浪费。

• AUTH_SECRET: 认证密钥，源自项目配置页面随机生成，访问绑定域名复制即可注意防止泄露

• ADMIN_EMAIL: 管理员账号，为邮箱格式，自行填写，用于访问后台
• ADMIN_PASSWORD: 管理员密码，自行填写，用于访问后台
• NEXT_PUBLIC_LOCALE: 项目语言，默认为en-us，推荐修改为zh-cn
• NEXT_PUBLIC_DOMAIN: 项目域名，填写绑定的域名，例如：photo.xshan.top

接下来进行Cloudflare相关的环境变量配置。

• NEXT_PUBLIC_CLOUDFLARE_R2_BUCKET: R2存储桶名称，可以前往Cloudflare R2存储页面查看
• NEXT_PUBLIC_CLOUDFLARE_R2_PUBLIC_DOMAIN: R2存储桶公开域名，在可以前往Cloudflare R2存储页面查看，注意复制结果取消https://的前缀才可以，例如：pub-6f05b76a6e44406399d9cd6b72512345.r2.dev
• NEXT_PUBLIC_CLOUDFLARE_R2_ACCOUNT_ID: Cloudflare账号ID，在R2概述页面可以查看

接下来创建Cloudflare API令牌，用于项目访问R2存储，创建完成之后注意不要点击完成，记录两个关键令牌值。

• CLOUDFLARE_R2_ACCESS_KEY和CLOUDFLARE_R2_SECRET_ACCESS_KEY的值见上图，注意不要填写反了

6.重新部署项目#

填写完上述的环境变量之后，前往Vercel项目界面，重新部署项目，检查项目是否能够正常访问，并且项目是否正常。

WARNING

注意：如果你在部署项目时使用了类似EdgeOne等服务商的加速CDN服务，那么你可能会遇到重新部署之后Vercel预览窗正常，但访问域名后仍然是重新部署之前的情况，这很有可能是CDN缓存的问题，可以尝试前往你的CDN加速服务服务商清除缓存即可。

如果出现下面的账号登陆界面，说明项目部署成功，填写之前设定的管理员账号和密码之后登陆后台就可以尝试上传和删除图片了，至此这个项目基本完成，后续可以根据需要进行自定义配置。

登陆管理员界面之后，可以点击图片中的标识部分进入之前的项目配置页面，通过之前的配置成功后，项目的配置界面解锁了很多新的内容。

可以通过原作者的描述进行配置，也可以查看Github仓库的README文档，其中也有详细的介绍。

7.自定义配置#

接下来我将介绍一些推荐的配置，注意这并不是必须修改的内容，而是通过这些配置可以更加完善和优化你的照片博客。

8.温馨提醒#

1. 本方案采用Cloudflare R2存储作为图片存储，免费套餐每月提供10GB存储注意这里的10GB存储是GB/月单位，并非我们通常意义上的10GB，基本足够个人使用查看官方介绍。

2. 注意数据资产的价值，推荐做好备份，避免数据丢失。