首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Gatsby 创建一个博客

它通过构建通过服务器端渲染将动态的 react 组件呈现为静态 HTML 内容。...安装了这些功能插件之后,我们将编辑 gatsby-config.js。Gatsby 构建加载指定插件的公开功能。...接下来:以编程方式创建必要的静态页面(并将模板注入)与 Gatsby 的 Node API,让我们开始吧。 此时需要注意的一点是,GraphQL 查询构建进行的。...我们将使用这些数据来构建一个包含盖茨比的页面。我们的 GraphQL“形状”直接反映在这个数据对象中,因此,当我们GraphQL博客文章模板中查询,我们从该查询中提取的每个属性都将可用。...每一次我们构建 Gatsby , createPage 将被调用,Gatsby 将会创建一个静态的 HTML 文件路径根据我们帖子的前面专门写的 frontmatter。

2.5K30

如何利用机器学习和Gatsby.js创建假新闻网站​

,请查看最后的GitHub Gatsby.js 为了构建一个可以无限扩展且加载速度非常快的博客,我们需要一个能够构建和渲染静态资源的框架,这些静态资源可以很容易地部署web服务器上。...网站配置 现在我们已经设置了Gatsby站点,并预先打包了基本的静态web资源后,实际添加内容之前,我们应该了解站点的基本组件并正确配置它们。 当你设置一个Gatsby网站,你会得到一堆文件。...gatsby-node.js 此文件用于实现api。这些api可以使用GraphQL从数据层中获取数据。处理程序化页面生成,我们将更深入地研究这个文件的内容。...Gatsby构建在React之上,而React是一个JavaScript库,它使使用称为“组件”的构建构建用户界面变得更加容易。...develop或gatsby build,代码就会自动生成所有内容!

4.5K60
您找到你想要的搜索结果了吗?
是的
没有找到

一杯茶的时间,上手 Gatsby 搭建个人博客

