GatsbyHTMLReact启动器

gatsby-starter-fractal — Gatsby 启动器模板

作者 anubhavsrivastava

基于 HTML5 UP 的 Fractal 设计、用 Gatsby 构建的启动器模板，通过 config.js 集中配置站点标题、标题文字与社交链接。

打开源站下载源码 ZIP

看看你的网站会是什么样

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

2 个预览视图

桌面端首页1 / 2

$gatsby-starter-fractal · 桌面端首页$

访问演示网站在新标签页打开

桌面端截图首屏预览

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

全部页面与视图 2

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

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

值得关注的模板亮点

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

页面设计源自 HTML5 UP 的 Fractal 主题

站点标题、主副标题与社交链接集中在 config.js 配置

内置基于 gh-pages 模块的部署脚本，可发布到 GitHub Pages

提供 pathPrefix 配置，适配域名子路径托管

MIT 许可，代码可免费使用、修改、商用与分发

模板详细介绍

这是一个 Gatsby 启动器模板，页面视觉来自 HTML5 UP 的 Fractal 主题。仓库资料显示其技术栈为 Gatsby 与 HTML，README 标题写为 Gatsby.js V4，模板元数据描述为 V2，两者不一致，此处不给出具体版本结论。

模板的个性化集中在项目根目录的 config.js：可设置 siteTitle（页面 title）、heading 与 subHeading，以及 socialLinks 数组（每项包含 icon、name、url，示例使用 Font Awesome 图标类名）。README 未说明除首页外的页面结构或内容组织方式，也未列出依赖清单，因此无法确认具体插件与样式实现。

部署方面，package.json 内置使用 gh-pages 模块的脚本，运行 npm run deploy 即可发布到 GitHub Pages；config.js 中另有 pathPrefix 配置，用于站点托管在域名子路径的场景，若作为根站点托管则需移除该配置。

使用前需先全局安装 Gatsby CLI，再用 gatsby new 以该仓库地址创建项目，随后进入目录执行 npm install 与 gatsby develop。许可为 MIT，允许使用、修改、商用与分发，但演示图片、字体、图标等第三方素材需单独核对许可。

GatsbyHTML启动器

适合你的项目吗？

适用场景

用 Gatsby 快速搭建一个以个人介绍或作品展示为主的单页站点
将 HTML5 UP 的 Fractal 静态设计迁移到 Gatsby 组件化开发流程
需要发布到 GitHub Pages 且可能托管在域名子路径下的项目
作为学习 Gatsby 项目结构与 config.js 配置方式的起步示例

适合人群

熟悉 npm 与 Gatsby CLI 基本命令的前端开发者
希望沿用 HTML5 UP 视觉风格但改用 Gatsby 构建的个人站点作者
需要把站点部署到 GitHub Pages 的用户

上手与定制指南

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

1
先全局安装 Gatsby CLI：npm install --global gatsby-cli
2
用 gatsby new <site-name> <仓库地址> 创建项目，再执行 npm install 与 gatsby develop
3
编辑 config.js 填写 siteTitle、heading、subHeading 与 socialLinks
4
托管在域名子路径时保留并修改 pathPrefix，作为根站点托管时移除该配置
5
运行 npm run deploy 通过 gh-pages 发布到 GitHub Pages

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

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

使用时需要遵守

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

额外费用与待核对事项

使用前需全局安装 Gatsby CLI（npm install --global gatsby-cli），并依赖 npm 安装依赖包，属于外部工具链要求。
部署脚本依赖 gh-pages 模块并发布到 GitHub Pages，需要 GitHub 账号与仓库。
托管在域名子路径时需修改 config.js 中的 pathPrefix；作为根站点托管则需移除该配置。
演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 MIT 许可判断。
域名、托管、数据库、支付或 AI 等外部服务可能另外收费。

查看原文依据

Permission is hereby granted, free of charge
许可证原文

Make sure that you have the Gatsby CLI program installed
README 原文

`package.json` has a default script that uses `gh-pages` module to publish on Github pages.
README 原文

Change `pathPrefix` to relevant path if your gatsby site is hosted on subpath of a domain
README 原文

https://github.com/anubhavsrivastava/gatsby-starter-fractal/blob/master/LICENSE https://github.com/anubhavsrivastava/gatsby-starter-fractal/blob/master/README.md

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

项目核对记录与介绍依据

模板资料

来源平台: GitHub
资料与维护参考分: 资料较完整 · 77 / 100
技术栈: Gatsby · HTML · React
网站类型: 启动器

这个分数如何计算

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

