Article

Tink Photo Gallery 开源一个手工古法编程的摄影个人网站

更新于：2026-07-14 • 6 min read

开源一个手工古法编程的摄影个人网站，再手把手教你怎么上线

Tink Photo Gallery 是我前几年制作的个人摄影网站，整理了一些随手拍摄的照片，按主题分成几个图集。最近把这个旧项目重新整理了一遍，开源出来发挥余热。

说它是手工古法编程，是因为它完整走了一遍前 Vibe Coding 时代的主流流程：先在 Figma 出设计稿，用栅格系统定布局，再查资料、选技术栈、研究 Astro/GSAP 文档，再编排动画…

放在今天，做一个网站这件事太快了，描述几句话就能起一个像样的框架。回头看，那种一步步手工搭建的过程反而是很沉浸式的体验。

如果你也想要一个自己的摄影风格的个人网站，克隆下来交给 AI 改几处配置就能变成你的站，本文后半部分是完整的部署教程。

在线地址：tinks.netlify.app

GitHub：github.com/ricocc/tink-photography

Tink Photo Gallery 主视觉

网站里有什么

下面是我自己的收藏整理，你可以替换为自己的主题、图片。

摄影画廊：90 张照片按主题分五个图集，日落、自然、城市、瞬间，外加一个阿勒泰特辑。
博客：Markdown 内容集合，记录旅行随笔和生活思考。
关于页：个人介绍和社交链接。
日夜模式：两套配色，跟随主题切换。

日间与夜间模式

技术栈是 Astro + GSAP + Lenis + Swiper + Sass，TypeScript 类型检查，Sharp 做构建时图片优化。纯静态输出，默认零 JS，加载很快。动效部分花了不少功夫：GSAP 配合 Lenis 做平滑滚动，图集用 Swiper 轮播，还有自定义光标和预加载动画。

主题图集页面

城市漫游图集

对二次开发比较友好的一点：站点信息集中在一个配置文件里，改站名、作者资料、导航、图集分类都在 src/config/site.ts 一处完成，不用到处找。

把代码拿下来

环境要求：Node.js 22.12.0 以上，推荐用 pnpm。

GitHub 仓库页面说明

# 没装 pnpm 的话先装
npm install -g pnpm

# 克隆仓库
git clone https://github.com/ricocc/tink-photography.git
cd tink-photography

# 安装依赖
pnpm install

# 启动开发服务器，默认 http://localhost:4321
pnpm dev

不习惯命令行的话，也可以在 GitHub 仓库页面点 Code → Download ZIP 直接下载，解压后在目录里执行 pnpm install 和 pnpm dev。

浏览器打开 localhost:4321，本地就跑起来了。

改成你自己的

最简单的方式，你把自己的信息给任意一个 AI，然后告诉它，把网站内容更换为我的信息 即可。 AI 会判断，不会你自己手动一个个去检阅，唯一要做的是，根据要求补充资料即可。

三步替换成你的内容：

站点信息：改 src/config/site.ts，站名、SEO 描述、作者资料、导航菜单、图集分类都在这一个文件里。
照片：图片放进 src/assets/images/ 对应分类目录，然后在 src/data/gallery/ 里按现有格式登记条目，每个分类一个文件（如 sunset.ts、city.ts）。
博客：在 src/content/blog/ 下新建 Markdown 文件，目录里有现成的文章模板可以参考。

改完 pnpm dev 本地确认没问题，就可以部署了。

部署到 Cloudflare

Cloudflare 网站支持中文，并且免费版不限带宽，个人网站根本用不完，国内访问速度还行。

先说一个容易迷惑的地方：Cloudflare 后台里 Workers 和 Pages 放在同一个入口，并且 Workers 优先级很高，但是要注意选 Pages 即可。 选 Pages，不用碰 Workers。Workers 是边缘计算平台，跑 API、SSR、定时任务用的，配置要自己写；Pages 是给网站用的，连上仓库选好框架就能部署，静态请求和带宽都不限量。这个项目是纯静态站，Pages 刚好。

第一步：把仓库放到自己账号下

部署平台需要读取你自己的仓库。最简单的方式是在 GitHub 仓库页面右上角点 Fork，一键复制到你的账号。如果你本地已经改好了内容，也可以新建一个空仓库，把代码推上去：

git remote set-url origin https://github.com/你的用户名/你的仓库名.git
git push -u origin master

第二步：连接 Cloudflare

登录 Cloudflare Dashboard，支持 Google/GitHub 账号直接登录。
左侧菜单进入计算 → Workers 和 Pages，点右上角 创建应用程序。
创建页面默认是创建 Worker，别在这里选。往下看，底部有一行小字 “想要部署 Pages？开始使用”，点它。
选择 导入现有 Git 存储库。
授权 GitHub，搜索并选中刚才的仓库。
构建设置里框架预设选 Astro，构建命令和输出目录会自动填好（pnpm run build 输出到 dist）。在”环境变量（高级）“里添加 NODE_VERSION，值填 22.12.0。这一步别跳过，Cloudflare 默认的 Node 版本偏低，不设置会构建失败。最后点 保存并部署。