一次换系统之后,项目终于构建不了了,包冲突处理起来非常头疼,也影响到了写博文的兴致。 拖延了一段时间后,终于开始考虑更换框架。... Gatsby 中,根据 js 文件的位置不同,使用 GraphQL 有两种形式,且 Gatsby 对其做了魔法, src/pages 下的页面可以直接 export GraphQL 查询,在其它页面需要用...一个快速上手的方式是访问项目开发(默认 http://localhost:8000)的 /___graphql 页面,通过 GraphiQL 编辑器右侧可以浏览所有能够查询的资源。...我修改 starter 踩到一个坑是复制组件忘了修改 static query 查询语句的名称,导致重名报错。 避免错误最好方式是 GraphiQL 编辑器中写好运行无误再复制到组件中。...另外一种处理方式是 /gatsby-node.js 中通过 onCreateNode 钩子,在生成 markdown 相关节点手工处理,确保节点存在。

3.2K20

【Web架构】静态站点生成器概述 Gatsby ,Hugo 和Jekyll对比

本文中,您将看到三种最好的静态站点生成器的比较,它们的优点、缺点以及您应该使用它们的原因。 静态站点生成器使构建静态站点轻而易举。...Gatsby还支持GraphQL,这意味着数据查询变得更加容易。由于有了GraphQL, Gatsby可以生成能够访问和利用来自不同来源的数据的站点。...您将在使用Gatsby看到,生成的站点是进步的Web应用程序。PWAs提供了很好的用户体验,它们是web和移动应用程序的完美结合——从两方面挑选特性。...雨果(Hugo) 开发人员称之为“世界上最快的网站构建框架”(Hugo),这绝非偶然。 《雨果》是用Golang 写成的,于2014年发行。...结论 静态站点生成器有助于使静态站点易于构建、修改和扩展。本文中,您已经看到了三种最好的静态站点生成器。您应该能够更好地决定下一个静态站点项目使用哪种工具。 有什么问题吗?

2.9K20

学习gatsby,从这里开始!

--- 二、Gatsby 简介 1、图解系统结构 数据统一:从 不同数据源(下图中 CMS、Private API 等) 获取数据,形成统一的数据结构( GraphQL Data Layer) 数据查询...--- 三、安装 Gatsby 并新建网站 Gatsby Node.js 的基础上建立,使用 Gatsby 之前必须先安装 Node.js 且版本 ≥ 12.13。...当只能用 http://www.example.com/blog 这个域名,而不能用 http://www.example.com 来发布网站Gatsby 项目中应该怎么设置?...--- 七、部署 怎么部署发布gatsby项目? 第一步:有一个备案过的域名。可以阿里云上进行域名注册和备案; 第二步:需要一个服务器。...同样也可以阿里云上购买一个ESC; 第三步:阿里云后台设置域名解析到第二步的服务器; 第四步:服务器上安装nginx; 第五步:开发机器上编译 gatsby 项目 gatsby clean gatsby

2.1K20

创建 React 应用的 7 种方式,你用过几种?

运行 npm run start 启动脚本, React 应用程序应该在端口 8080 上运行,此时我们可以本地开发 react 应用了 配置 proxy 代理 开发,需要请求接口,而接口往往是由后端同学完成的...vite 采用浏览器支持 ES 模块来解决开发构建缓慢的问题,使用 esbuild 预构建依赖(开发不会变动的纯 JavaScript 代码,一般是 node_modules 中的第三方包)。...创建 gatsby 应用 npm init gatsby 命令行中选择开发语言,是否使用 CMS、是否支持、md、mdx 等 创建完成后,命令行运行 npm run dev,打开 http://localhost...:8000/ 看下效果 打开 http://localhost:8000/___graphql 运行 graphql 语言查询 比如创建一个博客列表,可以代码中直接导出一个 graphql 查询语言...,然后函数中使用查询的数据进行渲染。

6.4K10

2018 年前端开发五大趋势

那些喜欢“简洁”Javascript编码的开发者刚接触Angular 如果我们总结一下上述不同的框架所克服的各种问题,我们可以说Angular是一个久经考验的框架,通过适当的模块化处理,使得它可以构建出可扩展的解决方案...想象一下,你需要在正在构建的社交网络框架中显示帖子列表,以及用户的喜好(点赞、收藏等)。实现方面,这个例子很简单,你只需从下一个数据库端点发出请求。...Gatsby 如果你的预算比较紧张,但是同时又希望在你的项目中只使用高级技术,那么你一定要尝试 GatsbyGatsby 是 Kyle Matthews 为静态网站的创建而构建的新型解决方案。...从1.0版本开始,Gatsby 使用了上面提到的 GraphQL。因此,构建过程,它可以从多个 GraphQL API 中获得数据,然后使用它们创建一个完全静态的 React 客户端应用程序。...特别是,得亏 StoryBook,你可以独立的环境中设计和策划应用程序外的 UI 组件,并且创建新的 UI 组件它会发生变化。

2.9K40

你的博客用不着什么JavaScript框架

那么如何在构建 Gatsby 网站避免那些因为大量使用 JS 而带来的固有问题呢?当然,我们应该尽量删掉那些 JavaScript。...用不着针对什么新的打包器来调整前端构建流程,我只需放入现有的 webpack 文件和 src 文件夹即可。使用并发包,我可以 Eleventy 的 serve 过程中同时运行构建脚本。...我挑选了一些不需要添加客户端 JavaScript 也能添加功能的插件: 帖子中显示代码段,通常会包含特定于语言的语法高亮显示。...这个插件可以构建获取并渲染推文,这样只需少量 HTML 和 CSS 即可,根本不需要额外的 JavaScript。 与其他新技术一样,Eleventy 缺少某些更加成熟的工具所提供的功能。...我并不是推荐大家都删除自己网站上的所有 JavaScript 文件,但从现在开始,构建网站我会尝试将 JavaScript 视为可选的额外功能,而不是体验的基本组成部分。我鼓励你也这样做。

4.1K10

React服务器组件入门

Waku(wah-ku)或わく日语中意为“框架”。作为 一个极简的 React 框架,它旨在加速初创公司和机构的开发人员构建中小型 React 项目的工作。...Gatsby 中,你从未使用 GraphQL(一个普遍的误解)获取数据;相反,你正在查询它。...数据的获取发生在构建,但是使用 useStaticQuery 钩子,你可以从任何组件、任何级别访问数据,而无需通过道具传递它们。...使用 RSC,数据获取发生在运行时,因此虽然 RSC 和 Gatsby 的 useStaticQuery 钩子之间获取数据的方法不同,但当你能够从任何组件内部访问数据,对架构选择有一些值得称道的地方。...最后的想法 在我看来,RSC 只是构建数据密集型 React 应用程序时可用的另一种选择。我认为它们不会解决每个用例,它们也不是为了解决每个用例而设计的。

10610

Sentry 官方 JavaScript SDK 简介与调试指南

@sentry/gatsby: Gatsby 的 SDK。 @sentry/nextjs: Next.js 的 SDK。...@sentry/react 将构建 react 包、它的所有依赖项(utils、core、browser 等),以及所有依赖它的包(目前是 gatsby 和 nextjs))。...运行测试 运行测试与构建的工作方式相同 - 项目根目录运行 yarn test 将对所有包运行测试,特定包中运行 yarn test 将为该包运行测试。还有一些命令可以每个位置运行测试的子集。...调试测试 如果您在编写测试遇到麻烦并需要调试其中之一,您可以使用 VSCode 的 debugger 来完成。...这样,当您遇到断点,您就会知道您到达了有问题的测试的一部分。 Linting 与构建和测试类似,linting 可以通过调用 yarn lint 项目根目录或单个包中完成。

