Eleventy作品集博客

photography-portfolio-template — Eleventy 作品集模板

作者 mason2048

面向风景、人文与纪实摄影师的开源作品集模板，基于 Eleventy 构建，配合 Pages CMS 维护专题影集，并通过 GitHub Actions 自动部署到 GitHub Pages。

打开源站下载源码 ZIP

看看你的网站会是什么样

浏览真实页面截图，比较内容排版与手机效果。点击下方缩略图切换，放大查看整页细节。

3 个预览视图
桌面端首页1 / 3
桌面端截图首屏预览

由服务器浏览器实际访问页面后截取。

全部页面与视图 3

截图用于了解视觉与布局，交互效果请以实际项目为准。

采集于 2026-10-01查看来源

值得关注的模板亮点

从已有项目资料中，快速了解它的特点。

01

基于 Eleventy 的静态作品集，支持专题影集、响应式图片与全屏灯箱

02

通过 Pages CMS 在浏览器中维护首页、摄影师介绍、联系方式与专题影集

03

提供照片处理脚本，自动生成 AVIF、WebP 和 JPEG 网页版本

04

内置 GitHub Actions 工作流，自动检查并部署到 GitHub Pages

05

初始化向导可配置品牌名称、摄影师名称、联系方式与自定义域名

模板详细介绍

这是一个以专题影集为核心的摄影作品集模板，使用 Eleventy 生成静态页面，内容通过 Pages CMS 以可视化方式维护，部署由 GitHub Actions 自动完成到 GitHub Pages。模板包含首页、专题影集列表与详情页，支持响应式图片、全屏灯箱，并提供照片压缩脚本，把原片转换为 AVIF、WebP 和 JPEG 网页版本。

使用上，仓库不保存 10MB–50MB 的原片，只保留最长边 2560px 的网页照片；图片超过 2MB 会提示，超过 5MB 会阻止构建。每个专题以 JSON 文件存放在 content/projects/，站点资料在 src/_data/site.json，Pages CMS 字段定义在 .pages.yml。

本地运行需要 Node.js 22 或更新版本，初始化向导会询问品牌名称、摄影师名称、联系方式和自定义域名，也支持非交互参数。代码采用 MIT 许可，但演示照片、字体、图标等第三方素材需按各自许可核对；使用者上传的照片版权仍归各自摄影师所有。

Eleventy作品集博客

适合你的项目吗？

适用场景

  • 风景、人文或纪实摄影师搭建个人作品集网站
  • 按专题组织影集，并在浏览器中上传照片、调整顺序
  • 使用 GitHub Pages 免费托管，通过 GitHub Actions 自动发布
  • 在本地用 Node.js 运行开发服务器预览站点效果

适合人群

  • 希望用静态站点发布摄影作品的个人摄影师
  • 愿意使用 GitHub 仓库和 Pages CMS 维护内容的用户
  • 需要响应式图片与灯箱浏览体验的作品集项目
  • 能接受本地安装 Node.js 22 或更新版本进行构建的使用者

上手与定制指南

结合仓库当前版本的说明，按下面的资料检查内容、配置与运行要求。

  1. 1

    本地运行需要 Node.js 22 或更新版本，依次执行 npm install、npm run setup、npm run check、npm run dev

  2. 2

    使用 GitHub 模板创建仓库后，在 Settings → Pages 将 Source 设为 GitHub Actions，等待部署工作流完成

  3. 3

    原片不要直接提交到仓库，使用 tools 目录下的脚本或 npm run photos 生成网页版本

  4. 4

    图片超过 2MB 会提示，超过 5MB 会阻止构建

  5. 5

    自定义域名需运行 npm run setup 填写域名生成 CNAME，并在 GitHub Pages 与域名服务商完成 DNS 设置

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

本次收录的是公开仓库中采用 MIT 许可的免费版本；免费范围为该版本代码，不代表外部服务或第三方素材免费。

使用时需要遵守

  • 允许免费使用、修改、商用和分发该版本代码。
  • 分发代码副本或实质性部分时，保留原作者版权声明和完整 MIT 许可声明。
  • 代码按现状提供；担保与责任限制以原许可证及适用法律为准。

