Overview

用到三个平台:Cloudinary、 GitHub、Vercel

分别的作用:存放图片资源、存放代码、托管网站

Demo

Kinpoe.Ray's Gallery

Untitled

JieTu.PNG

JieTu.PNG

Untitled

Untitled

Step1: Cloudinary

注册一个账号,然后导入你想展示的图片;注册成功之后会有4个需要保存以备后序使用的内容:Cloud name、API Key、API secret,以及导入图片所在文件夹的名称。

前三个数据用于 Cloudinary 中访问到你的账户。 第四个数据是用于指定访问哪个目录下的图片。

过程图👇

Cloudinary Dashboard

Cloudinary API info

Cloudinary Folder

Step2: Github&Vercel

这里提供两个方案。


方案一:打开Github项目kinpoe-ray/gallery直接Fork。

(只需将代码中的基础信息修改成你自己的)

Github Fork

然后在Vercel上新建Project,Import Git repository搜索刚Fork好的仓库代码进行Import。

Vercel New Project

Vercel Project Name

对应刚才在Cloudinary记录的四个数据,自行添加以下参数并填写相应值。

CLOUDINARY_FOLDER

NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME

CLOUDINARY_API_KEY

CLOUDINARY_API_SECRET

Vercel Enviroment Variable

方案二:从Vercel官方提供的模板进行一键部署。

(额外需要自行参考我提供的代码对比进行修改,否则会加载失败,只显示模糊的加载中图像)

打开 Vercel Image Gallery Starter Image Gallery Starter – Vercel ,点击 Deploy,自动将项目克隆到Github,并部署到Vercel。

过程图👇

Vercel Template Deploy

Vercel Creat Git Repository

对应刚才在Cloudinary记录的四个数据,填写相应值

Vercel Enviroment Variable


在Vercel上部署此项目成功的样子👇

Vercel Deploy Well Done

Step3: Chage Information

Vercel首页找到刚才部署的项目,点击右上角 Repository 跳转到 Github 项目里进行源码修改。

修改后的代码与官方初始的代码详细对比可以参考以下链接👇

Comparing 8ea7c54..8d2553b · kinpoe-ray/gallery

Personal Profile

Path:pages/index.tsx

Untitled

Untitled

Untitled

Footer

Path:pages/index.tsx

Untitled

Image Rendering Setting

Path:pages/index.tsx

Untitled

Path:components/SharedModal.tsx

Untitled

path:next.config.js

Untitled

path:public

上传自己的图片来替代这两个文件,删除og-image.png文件

Untitled

Sharing

Untitled

path:pages/_document.tsx

Untitled

path:pages/p/[photoId].tsx

Untitled

Domain

部署在Vercel会有个默认以vercel.app结尾的域名:https://gallery-gamma-silk.vercel.app/

绑定自己的域名:Settings - Domains - Add

然后到Cloudflare(或者其他平台)进行DNS解析

Untitled

Reference

官方Demo👇

Next.js Conf 2022 Pictures

大佬Demo👇

Guoqi Sun' Image Gallery

Comparing 74e35c9..c9acd81 · sun0225SUN/gallery

其他参考👇

靠白嫖,我部署了一个网站

利用Vercel Image Gallery Starter 搭配 Cloudinary 搭建自己的照片墙 | Jockiery’s Life Wanderings