2.4K20

Gatsby还是Next.js,微言码道官网折腾事记

V4版本•升级Material UI至最新的MUI 5•生产打包添加gzip支持,优化网站请求大小 技术构建背景 微言码道的官网是基于Gatsby + Cockpit CMS + MUI构建而成。...其中Gatsby是基于React的静态网站生成框架,而 Cockpit cms则是存储网站内容的headless cms。 最初的技术选型,有考虑过hexo以及Wordpress两个选项。...因此,2020年底了解了Jamstack理念以及基于React的Gatsby技术后,决定基于Gatsby完全开发一个网站,这个2021年元旦用了三天假期完成。...从Gatsby V2升级最新V4稳定版 2021年元旦期间做这个网站,当初Gatsby还是V2版本,现在Gatsby已经更新到了V4版本,添加了许多新的功能,优化了网站构建速度等。...为什么没有采用next.js与tailwind css 与一些前端朋友讨论前端网站技术,next.js是被推荐的,tailwind css过往也被提及过。

2.2K30

进击的JAMStack

而Stack用中文的说法就是技术栈(Tech Stack),也就是我们构建应用的时候具体使用到的技术的集合。...Gatsby Demo 由于文章篇幅的限制,我将不在这里为大家讲述Gatsby的具体用法,不过我后面会写一系列文章来教大家如何用Gatsby来免费构建一个比较大的内容网站(CMS),大家可以留意一下。...它是存在于网站构建(build)阶段的一个工具。为了给大家一个直观点的认识,我使用Gatsby搭建了一个简单的个人博客网站,网站的源代码可以我的github仓库找到。...templates: 网站的模板文件夹,该文件夹底下只有一个叫做blog-post.js的模板文件,Gatsby构建网站的时候blogs文件夹底下的每一个Markdown文件都会通过这个模板文件生成一个对应的...当然了我在这里列出来的无论是适用还是不适用JAMStack的应用其实都是一些很笼统的分类,我们实际开发还得具体问题具体分析,根据实际情况来评估我们的应用是不是适合使用JAMStack来开发。

