Tink Photo Gallery 是我前几年制作的个人摄影网站，整理了一些拍摄照片，按主题分成几个图集。最近把这个旧项目重新整理了一遍，开源出来发挥余热。
说它是手工古法编程，是因为它完整走了一遍前 Vibe Coding 时代的主流流程：
先在 Figma 出设计稿，用栅格系统定布局，再查资料、选技术栈、研究 Astro/GSAP 文档，再编排动画...
放在今天，做一个网站这件事太快了，描述几句话就能起一个像样的框架。回头看，那种一步步手工搭建的过程反而是很沉浸式的体验。
如果你也想要一个自己的摄影风格的个人网站，克隆下来交给 AI 改几处配置就能变成你的站，本文后半部分是完整的部署教程。
下面是我自己的收藏整理，你可以替换为自己的主题、图片。
摄影画廊：90 张照片按主题分五个图集，日落、自然、城市、瞬间，外加一个阿勒泰特辑。
博客：Markdown 内容集合，记录旅行随笔和生活思考。
技术栈是 Astro + GSAP + Lenis + Swiper + Sass，TypeScript 类型检查，Sharp 做构建时图片优化。
纯静态输出，默认零 JS，加载很快。动效部分花了不少功夫：GSAP 配合 Lenis 做平滑滚动，图集用 Swiper 轮播，还有自定义光标和预加载动画。
对二次开发比较友好的一点：站点信息集中在一个配置文件里，改站名、作者资料、导航、图集分类都在 src/config/site.ts 一处完成，不用到处找。
环境要求：Node.js 22.12.0 以上，推荐用 pnpm。
# 没装 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 会判断，不会你自己手动一个个去检阅，唯一要做的是，根据要求补充资料即可。
1. 站点信息：改 src/config/site.ts，站名、SEO 描述、作者资料、导航菜单、图集分类都在这一个文件里。
2. 照片：图片放进 src/assets/images/ 对应分类目录，然后在 src/data/gallery/ 里按现有格式登记条目，每个分类一个文件（如 sunset.ts、city.ts）。
3. 博客：在 src/content/blog/ 下新建 Markdown 文件，目录里有现成的文章模板可以参考。
改完 pnpm dev 本地确认没问题，就可以部署了。
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
1、 登录 Cloudflare Dashboard，进入 Workers & Pages，点 创建应用程序 → 切到 Pages 标签页 → Connect to Git。别停在默认的 Workers 标签页。
3、构建设置里 Framework preset 选 Astro，构建命令和输出目录会自动填好（pnpm build 输出到 dist）。然后 点 开始部署。
构建大概十几秒就可以了。 完成后你会得到一个 项目名.pages.dev 的免费域名，站点就上线了。
如果不知道怎么找，页面有 AI 助手，直接告诉 AI 你要部署页面，它会给你教程和引导。
在项目的 Custom domains 里添加域名。如果域名本来就托管在 Cloudflare，DNS 记录会自动配好；在其他服务商的话，按提示加一条 CNAME 记录即可。
之后的更新就很省心了：本地改完内容 push 到仓库，Cloudflare 会自动重新构建部署，加照片、发博客都是一次 push 的事。
这个站从设计稿到动画都是手工古法编程搭出来的，放在今天不算高效，但是每个代码模块、动画编排都清楚为什么是这样，为什么选择这么做。
而现在有了 AI 的协助，它反而更适合作为模板了：克隆下来，让 AI 帮你改配置、调样式、换内容，古法的底子配上新式的改法。
GitHub：github.com/ricocc/tink-photography
