GatsbyReact作品集

gatsby-portfolio — Gatsby 作品集模板

作者 priyesh18

基于 Gatsby 的个人作品集模板，使用 JSON 文件管理个人信息、博客与项目数据，支持深色/浅色模式切换和响应式布局。

打开源站下载源码 ZIP

看看你的网站会是什么样

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

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

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

全部页面与视图 2

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

采集于 2026-09-30查看来源

值得关注的模板亮点

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

01

使用 Gatsby 构建的个人作品集模板

02

移动优先的响应式设计

03

支持深色/浅色模式切换

04

通过 react-scroll 实现平滑滚动与滚动监听

05

个人信息、博客、项目分别存放在 src/data 下的 JSON 文件中

06

README 提供 Netlify 与 Vercel 部署入口

模板详细介绍

这是一个用 Gatsby 构建的个人作品集模板，仓库描述为“Personal website using gatsby.js”。模板以移动优先的响应式设计为基础，提供深色/浅色模式切换，并通过 react-scroll 实现平滑滚动与滚动监听（scroll spy）。

内容组织上，模板把可编辑的数据放在 src/data 目录下的三个 JSON 文件中：personal.json 用于个人信息，blogs.json 用于博客条目，projects.json 用于项目条目。页面入口为 src/pages/index.js，修改后由开发服务器实时刷新。

使用方式是通过 Gatsby CLI 以该仓库为 starter 创建新站点，然后在本地运行 gatsby develop，默认访问 http://localhost:8000，同时提供 /___graphql 的 GraphQL 调试入口。README 还给出了部署到 Netlify 和 Vercel 的按钮链接。仓库采用 MIT 许可，但演示图片、字体、图标等第三方素材需单独核对其许可。

Gatsby作品集

适合你的项目吗？

适用场景

  • 搭建个人作品集网站，展示项目与博客条目
  • 作为 Gatsby 入门练习，学习以 JSON 数据驱动页面内容
  • 需要深色/浅色模式切换与平滑滚动导航的个人站点
  • 部署到 Netlify 或 Vercel 的静态个人网站

适合人群

  • 希望用 Gatsby 快速起步个人作品集的开发者
  • 偏好用 JSON 文件维护站点内容、不想引入 CMS 的用户
  • 需要响应式布局与主题切换的个人站点作者

上手与定制指南

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

  1. 1

    使用 gatsby new my-portfolio-starter https://github.com/priyesh18/gatsby-portfolio 创建站点

  2. 2

    进入目录后运行 gatsby develop，本地默认地址为 http://localhost:8000

  3. 3

    编辑 src/data 下的 personal.json、blogs.json、projects.json 来替换个人内容

  4. 4

    页面入口为 src/pages/index.js，保存后浏览器会实时更新

  5. 5

    代码采用 MIT 许可，但演示图片、字体、图标等第三方素材需按各自许可核对

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

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

使用时需要遵守

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

额外费用与待核对事项

  • 演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 MIT 许可判断。
  • 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
查看原文依据

Permission is hereby granted, free of charge

许可证原文
https://github.com/priyesh18/gatsby-portfolio/blob/master/LICENSEhttps://github.com/priyesh18/gatsby-portfolio/blob/master/README.md

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

项目核对记录与介绍依据

模板资料

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

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

这个项目需要核对什么

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

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

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

查看具体选型方法 →

介绍的制作与核对状态

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

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

查看当时使用的来源资料

SHA-256: 56604ed77df31d8d02a9f34f65eb43c9c083143c0a14b002f1227f30685fd565

2026-10-01T14:00:11.775Z

来源文件 / 仓库
# Portfolio template/starter made using [Gatsby](https://www.gatsbyjs.org/).

## Features

1.  Responsive with mobile first design.
1.  Dark/Light mode toggle.
1.  Smooth Scroll and Scroll spy using react-scroll.

## 🚀 Quick start

1.  **Create a Gatsby site.**

    Use the Gatsby CLI to create a new site, specifying this starter.

    ```shell
    gatsby new my-portfolio-starter https://github.com/priyesh18/gatsby-portfolio
    ```

1.  **Start developing.**

    Navigate into your new site’s directory and start it up.

    ```shell
    cd my-portfolio-starter/
    gatsby develop
    ```

1.  **Open the source code and start editing!**

    Your site is now running at `http://localhost:8000`!

    _Note: You'll also see a second link: _`http://localhost:8000/___graphql`\_.

    Open the `my-portfolio-starter` directory in your code editor of choice and edit `src/pages/index.js`. Save your changes and the browser will update in real time!

1.  **Edit the data to personalize the site**

    Edit data inside the json files.
    
    ```
    .
    └── src  
     └── data
    ├── personal.json
    ├── blogs.json
    └── projects.json

## 💫 Deploy

[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/priyesh18/gatsby-portfolio)

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/priyesh18/gatsby-portfolio)
反馈内容错误

看看同类模板

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

yashitanamdeo.github.io

yashitanamdeo.github.io

yashitanamdeo.github.io 是一个基于 Gatsby 和 React 构建的个人作品集网站模板，源自开发者 Yashita Namdeo 的第一版个人主页。

Gatsby · 作品集

clay-theme

clay-theme

Image-centric Gatsby theme for publishers, portfolios, photographers blogs and more.

Gatsby · 作品集

gatsby-markdown-blog

gatsby-markdown-blog

A minimal starter template for building personal/blogging websites with Gatsby, Markdown, and Netlify.

Gatsby · 作品集

gatsby-theme-chronogrove

gatsby-theme-chronogrove

A homemade GatsbyJS theme for my personal blog and website.

Gatsby · 作品集

gatsby-starter-chronoblog-profile

gatsby-starter-chronoblog-profile

Chronoblog Gatsby Theme Starter. This starter will help you launch a personal website with a simple text feed …

Gatsby · 作品集

portfolio-websitev1

portfolio-websitev1

My personal Portfolio Website v1

Gatsby · 作品集