2.8K30

技术前线:一文带你了解Jamstack

* 其二是它的更新比较频繁,每次动态内容的变更都需要重新生成网页 我与Jamstack 事实上,我很久之前就与Jamstack有交集,但直至今年,我计划做微言码道的官网,去了解及调研一些技术,才看到并理解这个概念...这意味着我要构建一个网站,能承载这些东西,我一直构思如何能快速的构建出这么一个东西。...直到我2020年末寻找hexo类似替代方案,无意间发现了gatsby这个别人推荐可以取代hexo做博客的开源技术后,我就开始关注它。...(因为gatsby它的官网中大量提到了它支持各种headless cms) 这简直如获至宝。我一下子就找到了我所需要的东西。...所以,仅仅是2021元旦假期3天左右多一点的时间,我就为微言码道构建了一个完整的官方网站,它是结合headless cms + gatsby构建的,是符合Jamstack理念的。

1.2K10

一文详解动态 Schema

例如,SQL 数据库有预定义的 Schema,但这些 Schema 通常都不能修改,用户只有创建才能定义 Schema。...此后,用户无需像以前一样插入数据严格遵循预先定义的 Schema,可以像在 NoSQL 数据库中一般,以 JSON 格式添加数据。...fields, enable_dynamic_field=True) collection = Collection(name=COLLECTION_NAME, Schema=Schema) 我们通过定义向...过滤查询结合了ANNS(近似最近邻)搜索和基于动态和静态字段的标量过滤,查询的目的是检索满足expr参数中指定条件的数据,输出包括title、author、claps和isbn字段,expr参数允许基于...后续,我们还将在Milvus 2.4 中增强标量索引能力,通过静态和动态字段的倒排索引加速过滤查询,实现动态 Schema 管理和查询的性能和效率提升。

29510

「项目实战」优化项目构建时间

背景 前几天晚上下班的时候, 路过隔壁项目组, 听他们聊项目构建的事: 现在线上打包时间太长了, 修个 bug 1 分钟, 发布一下半小时, 贼难受。...优化后: 正文部分,我将分享的内容主要是: 一些提升 webpack 打包性能的配置 优化大型项目构建时间的一些思考 希望对大家有所启发。...看了一下,线上构建时间五六分钟,不痛不痒,但是应该也有优化空间,于是准备优化一下。 1. 发现问题 既然要优化构建时间, 第一步当然是先发现问题, 找出比较耗时的阶段,再加以优化。...这个插件,我们优化构建内存溢出的问题上, 也做了探索, 感兴趣的可以移步我这篇文章: 项目构建内存溢出了?看看 Node 内存限制 现在我们也开启这个选项。...开启之后, 本地构建的时候, 本地报了个警告: 这个错误, 十分的眼熟, 是之前我们讲过的 import type 的问题: 你不知道的 「 import type 」 修复一下: 问题解决。

1.2K30

15 个 JavaScript 框架的全面概述

迁移挑战:从 AngularJS 迁移到 Angular(或 Angular 主要版本之间)可能会很复杂且耗时,因为版本之间的更改通常会涉及重大的重大更改。...用法 Vue.js 广泛用于 Web 应用程序中构建用户界面。它适用于从小型原型到大规模生产应用的广泛项目。...多年来,Gatsby 不断发展和扩展其功能,成为构建现代高性能网站的首选。 用法 Gatsby 通常用于构建静态网站、博客和电子商务平台。...缺点 学习曲线:虽然 Gatsby 简化了网站开发,但它确实需要熟悉 React 和 GraphQL。刚接触这些技术的开发人员深入了解 Gatsby 之前可能需要花时间了解其基础知识。...构建时间和复杂性:对于具有大量数据源的大型网站来说,Gatsby 的静态站点生成过程可能非常耗时。当集成多个数据源或处理复杂的数据转换构建过程可能会变得复杂。 12.

5.5K10
领券