author
date
category
tag
summary
Overview
用到三个平台：Cloudinary、 GitHub、Vercel
分别的作用：存放图片资源、存放代码、托管网站
Demo
Step1: Cloudinary
注册一个账号，然后导入你想展示的图片；注册成功之后会有4个需要保存以备后序使用的内容：Cloud name、API Key、API secret，以及导入图片所在文件夹的名称。
前三个数据用于 Cloudinary 中访问到你的账户。
第四个数据是用于指定访问哪个目录下的图片。
过程图👇
Step2: Github&Vercel
这里提供两个方案。
方案一：打开Github项目kinpoe-ray/gallery直接Fork。
（只需将代码中的基础信息修改成你自己的）
然后在Vercel上新建Project，Import Git repository搜索刚Fork好的仓库代码进行Import。
对应刚才在Cloudinary记录的四个数据，自行添加以下参数并填写相应值。
CLOUDINARY_FOLDER
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME
CLOUDINARY_API_KEY
CLOUDINARY_API_SECRET
方案二：从Vercel官方提供的模板进行一键部署。
（额外需要自行参考我提供的代码对比进行修改，否则会加载失败，只显示模糊的加载中图像）
打开 Vercel Image Gallery Starter Image Gallery Starter – Vercel ，点击 Deploy，自动将项目克隆到Github，并部署到Vercel。
过程图👇
对应刚才在Cloudinary记录的四个数据，填写相应值
在Vercel上部署此项目成功的样子👇
Step3: Chage Information
Vercel首页找到刚才部署的项目，点击右上角 Repository 跳转到 Github 项目里进行源码修改。
修改后的代码与官方初始的代码详细对比可以参考以下链接👇
Personal Profile
Path:pages/index.tsx
Footer
Path:pages/index.tsx
Image Rendering Setting
Path:pages/index.tsx
Path:components/SharedModal.tsx
path:next.config.js
path:public
上传自己的图片来替代这两个文件，删除og-image.png文件
Sharing
path:pages/_document.tsx
path:pages/p/[photoId].tsx
Domain
部署在Vercel会有个默认以vercel.app结尾的域名：https://gallery-gamma-silk.vercel.app/
绑定自己的域名：Settings - Domains - Add
然后到Cloudflare（或者其他平台）进行DNS解析
Reference
官方Demo👇
大佬Demo👇
其他参考👇
