前端静态站点Web框架【免费下载链接】gatsbyReact-based framework with performance, scalability, and security built in.项目地址https://gitcode.com/gh_mirrors/ga/gatsby点击查看免费下载gatsby-starter-blog是 Gatsby 官方开箱即用的博客脚手架位于本仓库的 starters/blog 目录。它内置了 Markdown 内容管线、SEO、RSS、图片优化与 PWA Manifest 等完整能力让你无需从零配置即可快速启动一个基于 React 的高性能博客站点。读完本文你将掌握该 Starter 的目录结构、核心配置文件gatsby-config.js/gatsby-node.js的每个细节、从 Markdown 到页面的数据流原理以及如何定制、构建和部署自己的博客。一、Blog Starter 是什么开箱即用的博客脚手架Blog Starter 是 Gatsby 官方维护的博客模板README 中将其定位为 Gatsbys blog starter——一个打包好主要 Gatsby 配置文件的博客样板boilerplate。它借助 blazing fast app generator for React即 Gatsby以极低成本让项目跑起来。从仓库实际内容看这个 Starter 自带了一整套完整能力Markdown 内容管线通过gatsby-source-filesystem读取 content/blog 下的 Markdown再由gatsby-transformer-remark转成可查询的节点批量页面生成通过gatsby-node.js的createPagesAPI 为每篇文章自动生成独立页面SEO 与社交分享提供 seo.js 组件统一输出 title、description、Open Graph 与 Twitter Card 元信息RSS 订阅内置gatsby-plugin-feed构建时自动生成/rss.xmlPWA 支持内置gatsby-plugin-manifest生成 Web App Manifest 与图标图片优化集成gatsby-plugin-image、gatsby-plugin-sharp与gatsby-transformer-sharp代码高亮集成 PrismJS 主题构建时对代码块着色。此外该 Starter 采用0BSD 许可证见 LICENSEREADME 明确指出它只是一个占位符你可以放心替换为自己的许可证。二、五分钟快速上手创建站点并启动开发2.1 创建新站点使用 Gatsby CLI 创建新站点本仓库中的 Starter 源码位于starters/blog可以直接基于本地路径创建# 基于仓库内的 blog starter 创建新站点 gatsby new my-blog-starter ./starters/bloggatsby new也支持交互式模板选择或官方远程模板方式不同但结果一致。2.2 启动开发服务器进入新站点目录并启动开发模式cd my-blog-starter/ gatsby develop启动成功后你的站点运行在http://localhost:8000。与此同时还会暴露第二个链接http://localhost:8000/___graphql——这是 Gatsby 内置的GraphiQL 调试工具你可以在其中实时实验数据查询、浏览整棵数据层并编写页面要用的 GraphQL 查询。这是理解数据从哪来、如何取的最直观入口。2.3 编辑页面实时预览用任意代码编辑器打开my-blog-starter目录并编辑src/pages/index.js保存后浏览器会实时刷新。首页的文章列表由 GraphQL 查询驱动通过allMarkdownRemark(sort: { frontmatter: { date: DESC } })按日期倒序取出全部文章节点并渲染标题、日期与摘要见 src/pages/index.js。2.4 生产构建与常用脚本package.json 中定义了完整的脚本命令命令说明npm run develop启动开发服务器gatsby develop别名startnpm run build生产构建输出静态站点到public/npm run serve本地预览生产构建产物gatsby servenpm run clean清除 Gatsby 缓存.cache与public解决缓存类疑难问题npm run format用 Prettier 格式化**/*.{js,jsx,ts,tsx,json,md}典型发布流程是npm run clean→npm run build→npm run serve验证产物再部署public/目录。三、项目结构全览每个文件与目录的职责README 给出了典型 Gatsby 项目的顶层结构结合本仓库实际内容可展开如下. ├── node_modules # npm 自动安装的项目依赖 ├── content # 博客内容源Markdown 文章 │ └── blog ├── src # 前端源码组件、页面、模板、样式、图片 ├── static # 原样拷贝到站点根目录的静态资源favicon.ico、robots.txt ├── .gitignore # 告诉 git 哪些文件不跟踪、不纳入版本历史 ├── gatsby-browser.js # 浏览器端 API 定制入口 ├── gatsby-config.js # 站点主配置元数据与插件 ├── gatsby-node.js # Node 端 API构建期数据加工与页面生成 ├── gatsby-ssr.js # 服务端渲染SSR定制入口 ├── LICENSE # 0BSD 许可证占位 ├── package.json # Node 项目清单依赖、脚本、元信息 └── README.md # 项目说明文档各关键文件的职责如下。gatsby-config.js站点主配置README 指出这是 Gatsby 站点的主配置文件用于指定站点元信息标题、描述等以及要启用的插件。本仓库中的实际配置见 gatsby-config.js下一节将逐项拆解。gatsby-node.js构建期 Node APIREADME 指出该文件承载 Gatsby Node APIs用于定制站点构建过程。本 Starter 在其中实现了 slug 生成、博客页面批量创建与 Schema 类型定制三项能力详见第五节。gatsby-browser.js浏览器端定制该文件用于注册浏览器端扩展。本 Starter 的 gatsby-browser.js 主要做四件事import fontsource-variable/montserrat // 标题字体可变字体 import fontsource/merriweather // 正文字体 import ./src/normalize.css // 跨浏览器样式归一化 import ./src/style.css // 自定义样式 import prismjs/themes/prism.css // 代码块高亮主题gatsby-ssr.js服务端渲染定制gatsby-ssr.js 通过onRenderBody为生成的 HTML 设置langen属性这是一个典型的 SSR 定制点——你可以在此注入html属性、前置样式或第三方脚本exports.onRenderBody ({ setHtmlAttributes }) { setHtmlAttributes({ lang: en }) }src目录站点的源代码README 说明src是 source code 的约定目录包含你在浏览器中看到的一切。本 Starter 的 src 实际组织为src/pages/路由页面index.js为首页文章列表404.js为 404 页using-typescript.tsx演示 TS 用法src/templates/页面模板blog-post.js是文章详情页模板src/components/可复用组件layout.js负责整体布局、bio.js渲染作者简介、seo.js输出 SEO 元信息src/images/静态图片资源站点图标、作者头像src/normalize.css与src/style.css全局样式。content目录Markdown 内容源这是博客的灵魂所在。本 Starter 自带三篇示例文章hello-world、my-second-post、new-beginnings。每篇文章都是一个含 YAML frontmatter 的 Markdown 文件frontmatter 提供title、date、description等结构化元数据正文即文章内容。四、核心配置解析gatsby-config.js 逐项拆解gatsby-config.js 由siteMetadata与plugins两大块组成。4.1 siteMetadata站点全局元数据module.exports { siteMetadata: { title: Gatsby Starter Blog, author: { name: Kyle Mathews, summary: who lives and works in San Francisco building useful things., }, description: A starter blog demonstrating what Gatsby can do., siteUrl: https://gatsbystarterblogsource.gatsbyjs.io/, social: { twitter: kylemathews, }, }, // ... }这些字段会注入数据层任何组件都可通过 GraphQL 查询site { siteMetadata { ... } }取用。比如 bio.js 用useStaticQuery读取作者姓名与简介seo.js 读取站点描述与 Twitter 账号。改站点名称、作者信息时只需修改这里。值得注意的是siteUrl必须与部署域名一致否则 RSS 中生成的绝对 URL 会是错的。4.2 插件清单从内容到产物的完整链路配置中共启用了八个插件含两个带参数配置插件作用gatsby-plugin-image图片优化组件提供StaticImage/GatsbyImagegatsby-source-filesystemblog将content/blog目录注册为文件节点源name: bloggatsby-source-filesystemimages将src/images目录注册为图片源name: imagesgatsby-transformer-remark将 Markdown 转为MarkdownRemark节点并挂载三个子插件gatsby-transformer-sharp让文件节点具备 Sharp 图像处理能力gatsby-plugin-sharp提供图像处理底层能力gatsby-plugin-feed生成 RSS 订阅文件gatsby-plugin-manifest生成 PWA Web App Manifest文件系统源双数据源注册{ resolve: gatsby-source-filesystem, options: { path: ${__dirname}/content/blog, name: blog, }, }, { resolve: gatsby-source-filesystem, options: { name: images, path: ${__dirname}/src/images, }, },path是必填的目录绝对路径name用于给数据源命名、便于查询定位。第一个源喂给 Markdown 管线第二个源供图片组件使用例如bio.js中的头像src../images/profile-pic.png。Remark 转换器及其子插件链{ resolve: gatsby-transformer-remark, options: { plugins: [ { resolve: gatsby-remark-images, options: { maxWidth: 630 }, }, { resolve: gatsby-remark-responsive-iframe, options: { wrapperStyle: margin-bottom: 1.0725rem }, }, gatsby-remark-prismjs, ], }, },gatsby-remark-images处理 Markdown 内嵌图片maxWidth: 630限定图片最大渲染宽度为 630px超出则按比例压缩gatsby-remark-responsive-iframe让嵌入的 iframe如 YouTube响应式自适应wrapperStyle控制外层包裹元素的内边距gatsby-remark-prismjs配合 gatsby-browser.js 中引入的prismjs/themes/prism.css为代码块提供语法高亮。RSS 订阅gatsby-plugin-feed配置了一个输出到/rss.xml的订阅源包含两部分站点级查询取出siteMetadata的 title、description、siteUrlFeed 定义serialize回调将allMarkdownRemark的每个节点映射为订阅条目url/guid用siteUrl slug拼接custom_elements注入完整 HTML 正文query按date DESC排序取文章output指定输出路径title为订阅源标题。PWA Manifestgatsby-plugin-manifest{ resolve: gatsby-plugin-manifest, options: { name: Gatsby Starter Blog, short_name: Gatsby, start_url: /, background_color: #ffffff, display: minimal-ui, icon: src/images/gatsby-icon.png, }, }name/short_name是应用全称与短名start_url为启动路径background_color为启动屏背景色display: minimal-ui指定浏览器 UI 样式icon相对站点根目录指向图标文件。这些配置共同构成可安装 Web 应用的基础theme_color已被注释可按需开启。五、数据流与页面生成gatsby-node.js 源码解析gatsby-node.js 实现了三个 Node API串起了Markdown → 节点 → 页面的完整管线也对应 README 中 createPages 允许定制构建过程 的说明。5.1 onCreateNode为文章生成 slugexports.onCreateNode ({ node, actions, getNode }) { const { createNodeField } actions if (node.internal.type MarkdownRemark) { const value createFilePath({ node, getNode }) createNodeField({ name: slug, node, value }) } }每当数据层新增节点若其类型为MarkdownRemark就调用gatsby-source-filesystem导出的createFilePath根据文件相对路径推导出 slug如hello-world/并通过createNodeField挂到节点上供后续查询使用。5.2 createPages批量创建文章页与前后篇导航exports.createPages async ({ graphql, actions, reporter }) { const { createPage } actions const result await graphql( { allMarkdownRemark(sort: { frontmatter: { date: ASC } }, limit: 1000) { nodes { id fields { slug } } } } ) // ... }先按日期升序拉取最多 1000 篇文章仅取id与slug随后为每篇调用createPageposts.forEach((post, index) { const previousPostId index 0 ? null : posts[index - 1].id const nextPostId index posts.length - 1 ? null : posts[index 1].id createPage({ path: post.fields.slug, component: blogPost, context: { id: post.id, previousPostId, nextPostId }, }) })要点component指向 src/templates/blog-post.jscontext中的id、previousPostId、nextPostId会以 GraphQL 变量的形式注入模板查询驱动文章正文与上一篇/下一篇导航查询出错时调用reporter.panicOnBuild使构建立即失败并打印错误信息若content/blog下没有任何 Markdown 文件则跳过建页逻辑首页会提示 No blog posts found。5.3 createSchemaCustomization显式类型定义exports.createSchemaCustomization ({ actions }) { const { createTypes } actions createTypes(...) }为SiteSiteMetadata、Author、Social、MarkdownRemark的frontmatter与fields显式声明类型如date: Date dateformat。README 未展开、但值得了解的意义在于即使你从gatsby-config.js删除了某些 siteMetadata 字段或content/blog中暂时没有文章相关查询也会返回null而不是直接报错让站点的骨架在内容空缺时依然可构建。5.4 模板与首页查询数据如何落地为页面文章模板 blog-post.js 的pageQuery展示了三块数据的取用markdownRemark(id: { eq: $id })按 context 传入的id取当前文章拿到excerpt(pruneLength: 160)、html与 frontmatterprevious/next分别按$previousPostId/$nextPostId取相邻文章用于渲染← 上一篇 / 下一篇 →导航正文通过dangerouslySetInnerHTML注入post.html并带有schema.org的Article语义标记itemScope/itemPropheadline等利于搜索引擎结构化理解。首页 src/pages/index.js 则用allMarkdownRemark(sort: { frontmatter: { date: DESC } })倒序列出全部文章展示标题、格式化日期formatString: MMMM DD, YYYY与摘要。两处页面都通过导出Head组件配合gatsby-plugin-react-helmet时代的Seo组件注入title与 meta 描述。六、内容创作用 Markdown 与 frontmatter 写文章写博客就是在content/blog下新增目录与 Markdown 文件。以示例文章 hello-world/index.md 为例其 frontmatter 结构为--- title: Hello World date: 2015-05-01T22:12:03.284Z description: Hello World ---三个字段的含义与影响字段说明title文章标题用于页面h1、列表标题与 RSS 条目date发布时间ISO 8601 格式决定文章在列表中的排序位置description文章摘要SEO meta 与列表卡片展示缺省时回退到自动截取的excerpt正文即标准 Markdown。示例文章还演示了常见语法段落与引用块、本地图片[](https://link.gitcode.com/i/9e52983670ec41ac3b8b2348a0017d79)由gatsby-remark-images自动优化、代码块由gatsby-remark-prismjs高亮、表格、列表与多级标题。你只需照此格式新增文件slug、页面、RSS、首页列表都会在下次构建时自动生成。七、站点定制作者信息、SEO、样式与字体7.1 修改作者信息与社交链接作者信息统一配置在 gatsby-config.js 的siteMetadata.author与social中。bio.js 通过useStaticQuery读取并在首页与文章页渲染头像 Written by … 简介。改这里即可全局更新无需动组件代码。7.2 SEO 组件与 Head 导出seo.js 统一生成title、meta description、og:title、og:description、og:type、twitter:card、twitter:creator等标签并支持通过children注入自定义 head 内容。页面只需导出Head并传入title/description即可见 blog-post.js 与 index.js这是 Gatsby 5 推荐的 Head API 用法。7.3 样式、字体与代码高亮全局样式在 gatsby-browser.js 中统一引入Montserrat 可变字体做标题、Merriweather 做正文来自fontsource系依赖自托管字体、无外部请求、normalize.css归一化、style.css自定义布局、prism.css提供代码高亮主题。布局骨架由 layout.js 提供根据是否为首页通过__PATH_PREFIX__判断根路径渲染不同样式的站点头部并统一输出页脚。八、部署与发布README 的 Quick start 特别提供了 Netlify 一键部署入口将仓库推送到 Git 托管平台后在 Netlify 新建站点、关联仓库并选择构建命令gatsby build、发布目录public即可完成部署。该 Starter 的静态输出特性使其几乎适配所有静态托管平台。本地验证产物建议按此流程npm run clean # 清理缓存避免陈旧数据 npm run build # 生产构建输出到 public/ npm run serve # 本地预览生产产物验证后即可发布 public/ 目录部署前务必检查gatsby-config.js中的siteUrl是否已改为你的正式域名否则 RSS 订阅地址会不正确。九、深入学习路径README 建议从从零开始的完整教程切入学习。本仓库恰好维护了完整的中英文文档体系可在仓库内继续深入docs/README.mdGatsby 文档总览docs/docs/programmatically-create-pages-from-data.md对应本文的createPages机制详解docs/docs/creating-slugs-for-pages.mdslug 生成机制详解docs/docs/graphql.md 与 docs/docs/query-filters.md数据查询语言与过滤排序docs/docs/plugins.md插件体系总览starters/README.md本仓库其他 Starter 的横向参考。至此你已经掌握了 Gatsby Blog Starter 从初始化、配置、数据流、内容创作到部署的全链路。下一步就是删掉示例文章写下你的第一篇博客。赞分享前端静态站点Web框架【免费下载链接】gatsbyReact-based framework with performance, scalability, and security built in.项目地址https://gitcode.com/gh_mirrors/ga/gatsby点击查看免费下载相关推荐用 gatsby-starter-wordpress-blog 搭建 Gatsby WordPress 博客从快速初始化到源码级解析用 gatsby starter wordpress blog 搭建 Gatsby WordPress 博客从快速初始化到源码级解析 本文以 starte前端静态站点Web框架security-audit-skill的severity必须等于impact概率×影响度校准法详解security audit skill的severity必须等于impact概率×影响度校准法详解 security audit skill 是一个把编码AI 技能应用安全Wave-U-Net实战教程3步完成多乐器音频分离附代码示例Wave U Net实战教程3步完成多乐器音频分离附代码示例 Wave U Net是一款基于深度学习的音频源分离工具能够直接对原始音频波形进行处理实现人工智能深度学习音频创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/9/21 15:47:45 · 阅读 1.2k 使用 Gatsby Blog Starter 搭建 Markdown 驱动博客：从初始化、定制到部署的完整指南
前端静态站点Web框架【免费下载链接】gatsbyReact-based framework with performance, scalability, and security built in.项目地址https://gitcode.com/gh_mirrors/ga/gatsby点击查看免费下载gatsby-starter-blog是 Gatsby 官方开箱即用的博客脚手架位于本仓库的 starters/blog 目录。它内置了 Markdown 内容管线、SEO、RSS、图片优化与 PWA Manifest 等完整能力让你无需从零配置即可快速启动一个基于 React 的高性能博客站点。读完本文你将掌握该 Starter 的目录结构、核心配置文件gatsby-config.js/gatsby-node.js的每个细节、从 Markdown 到页面的数据流原理以及如何定制、构建和部署自己的博客。一、Blog Starter 是什么开箱即用的博客脚手架Blog Starter 是 Gatsby 官方维护的博客模板README 中将其定位为 Gatsbys blog starter——一个打包好主要 Gatsby 配置文件的博客样板boilerplate。它借助 blazing fast app generator for React即 Gatsby以极低成本让项目跑起来。从仓库实际内容看这个 Starter 自带了一整套完整能力Markdown 内容管线通过gatsby-source-filesystem读取 content/blog 下的 Markdown再由gatsby-transformer-remark转成可查询的节点批量页面生成通过gatsby-node.js的createPagesAPI 为每篇文章自动生成独立页面SEO 与社交分享提供 seo.js 组件统一输出 title、description、Open Graph 与 Twitter Card 元信息RSS 订阅内置gatsby-plugin-feed构建时自动生成/rss.xmlPWA 支持内置gatsby-plugin-manifest生成 Web App Manifest 与图标图片优化集成gatsby-plugin-image、gatsby-plugin-sharp与gatsby-transformer-sharp代码高亮集成 PrismJS 主题构建时对代码块着色。此外该 Starter 采用0BSD 许可证见 LICENSEREADME 明确指出它只是一个占位符你可以放心替换为自己的许可证。二、五分钟快速上手创建站点并启动开发2.1 创建新站点使用 Gatsby CLI 创建新站点本仓库中的 Starter 源码位于starters/blog可以直接基于本地路径创建# 基于仓库内的 blog starter 创建新站点 gatsby new my-blog-starter ./starters/bloggatsby new也支持交互式模板选择或官方远程模板方式不同但结果一致。2.2 启动开发服务器进入新站点目录并启动开发模式cd my-blog-starter/ gatsby develop启动成功后你的站点运行在http://localhost:8000。与此同时还会暴露第二个链接http://localhost:8000/___graphql——这是 Gatsby 内置的GraphiQL 调试工具你可以在其中实时实验数据查询、浏览整棵数据层并编写页面要用的 GraphQL 查询。这是理解数据从哪来、如何取的最直观入口。2.3 编辑页面实时预览用任意代码编辑器打开my-blog-starter目录并编辑src/pages/index.js保存后浏览器会实时刷新。首页的文章列表由 GraphQL 查询驱动通过allMarkdownRemark(sort: { frontmatter: { date: DESC } })按日期倒序取出全部文章节点并渲染标题、日期与摘要见 src/pages/index.js。2.4 生产构建与常用脚本package.json 中定义了完整的脚本命令命令说明npm run develop启动开发服务器gatsby develop别名startnpm run build生产构建输出静态站点到public/npm run serve本地预览生产构建产物gatsby servenpm run clean清除 Gatsby 缓存.cache与public解决缓存类疑难问题npm run format用 Prettier 格式化**/*.{js,jsx,ts,tsx,json,md}典型发布流程是npm run clean→npm run build→npm run serve验证产物再部署public/目录。三、项目结构全览每个文件与目录的职责README 给出了典型 Gatsby 项目的顶层结构结合本仓库实际内容可展开如下. ├── node_modules # npm 自动安装的项目依赖 ├── content # 博客内容源Markdown 文章 │ └── blog ├── src # 前端源码组件、页面、模板、样式、图片 ├── static # 原样拷贝到站点根目录的静态资源favicon.ico、robots.txt ├── .gitignore # 告诉 git 哪些文件不跟踪、不纳入版本历史 ├── gatsby-browser.js # 浏览器端 API 定制入口 ├── gatsby-config.js # 站点主配置元数据与插件 ├── gatsby-node.js # Node 端 API构建期数据加工与页面生成 ├── gatsby-ssr.js # 服务端渲染SSR定制入口 ├── LICENSE # 0BSD 许可证占位 ├── package.json # Node 项目清单依赖、脚本、元信息 └── README.md # 项目说明文档各关键文件的职责如下。gatsby-config.js站点主配置README 指出这是 Gatsby 站点的主配置文件用于指定站点元信息标题、描述等以及要启用的插件。本仓库中的实际配置见 gatsby-config.js下一节将逐项拆解。gatsby-node.js构建期 Node APIREADME 指出该文件承载 Gatsby Node APIs用于定制站点构建过程。本 Starter 在其中实现了 slug 生成、博客页面批量创建与 Schema 类型定制三项能力详见第五节。gatsby-browser.js浏览器端定制该文件用于注册浏览器端扩展。本 Starter 的 gatsby-browser.js 主要做四件事import fontsource-variable/montserrat // 标题字体可变字体 import fontsource/merriweather // 正文字体 import ./src/normalize.css // 跨浏览器样式归一化 import ./src/style.css // 自定义样式 import prismjs/themes/prism.css // 代码块高亮主题gatsby-ssr.js服务端渲染定制gatsby-ssr.js 通过onRenderBody为生成的 HTML 设置langen属性这是一个典型的 SSR 定制点——你可以在此注入html属性、前置样式或第三方脚本exports.onRenderBody ({ setHtmlAttributes }) { setHtmlAttributes({ lang: en }) }src目录站点的源代码README 说明src是 source code 的约定目录包含你在浏览器中看到的一切。本 Starter 的 src 实际组织为src/pages/路由页面index.js为首页文章列表404.js为 404 页using-typescript.tsx演示 TS 用法src/templates/页面模板blog-post.js是文章详情页模板src/components/可复用组件layout.js负责整体布局、bio.js渲染作者简介、seo.js输出 SEO 元信息src/images/静态图片资源站点图标、作者头像src/normalize.css与src/style.css全局样式。content目录Markdown 内容源这是博客的灵魂所在。本 Starter 自带三篇示例文章hello-world、my-second-post、new-beginnings。每篇文章都是一个含 YAML frontmatter 的 Markdown 文件frontmatter 提供title、date、description等结构化元数据正文即文章内容。四、核心配置解析gatsby-config.js 逐项拆解gatsby-config.js 由siteMetadata与plugins两大块组成。4.1 siteMetadata站点全局元数据module.exports { siteMetadata: { title: Gatsby Starter Blog, author: { name: Kyle Mathews, summary: who lives and works in San Francisco building useful things., }, description: A starter blog demonstrating what Gatsby can do., siteUrl: https://gatsbystarterblogsource.gatsbyjs.io/, social: { twitter: kylemathews, }, }, // ... }这些字段会注入数据层任何组件都可通过 GraphQL 查询site { siteMetadata { ... } }取用。比如 bio.js 用useStaticQuery读取作者姓名与简介seo.js 读取站点描述与 Twitter 账号。改站点名称、作者信息时只需修改这里。值得注意的是siteUrl必须与部署域名一致否则 RSS 中生成的绝对 URL 会是错的。4.2 插件清单从内容到产物的完整链路配置中共启用了八个插件含两个带参数配置插件作用gatsby-plugin-image图片优化组件提供StaticImage/GatsbyImagegatsby-source-filesystemblog将content/blog目录注册为文件节点源name: bloggatsby-source-filesystemimages将src/images目录注册为图片源name: imagesgatsby-transformer-remark将 Markdown 转为MarkdownRemark节点并挂载三个子插件gatsby-transformer-sharp让文件节点具备 Sharp 图像处理能力gatsby-plugin-sharp提供图像处理底层能力gatsby-plugin-feed生成 RSS 订阅文件gatsby-plugin-manifest生成 PWA Web App Manifest文件系统源双数据源注册{ resolve: gatsby-source-filesystem, options: { path: ${__dirname}/content/blog, name: blog, }, }, { resolve: gatsby-source-filesystem, options: { name: images, path: ${__dirname}/src/images, }, },path是必填的目录绝对路径name用于给数据源命名、便于查询定位。第一个源喂给 Markdown 管线第二个源供图片组件使用例如bio.js中的头像src../images/profile-pic.png。Remark 转换器及其子插件链{ resolve: gatsby-transformer-remark, options: { plugins: [ { resolve: gatsby-remark-images, options: { maxWidth: 630 }, }, { resolve: gatsby-remark-responsive-iframe, options: { wrapperStyle: margin-bottom: 1.0725rem }, }, gatsby-remark-prismjs, ], }, },gatsby-remark-images处理 Markdown 内嵌图片maxWidth: 630限定图片最大渲染宽度为 630px超出则按比例压缩gatsby-remark-responsive-iframe让嵌入的 iframe如 YouTube响应式自适应wrapperStyle控制外层包裹元素的内边距gatsby-remark-prismjs配合 gatsby-browser.js 中引入的prismjs/themes/prism.css为代码块提供语法高亮。RSS 订阅gatsby-plugin-feed配置了一个输出到/rss.xml的订阅源包含两部分站点级查询取出siteMetadata的 title、description、siteUrlFeed 定义serialize回调将allMarkdownRemark的每个节点映射为订阅条目url/guid用siteUrl slug拼接custom_elements注入完整 HTML 正文query按date DESC排序取文章output指定输出路径title为订阅源标题。PWA Manifestgatsby-plugin-manifest{ resolve: gatsby-plugin-manifest, options: { name: Gatsby Starter Blog, short_name: Gatsby, start_url: /, background_color: #ffffff, display: minimal-ui, icon: src/images/gatsby-icon.png, }, }name/short_name是应用全称与短名start_url为启动路径background_color为启动屏背景色display: minimal-ui指定浏览器 UI 样式icon相对站点根目录指向图标文件。这些配置共同构成可安装 Web 应用的基础theme_color已被注释可按需开启。五、数据流与页面生成gatsby-node.js 源码解析gatsby-node.js 实现了三个 Node API串起了Markdown → 节点 → 页面的完整管线也对应 README 中 createPages 允许定制构建过程 的说明。5.1 onCreateNode为文章生成 slugexports.onCreateNode ({ node, actions, getNode }) { const { createNodeField } actions if (node.internal.type MarkdownRemark) { const value createFilePath({ node, getNode }) createNodeField({ name: slug, node, value }) } }每当数据层新增节点若其类型为MarkdownRemark就调用gatsby-source-filesystem导出的createFilePath根据文件相对路径推导出 slug如hello-world/并通过createNodeField挂到节点上供后续查询使用。5.2 createPages批量创建文章页与前后篇导航exports.createPages async ({ graphql, actions, reporter }) { const { createPage } actions const result await graphql( { allMarkdownRemark(sort: { frontmatter: { date: ASC } }, limit: 1000) { nodes { id fields { slug } } } } ) // ... }先按日期升序拉取最多 1000 篇文章仅取id与slug随后为每篇调用createPageposts.forEach((post, index) { const previousPostId index 0 ? null : posts[index - 1].id const nextPostId index posts.length - 1 ? null : posts[index 1].id createPage({ path: post.fields.slug, component: blogPost, context: { id: post.id, previousPostId, nextPostId }, }) })要点component指向 src/templates/blog-post.jscontext中的id、previousPostId、nextPostId会以 GraphQL 变量的形式注入模板查询驱动文章正文与上一篇/下一篇导航查询出错时调用reporter.panicOnBuild使构建立即失败并打印错误信息若content/blog下没有任何 Markdown 文件则跳过建页逻辑首页会提示 No blog posts found。5.3 createSchemaCustomization显式类型定义exports.createSchemaCustomization ({ actions }) { const { createTypes } actions createTypes(...) }为SiteSiteMetadata、Author、Social、MarkdownRemark的frontmatter与fields显式声明类型如date: Date dateformat。README 未展开、但值得了解的意义在于即使你从gatsby-config.js删除了某些 siteMetadata 字段或content/blog中暂时没有文章相关查询也会返回null而不是直接报错让站点的骨架在内容空缺时依然可构建。5.4 模板与首页查询数据如何落地为页面文章模板 blog-post.js 的pageQuery展示了三块数据的取用markdownRemark(id: { eq: $id })按 context 传入的id取当前文章拿到excerpt(pruneLength: 160)、html与 frontmatterprevious/next分别按$previousPostId/$nextPostId取相邻文章用于渲染← 上一篇 / 下一篇 →导航正文通过dangerouslySetInnerHTML注入post.html并带有schema.org的Article语义标记itemScope/itemPropheadline等利于搜索引擎结构化理解。首页 src/pages/index.js 则用allMarkdownRemark(sort: { frontmatter: { date: DESC } })倒序列出全部文章展示标题、格式化日期formatString: MMMM DD, YYYY与摘要。两处页面都通过导出Head组件配合gatsby-plugin-react-helmet时代的Seo组件注入title与 meta 描述。六、内容创作用 Markdown 与 frontmatter 写文章写博客就是在content/blog下新增目录与 Markdown 文件。以示例文章 hello-world/index.md 为例其 frontmatter 结构为--- title: Hello World date: 2015-05-01T22:12:03.284Z description: Hello World ---三个字段的含义与影响字段说明title文章标题用于页面h1、列表标题与 RSS 条目date发布时间ISO 8601 格式决定文章在列表中的排序位置description文章摘要SEO meta 与列表卡片展示缺省时回退到自动截取的excerpt正文即标准 Markdown。示例文章还演示了常见语法段落与引用块、本地图片[](https://link.gitcode.com/i/9e52983670ec41ac3b8b2348a0017d79)由gatsby-remark-images自动优化、代码块由gatsby-remark-prismjs高亮、表格、列表与多级标题。你只需照此格式新增文件slug、页面、RSS、首页列表都会在下次构建时自动生成。七、站点定制作者信息、SEO、样式与字体7.1 修改作者信息与社交链接作者信息统一配置在 gatsby-config.js 的siteMetadata.author与social中。bio.js 通过useStaticQuery读取并在首页与文章页渲染头像 Written by … 简介。改这里即可全局更新无需动组件代码。7.2 SEO 组件与 Head 导出seo.js 统一生成title、meta description、og:title、og:description、og:type、twitter:card、twitter:creator等标签并支持通过children注入自定义 head 内容。页面只需导出Head并传入title/description即可见 blog-post.js 与 index.js这是 Gatsby 5 推荐的 Head API 用法。7.3 样式、字体与代码高亮全局样式在 gatsby-browser.js 中统一引入Montserrat 可变字体做标题、Merriweather 做正文来自fontsource系依赖自托管字体、无外部请求、normalize.css归一化、style.css自定义布局、prism.css提供代码高亮主题。布局骨架由 layout.js 提供根据是否为首页通过__PATH_PREFIX__判断根路径渲染不同样式的站点头部并统一输出页脚。八、部署与发布README 的 Quick start 特别提供了 Netlify 一键部署入口将仓库推送到 Git 托管平台后在 Netlify 新建站点、关联仓库并选择构建命令gatsby build、发布目录public即可完成部署。该 Starter 的静态输出特性使其几乎适配所有静态托管平台。本地验证产物建议按此流程npm run clean # 清理缓存避免陈旧数据 npm run build # 生产构建输出到 public/ npm run serve # 本地预览生产产物验证后即可发布 public/ 目录部署前务必检查gatsby-config.js中的siteUrl是否已改为你的正式域名否则 RSS 订阅地址会不正确。九、深入学习路径README 建议从从零开始的完整教程切入学习。本仓库恰好维护了完整的中英文文档体系可在仓库内继续深入docs/README.mdGatsby 文档总览docs/docs/programmatically-create-pages-from-data.md对应本文的createPages机制详解docs/docs/creating-slugs-for-pages.mdslug 生成机制详解docs/docs/graphql.md 与 docs/docs/query-filters.md数据查询语言与过滤排序docs/docs/plugins.md插件体系总览starters/README.md本仓库其他 Starter 的横向参考。至此你已经掌握了 Gatsby Blog Starter 从初始化、配置、数据流、内容创作到部署的全链路。下一步就是删掉示例文章写下你的第一篇博客。赞分享前端静态站点Web框架【免费下载链接】gatsbyReact-based framework with performance, scalability, and security built in.项目地址https://gitcode.com/gh_mirrors/ga/gatsby点击查看免费下载相关推荐用 gatsby-starter-wordpress-blog 搭建 Gatsby WordPress 博客从快速初始化到源码级解析用 gatsby starter wordpress blog 搭建 Gatsby WordPress 博客从快速初始化到源码级解析 本文以 starte前端静态站点Web框架security-audit-skill的severity必须等于impact概率×影响度校准法详解security audit skill的severity必须等于impact概率×影响度校准法详解 security audit skill 是一个把编码AI 技能应用安全Wave-U-Net实战教程3步完成多乐器音频分离附代码示例Wave U Net实战教程3步完成多乐器音频分离附代码示例 Wave U Net是一款基于深度学习的音频源分离工具能够直接对原始音频波形进行处理实现人工智能深度学习音频创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考