额外费用与待核对事项

  • 使用 Pages CMS 维护内容需要注册并登录 Pages CMS 账号，并授权其 GitHub App 访问你的仓库，属于外部服务依赖。
  • 必须授权第三方 Pages CMS GitHub App 访问仓库才能进行可视化内容维护。
  • 本地构建与开发需要安装 Node.js 22 或更新版本。
  • 单张网页图片超过 5MB 会导致构建失败，需先压缩到限制以内。
  • 不应将大尺寸原片提交到仓库，需先转换为网页版本再使用。
  • 演示照片采用单独的许可文件，与 MIT 代码许可不同，使用前需另行核对。
  • 演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 MIT 许可判断。
  • 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
查看原文依据

Permission is hereby granted, free of charge

许可证原文

打开 [Pages CMS](https://app.pagescms.org/) 并用 GitHub 登录。

README 原文

授权 Pages CMS GitHub App 访问你创建的仓库。

README 原文

需要 Node.js 22 或更新版本：

README 原文

图片超过 2MB 会显示提醒，超过 5MB 会阻止构建。

README 原文

不要把 10MB–50MB 原片直接提交到 GitHub。

README 原文

演示照片：[LICENSE-PHOTOS.md](LICENSE-PHOTOS.md)

README 原文
https://github.com/mason2048/photography-portfolio-template/blob/main/LICENSEhttps://github.com/mason2048/photography-portfolio-template/blob/main/README.md

DeepSeek 根据仓库许可证和 README 整理 ·2026-10-01。结果仅覆盖已读取资料，依赖、图片、字体及后续条款变更以各自原文为准。

项目核对记录与介绍依据

模板资料

来源平台
GitHub
资料与维护参考分
资料较完整 · 88 / 100
技术栈
Eleventy
网站类型
作品集 · 博客
这个分数如何计算

本站按许可资料（最高30分）、演示链接（12分）、预览图（10分）、Star数（15分）、记录的维护时间（15分）、描述完整度（8分）、功能记录（5分）和分类资料（5分）计算。它不是代码、安全或性能测试，也不是 Google 评分；有链接不代表已实测可用。

这个项目需要核对什么

记录的仓库更新时间
2026-07-14
截图检查日期
2026-10-01

已收录演示链接。请用你的内容与屏幕尺寸检查；有演示不代表表单、认证或支付已经可用。

目录记录的主要技术栈是 Eleventy。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料，不代表代码审计或部署实测。

查看具体选型方法 →

介绍的制作与核对状态

介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。

已完成服务器许可规则与 AI 来源核对；未经过人工编辑审核。

查看当时使用的来源资料

SHA-256: b5cb8819a379f16f3a397532fbe4eccfdd0e13e7c3e2a5ffbebd66cbbacef29a

2026-10-01T15:37:37.651Z

来源文件 / 仓库
# FIELD NOTES Photography Portfolio

[![Verify template](https://github.com/mason2048/photography-portfolio-template/actions/workflows/ci.yml/badge.svg)](https://github.com/mason2048/photography-portfolio-template/actions/workflows/ci.yml)
[![Deploy Pages](https://github.com/mason2048/photography-portfolio-template/actions/workflows/deploy-pages.yml/badge.svg)](https://github.com/mason2048/photography-portfolio-template/actions/workflows/deploy-pages.yml)
[![MIT License](https://img.shields.io/badge/code-MIT-252521.svg)](LICENSE)

一个面向风景、人文与纪实摄影师的开源作品集模板。采用 Eleventy、Pages CMS 和 GitHub Pages，支持专题影集、响应式图片、全屏灯箱、可视化内容维护和自动部署。

- 在线演示：[https://mason2048.github.io/photography-portfolio-template/](https://mason2048.github.io/photography-portfolio-template/)
- English guide: [docs/README.en.md](docs/README.en.md)
- 不需要数据库或付费服务器
- 原片保留在本地，网站自动生成 AVIF、WebP 和 JPEG 响应式版本

## 最快开始

### 方式一：直接创建自己的仓库

1. 点击 [`Use this template`](https://github.com/new?template_name=photography-portfolio-template&template_owner=mason2048)。
2. 创建一个公开仓库。
3. 在新仓库打开 `Settings → Pages`，将 Source 设为 `GitHub Actions`。
4. 等待 `Deploy photography portfolio` 工作流完成。
5. 打开 `https://你的用户名.github.io/你的仓库名/`。

工作流会自动识别用户主页或项目仓库路径，无需手动修改 `/repository-name/`。

### 方式二：下载到本地

需要 Node.js 22 或更新版本：

```bash
npm install
npm run setup
npm run check
npm run dev
```

然后打开 `http://localhost:8080/`。

初始化向导会询问品牌名称、摄影师名称、联系方式和自定义域名。也支持自动化参数：

```bash
npm run setup -- \
  --non-interactive \
  --name="YOUR NAME" \
  --author="YOUR NAME" \
  --title="YOUR NAME — Photography" \
  --contact-url="mailto:[email protected]" \
  --contact-label="Email me"
```

## 使用 Pages CMS 维护影集

1. 打开 [Pages CMS](https://app.pagescms.org/) 并用 GitHub 登录。
2. 授权 Pages CMS GitHub App 访问你创建的仓库。
3. 在“网站资料”中修改首页、摄影师介绍和联系方式。
4. 在“专题影集”中新建专题、上传网页照片并安排照片顺序。
5. 保存后 GitHub Actions 自动重新发布。

每个专题保存在 `content/projects/*.json`，Pages CMS 字段定义位于 [`.pages.yml`](.pages.yml)。完整说明见 [Pages CMS 使用指南](docs/pages-cms.md)。

## 照片工作流

不要把 10MB–50MB 原片直接提交到 GitHub。原片继续存放在硬盘或云盘，仓库只保存最长边 2560px 的网页版本。

macOS：把照片拖到：

```text
tools/prepare-photos.command
```

Windows：把照片拖到：

```text
tools/prepare-photos.cmd
```

所有平台也可以运行：

```bash
npm run photos -- my-project /path/to/photo-01.jpg /path/to/photo-02.heic
```

图片超过 2MB 会显示提醒，超过 5MB 会阻止构建。更多说明见 [照片处理指南](docs/photo-workflow.md)。

## 主要目录

```text
content/projects/        专题数据
assets/images/           网页照片
src/_data/site.json      网站、首页和联系方式
src/                     页面模板与样式
scripts/setup.mjs        初始化向导
scripts/prepare-photos.mjs  照片压缩
.pages.yml               Pages CMS 配置
.github/workflows/       检查与发布
```

## 自定义域名

运行 `npm run setup` 并填写域名，会生成根目录 `CNAME`。随后在 GitHub Pages 和域名服务商中完成 DNS 设置。不要把模板演示仓库的域名复制到自己的仓库。详见 [自定义域名指南](docs/custom-domain.md)。

## 开源许可

- 代码、模板和文档：[MIT License](LICENSE)
- 演示照片：[LICENSE-PHOTOS.md](LICENSE-PHOTOS.md)
- 使用者上传的照片版权仍属于各自摄影师，不会因为使用本模板而变更

## 参与项目

欢迎提交问题、功能建议和 Pull Request。请先阅读 [CONTRIBUTING.md](CONTRIBUTING.md)、[CODE_OF_CONDUCT.md](CODE_OF_CONDUCT.md) 与 [SECURITY.md](SECURITY.md)。
反馈内容错误

看看同类模板

对比同技术栈与用途的模板，找到更适合的视觉与内容结构。

eleventy-base-blog

eleventy-base-blog

A starter repository for a blog web site using the Eleventy static site generator.

Eleventy · 博客

Eleventy-Starter-Boilerplate

Eleventy-Starter-Boilerplate

🚀 Eleventy Starter is production-ready with SEO-friendly for quickly starting a blog. ⚡ Built with Eleventy, …

Eleventy · 博客

vredeburg

vredeburg

A simple starter project to create a blog using Eleventy and Tailwind CSS

Eleventy · 博客

eleventy-libdoc

eleventy-libdoc

An Eleventy starter project to craft slick documentation

Eleventy · 博客

halide

halide

Halide 是一个为图像作品集设计的极简模板，基于 Eleventy 静态站点生成器构建，并预配置了 Tina CMS 作为可选的内容管理后端。

Eleventy · 作品集

eleventy-stylus-blog-theme

eleventy-stylus-blog-theme

这是一个用 Eleventy 静态站点生成器搭配 Stylus CSS 预处理器搭建的博客主题仓库，定位偏向轻量、可直接部署的个人博客起步模板。

Eleventy · 工具站