GatsbyReact企业官网启动器

zauberhaft-gatsby — Gatsby 企业官网模板

作者 ariqnrnns

Zauberhaft 是一个基于 Gatsby 的免费机构/作品集网站模板，使用 Ravenbright CSS 构建，采用 Apache-2.0 许可，可自定义并部署到静态托管平台。

打开源站下载源码 ZIP

看看你的网站会是什么样

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

1 个预览视图

作者提供的预览

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

作者提供的预览

来自项目 README 的原始预览。

目前有 1 张原始预览，可打开完整图片查看设计细节。

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

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

值得关注的模板亮点

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

基于 Gatsby 的静态站点模板，面向机构官网与作品集场景

样式使用 Ravenbright CSS，可通过工具类或 CSS 自定义属性调整

README 声明包含响应式落地页、平滑动画与 Open Graph 标签

README 声明无障碍符合 WCAG 2.1，由 Pagespeed Insights、WAVE 与 Tota11y 测量

采用 Apache-2.0 许可，允许免费使用、修改、商用与分发

README 提供 Netlify 部署按钮与本地开发、构建命令说明

模板详细介绍

Zauberhaft 是一个面向机构与作品集场景的 Gatsby 网站模板，仓库位于 GitHub（ariqnrnns/zauberhaft-gatsby），演示站点为 zauberhaft.ravenbright.design。模板使用 Ravenbright CSS 库构建，样式可通过工具类（utility classes）或 CSS 自定义属性（CSS variables）调整，因此修改配色、间距等外观时不需要改动组件结构。README 列出的特性包括响应式落地页、平滑动画、Open Graph 标签、无障碍支持（声明符合 WCAG 2.1，由 Pagespeed Insights、WAVE 与 Tota11y 测量）以及静态站点输出。

使用流程上，README 建议从 GitHub Releases 下载源码，进入目录执行 npm install，再用 npm run dev 启动本地开发服务器（localhost:8000）；构建时执行 npm run build 与 npm run serve，在 localhost:9000 查看构建结果。部署方面 README 提供了 Netlify 一键部署按钮，静态输出也可放到其他托管平台。

许可方面，仓库采用 Apache-2.0，允许免费使用、修改、商用与分发，分发时需随附许可证、标注修改过的文件并保留归属声明。需要注意的是，代码的 Apache-2.0 许可不覆盖模板中引用的第三方素材：照片来自 Unsplash，字体为 Indian Type Foundry 的 Satoshi，占位 Logo 来自 Logoipsum，图标来自 Tabler、Akar Icons、Feather Icons、Font Awesome 与 GitHub Octicons，这些素材需按各自许可单独核对。仓库最近更新时间为 2022 年 11 月，README 未说明依赖版本与长期维护计划。

Gatsby企业官网启动器

适合你的项目吗？

适用场景

搭建机构或工作室的对外展示官网
制作用于展示项目与案例的作品集页面
以现成 Gatsby 模板为基础快速起步并自行改样式
部署到 Netlify 或其他静态托管平台

适合人群

需要机构官网或作品集模板的前端开发者
熟悉 npm 与 Gatsby 开发流程的使用者
希望通过 CSS 变量或工具类调整外观、而非重写组件的人
接受 Apache-2.0 条款并愿意自行核对第三方素材许可的团队

上手与定制指南

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

1
从 GitHub Releases 下载源码，或克隆仓库后进入目录
2
执行 npm install 安装依赖
3
执行 npm run dev 启动本地开发服务器，默认访问 localhost:8000
4
构建时执行 npm run build，再执行 npm run serve，默认在 localhost:9000 查看结果
5
README 提供 Netlify 一键部署入口；照片、字体、图标等第三方素材需按各自许可单独核对

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

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

使用时需要遵守

允许免费使用、修改、商用和分发；分发时需随附 Apache-2.0 许可证。
修改过的文件需显著标明改动，并保留相关版权、专利、商标及归属声明。
若原项目附有 NOTICE 文件，分发衍生作品时需保留其中适用的归属声明。
许可包含适用的贡献者专利授权；发起许可所述专利诉讼会终止该专利授权，且不授予商标使用权。
代码按现状提供；担保与责任限制以原许可证及适用法律为准。

额外费用与待核对事项

模板中的照片来自 Unsplash，不在 Apache-2.0 代码许可范围内，需按 Unsplash 自身许可单独核对后方可使用。
字体 Satoshi 由 Indian Type Foundry 提供，需遵守其字体许可，Apache-2.0 不覆盖该字体。
占位 Logo 来自 Logoipsum，属第三方素材，需按其许可单独确认使用条件。
图标来自 Tabler、Akar Icons、Feather Icons、Font Awesome 与 GitHub Octicons，各自许可不同，需分别核对，Apache-2.0 不覆盖这些图标。
模板依赖 Ravenbright CSS 库，自定义样式需参照该库的工具类与 CSS 变量文档，使用前应确认该库自身的许可与可用性。
演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 Apache-2.0 许可判断。
域名、托管、数据库、支付或 AI 等外部服务可能另外收费。

查看原文依据

no-charge, royalty-free, irrevocable copyright license
许可证原文