这个项目需要核对什么

记录的仓库更新时间: 2022-01-13
截图检查日期: 2026-10-01

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

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

查看具体选型方法 →

介绍的制作与核对状态

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

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

查看当时使用的来源资料

SHA-256: 156ad148bb55bdcf1687e24b07bba1cd3adab34b46f05ad67eba9c9361dbdf27

2026-10-01T15:01:07.960Z

来源文件 / 仓库

# gatsby-starter-fractal

Gatsby.js V4 starter template based on Fractal by HTML5 UP

For an overview of the project structure please refer to the [Gatsby documentation - Building with Components](https://www.gatsbyjs.org/docs/building-with-components/).

![Screenshot](./src/assets/img/screenshot.jpg)

Check online preview [here](https://anubhavsrivastava.github.io/gatsby-starter-fractal/)

## Screenshot

![Screenshot](./src/assets/img/demo.png)

## Install

Make sure that you have the Gatsby CLI program installed:

```sh
npm install --global gatsby-cli
```

And run from your CLI:

```sh
gatsby new <site-name> https://github.com/anubhavsrivastava/gatsby-starter-fractal
```

Then you can run it by:

```sh
cd gatsby-example-site
npm install
gatsby develop
```

### Personalization

Edit `config.js` to put up your details

```javascript
module.exports = {
  siteTitle: 'Gatsby Starter fractal', // <title>
  ...
  heading: 'Anubhav',
  subHeading: 'Web Developer',
  // social
  socialLinks: [
    {
      icon: 'fa-github',
      name: 'Github',
      url: 'https://github.com/anubhavsrivastava',
    }
    ...
  ],
};

```

### Deploying using Github page

`package.json` has a default script that uses `gh-pages` module to publish on Github pages. Simply running `npm run deploy` would publish the site on github pages.

Additionally, it also has [path-prefix](https://www.gatsbyjs.org/docs/path-prefix/) value set for gatsby config in `config.js`. Change `pathPrefix` to relevant path if your gatsby site is hosted on subpath of a domain, `https://theanubhav.com/somePath/`. If you are hosting it as root site, i.e, `https://theanubhav.com/` , remove the pathPrefix configuration.

### Checkout other similar starters

- [gatsby-starter-casual](https://github.com/anubhavsrivastava/gatsby-starter-casual)
- [gatsby-starter-grayscale](https://github.com/anubhavsrivastava/gatsby-starter-grayscale)
- [gatsby-starter-resume](https://github.com/anubhavsrivastava/gatsby-starter-resume)
- [gatsby-starter-spectral](https://github.com/anubhavsrivastava/gatsby-starter-spectral)
- [gatsby-starter-newage](https://github.com/anubhavsrivastava/gatsby-starter-newage)
- [gatsby-starter-stylish](https://github.com/anubhavsrivastava/gatsby-starter-stylish)
- [gatsby-starter-solidstate](https://github.com/anubhavsrivastava/gatsby-starter-solidstate)
- [gatsby-starter-readonly](https://github.com/anubhavsrivastava/gatsby-starter-readonly)
- [gatsby-starter-prologue](https://github.com/anubhavsrivastava/gatsby-starter-prologue)
- [gatsby-starter-phantom](https://github.com/anubhavsrivastava/gatsby-starter-phantom)
- [gatsby-starter-paradigmshift](https://github.com/anubhavsrivastava/gatsby-starter-paradigmshift)
- [gatsby-starter-overflow](https://github.com/anubhavsrivastava/gatsby-starter-overflow)
- [gatsby-starter-multiverse](https://github.com/anubhavsrivastava/gatsby-starter-multiverse)
- [gatsby-starter-identity](https://github.com/anubhavsrivastava/gatsby-starter-identity)
- [gatsby-starter-highlights](https://github.com/anubhavsrivastava/gatsby-starter-highlights) 
- [gatsby-starter-eventually](https://github.com/anubhavsrivastava/gatsby-starter-eventually)
- [gatsby-starter-directive](https://github.com/anubhavsrivastava/gatsby-starter-directive)
- [gatsby-starter-creative](https://github.com/anubhavsrivastava/gatsby-starter-creative)
- [gatsby-starter-aerial](https://github.com/anubhavsrivastava/gatsby-starter-aerial)

### Contribution

Suggestions and PRs are welcome!

Please create issue or open PR request for contribution.

### License

[![Open Source Love](https://badges.frapsoft.com/os/mit/mit.svg?v=102)](LICENSE)

refer `LICENSE` file in this repository.

反馈内容错误