GatsbyReact博客工具站启动器

gatsby-blog — Gatsby 博客模板

作者 marcobiedermann

基于 Gatsby 与 React 的 Markdown 博客启动模板，提供标签分组、年度归档、站内嵌入与代码高亮等写作相关功能。

打开源站下载源码 ZIP

看看你的网站会是什么样

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

3 个预览视图

桌面端首页1 / 3

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

桌面端截图首屏预览

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

全部页面与视图 3

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

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

值得关注的模板亮点

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

使用 Markdown 撰写博客文章

支持按标签对文章分组

支持在文章内插入 embeds

提供按年份归档的页面组织方式

代码块使用 Prism 进行语法高亮

提供 clean、develop、format、build、serve 等 npm 脚本

模板详细介绍

这是一个面向 Gatsby 的博客启动模板，内容以 Markdown 撰写，适合作为个人或小型博客的起点。仓库 README 列出的功能包括：用 Markdown 写文章、按标签分组文章、在文章内使用 embeds、按年份归档，以及基于 Prism 的代码语法高亮。

使用方式围绕 npm 脚本展开：安装依赖后可用开发命令启动带热重载的本地环境（默认 8000 端口），用构建命令生成静态文件，用 serve 命令在本地预览构建结果，另有 clean 清除 .cache 与 public 目录、format 调用 Prettier 格式化代码。

模板本身不包含内容管理后台或数据库说明，文章数据来自 Markdown 文件；演示站点部署在 Netlify。仓库采用 MIT 许可，可免费使用、修改、商用与分发，但演示图片、字体、图标等第三方素材需单独核对许可，域名与托管等外部服务可能另行收费。

GatsbyReact博客工具站启动器

适合你的项目吗？

适用场景

搭建以 Markdown 为内容来源的个人博客
需要一个带标签与年度归档结构的写作站点
在文章中展示代码并需要语法高亮的开发者博客
以 Gatsby 静态站点形式部署到 Netlify 等托管平台

适合人群

习惯用 Markdown 写作的个人博主
需要标签分类与年度归档的博客作者
希望以 Gatsby 静态站点起步的前端开发者

上手与定制指南

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

1
先执行 npm install 安装依赖。
2
用 npm run develop 启动默认位于 http://localhost:8000 的热重载开发环境。
3
用 npm run build 生成静态文件，再用 npm run serve 在本地预览构建结果。
4
需要清理缓存时执行 npm run clean，移除 .cache 与 public 目录。
5
代码格式化通过 npm run format 调用 Prettier 完成。

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

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

使用时需要遵守

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

额外费用与待核对事项

该模板是 Gatsby 博客的启动模板，内容以 Markdown 文件为来源，不包含内容管理后台或数据库。
开发环境默认监听本地 8000 端口，需先执行 npm install 安装依赖。
需通过 npm run build 生成静态文件，再自行部署到托管平台。
本地预览前必须先执行构建命令，serve 仅用于测试已构建的站点。
演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 MIT 许可判断。
域名、托管、数据库、支付或 AI 等外部服务可能另外收费。

查看原文依据

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

A starter for [Gatsby](https://www.gatsbyjs.com/) blog powered by Markdown.
README 原文

Start a hot-reloading development environment accessible by default at `http://localhost:8000`.
README 原文

Perform an optimized production build for your static files.
README 原文

Start a local HTTP server for testing your built site. Remember to build your site using `npm run build` before using this command.
README 原文

https://github.com/marcobiedermann/gatsby-blog/blob/main/LICENSE https://github.com/marcobiedermann/gatsby-blog/blob/main/README.md

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

项目核对记录与介绍依据

模板资料

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

这个分数如何计算

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

这个项目需要核对什么

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

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

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

查看具体选型方法 →

介绍的制作与核对状态

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

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

查看当时使用的来源资料

SHA-256: 3891cfc31796b889804a8215b3685e7d0317c954f1464fc51fbc337bc0581a5c

2026-10-01T14:51:26.354Z

来源文件 / 仓库

# Gatsby Blog

[![codecov](https://img.shields.io/codecov/c/gh/marcobiedermann/gatsby-blog)](https://codecov.io/gh/marcobiedermann/gatsby-blog)
[![dependencies Status](https://img.shields.io/david/marcobiedermann/gatsby-blog)](https://david-dm.org/marcobiedermann/gatsby-blog)
[![devDependencies Status](https://img.shields.io/david/dev/marcobiedermann/gatsby-blog)](https://david-dm.org/marcobiedermann/gatsby-blog?type=dev)
[![Netlify Status](https://api.netlify.com/api/v1/badges/e48fac14-ddb2-4848-9373-75c6501ac91e/deploy-status)](https://app.netlify.com/sites/marcobiedermann-gatsby-blog/deploys)
![GitHub Workflow Status](https://img.shields.io/github/workflow/status/marcobiedermann/gatsby-blog/CI)

A starter for [Gatsby](https://www.gatsbyjs.com/) blog powered by Markdown.

## Table of Contents

- [Features](#features)
- [Setup](#setup)
- [Usage](#usage)
- [License](#license)

## Features

- Write posts in [Markdown](https://en.wikipedia.org/wiki/Markdown)
- Group posts by tag
- Use [embeds](https://github.com/MichaelDeBoey/gatsby-remark-embedder) inside posts
- Yearly archive
- Code [syntax highlight](https://prismjs.com/)

## Setup

Install dependencies.

```sh
npm install
```

## Usage

### Clean

Remove the `.cache` and `/public` directories.

```sh
npm run clean
```

### Development

Start a hot-reloading development environment accessible by default at `http://localhost:8000`.

```sh
npm run develop
```

### Format

Format code using [Prettier](https://prettier.io/).

```sh
npm run format
```

### Production

Perform an optimized production build for your static files.

```sh
npm run build
```

### Serving

Start a local HTTP server for testing your built site. Remember to build your site using `npm run build` before using this command.

```sh
npm run serve
```

## License

[MIT](LICENSE) © [Marco Biedermann](https://github.com/marcobiedermann)

反馈内容错误