Photos are courtesy of [Unsplash](https://unsplash.com)
README 原文

Typeface: `Satoshi` by [Indian Type Foundry](https://www.fontshare.com/fonts/satoshi)
README 原文

Placeholder Logo are courtesy of [Logoipsum](https://logoipsum.com)
README 原文

Icons are courtesy of [Tabler](https://tabler-icons.io/), [Akar Icons](https://akaricons.com/), [Feather Icons](https://feathericons.com/), [Font Awesome](https://fontawesome.com/), and [GitHub Octicons](https://octicons.github.com/)
README 原文

Zauberhaft is built with Ravenbright CSS library.
README 原文

https://github.com/ariqnrnns/zauberhaft-gatsby/blob/main/LICENSE.md https://github.com/ariqnrnns/zauberhaft-gatsby/blob/main/README.md

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

项目核对记录与介绍依据

模板资料

来源平台: GitHub
资料与维护参考分: 资料一般 · 73 / 100
技术栈: Gatsby · React
网站类型: 企业官网 · 启动器

这个分数如何计算

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

这个项目需要核对什么

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

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

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

查看具体选型方法 →

介绍的制作与核对状态

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

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

查看当时使用的来源资料

SHA-256: 15a454de66286c05af258a05198a5d5193373d1d400761280db4bdb53ce4bdfe

2026-10-02T08:25:55.664Z

来源文件 / 仓库

# Zauberhaft - Gatsby template

[![Build CI](https://github.com/ariqnrnns/zauberhaft-gatsby/actions/workflows/build.yml/badge.svg)](https://github.com/ariqnrnns/zauberhaft-gatsby/actions/workflows/build.yml)
![GitHub last commit](https://img.shields.io/github/last-commit/ariqnrnns/zauberhaft-gatsby)
[![License](https://img.shields.io/badge/License-Apache%202.0-blue.svg)](https://opensource.org/licenses/Apache-2.0)
[![zauberhaft.ravenbright.design](https://img.shields.io/website-up-down-green-red/http/shields.io.svg)](https://zauberhaft.ravenbright.design)

<p align="center">
<img src="https://raw.githubusercontent.com/ariqnrnns/zauberhaft-gatsby/main/zauberhaft-banner.jpg" alt="Zauberhaft Banner">

<img src="https://raw.githubusercontent.com/ariqnrnns/zauberhaft-gatsby/main/zauberhaft-gatsby-stats.jpg" alt="Zauberhaft Stats">
</p>

## Free, customizable, modern & Lightning fast Gatsby agency website template

Build modern & unique portfolio website that convert with	Zauberhaft.

Easily customize the template with utility classes & CSS custom properties. Get started quickly & supercharge your online presence with Zauberhaft Gatsby template.

## 👉 Demo

[View demo](https://zauberhaft.ravenbright.design)

## ✅ Why Zauberhaft?

- 👌 Totally free to use with Apache License 2.0
- 😎 Stunning User Interface
- 🎨 Everything is customizable. You can use [Ravenbright CSS](https://ravenbrightcss.com) utility classes or CSS variables to modify the styles
- ⚡ High performing static sites. 98/100 scores both for mobile & desktop in Pagespeed Insights
- ♿ Accessible - comply with WCAG 2.1. Measured by Pagespeed Insights, WAVE & Tota11y
- 📰 Included with Open Graph tags
- 📱 Fully Responsive & mobile-friendly landing page
- 👌 Comes with & smooth animations

## 🚀 Getting started

1. Download the source code from Github Releases
2. `cd` into the folder & run `npm install`
3. After that, run `npm run dev` to start the local development server
4. Customize the website
5. Deploy into your favorite hosting
6. It's done!

## 🎨 Customization

Zauberhaft is built with Ravenbright CSS library. You can customize the template with using either:

- [Utility classes](https://ravenbrightcss.com/docs/utilities/background)
- [CSS variables](https://ravenbrightcss.com/docs/customize/cssvariables)

## ⚙️ Development

1. Type `npm run dev` on CLI
2. Open `localhost:8000` to view the website

## ✅ Build process

1. Type `npm run build` on CLI
2. Run `npm run serve`
3. Open `localhost:9000` to see the build result & it's done 🎉. Your website is ready to deploy 🚀

## ☁️ Deploy

### Deploy to Netlify

Clone this repository and deploy to Netlify:

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


## 🤝 Credits & attributions

- Post-processor tool: [PostCSS](https://postcss.org)
- React framework: [Gatsby](https://gatsby.org)
- Photos are courtesy of [Unsplash](https://unsplash.com)
- Typeface: `Satoshi` by [Indian Type Foundry](https://www.fontshare.com/fonts/satoshi)
- Placeholder Logo are courtesy of [Logoipsum](https://logoipsum.com)
- Icons are courtesy of [Tabler](https://tabler-icons.io/), [Akar Icons](https://akaricons.com/), [Feather Icons](https://feathericons.com/), [Font Awesome](https://fontawesome.com/), and [GitHub Octicons](https://octicons.github.com/)

## 📝 License

Zauberhaft Gatsby template is licensed under the [Apache License 2.0](https://github.com/ariqnrnns/zauberhaft-gatsby/blob/main/LICENSE.md)

反馈内容错误