文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

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

在 Gatsby 中，根据 js 文件的位置不同，使用 GraphQL 有两种形式，且 Gatsby 对其做了魔法，在 src/pages 下的页面可以直接 export GraphQL 查询，在其它页面需要用...这里面查询语句虽然写的是字符串，但其实这些查询语句不会出现在最终的代码中，Gatsby 会先对其抽取[17]。 个人其实不太喜欢魔法，因为会增加初学者的理解难度。...Debug GraphQL Gatsby 魔法带来的另外一个坑是 GraphQL 报错信息不全，可能会默默被吞掉，也可能无法定位到最终文件。...迁移博客需要考虑的一个重要问题便是路径兼容。我们当然不希望迁移后原有的链接无法访问，这不仅影响到 SEO ，更带来了不好的用户访问体验。本文将聊聊怎么让 Gatsby 兼容 Jekyll 式路径。...通过实现自定义路径基本上可以了解 Gatsby 页面生成的方式了。下节中我会继续谈谈其它个性化的配置，如草稿模式和显示上下篇博文。 草稿模式 草稿模式即可以将文章保存为草稿而不被渲染出来。

4.3K20

用 Gatsby 创建一个博客

添加必要的插件 Gatsby 支持使用丰富的插件，很多非常有用的插件都是为了完成普通任务而编写的。...每个公开的属性(在节点上)都可以用于查询。我们正在有效地创造一个GraphQL数据库，然后我们可以通过页面级的GraphQL查询对它进行查询。...注意，我们正在提取一个稍微不同的数据集，具体来说，我们将提取250个字符的摘要，而不是完整的HTML，同时我们还在用格式字符串格式化拖拽日期！GraphQL是很优雅的。...实际的 React 组件是相当琐碎的，需要注意一点，当链接到内部内容时，你应该经常使用 gatsby-link。 如果页面没有通过这个实用工具进行路由，Gatsby 就无法工作。...添加一个 tag 列表和 tag 查询页 提示： gatsby-node.js 文件中的 createPages API 在这里很有用，还有之前的 frontmatter 在特定的博客文章之间添加导航（

3.5K30
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    Vue.js最佳静态站点生成器对比

    https://gridsome.org/ 我们名单上的第三位选手是 Gridsome，它以构建轻巧快速的静态网站而闻名。...与 React 中的 Gatsby 相似，Gridsome 是一个数据驱动的框架。Gridsome 使用一个 GraphQL 层从各种源中获取内容，然后从中动态生成页面。...与 Gatsby 和 Gridsome 类似，Saber 允许你使用你想用的数据来创建静态网站。你可以从不同的文件系统中提取数据。有了 Saber，你就不用操心 GraphQL 了。...尽管 Saber 目前仅支持 Vue.js，但它的团队也计划扩展对 React 的支持。 由于 Saber 仍然是这一领域的新手，因此它的 GitHub 存储库只拿到了 2000 星。...此外，其中一些框架对基于 React 的框架构成了真正的威胁。 例如，Gatsby 和 Gridsome 的行为看起来非常接近。

    6K10

    2018 年前端开发五大趋势

    GraphQL GraphQL是一种有着奇怪语法的API查询语言，由Facebook开发者们开发。它的目的是超越传统的REST APIs的功能，同时简化多个源传输的数据集合。 ?...但是，由于这些数据可能来自不同的来源（例如，如果帖子存储在 MongoDB或Redis中），生成的应用将比舒适的工作慢得多。...这就是GraphQL的用武之地，使用GraphQL而不是使用单独的端点来访问每个资源。你可以使用单个端点，该端点能够同时处理涉及多个数据源的复杂查询。...Gatsby 如果你的预算比较紧张，但是同时又希望在你的项目中只使用高级技术，那么你一定要尝试 Gatsby。Gatsby 是 Kyle Matthews 为静态网站的创建而构建的新型解决方案。...从1.0版本开始，Gatsby 使用了上面提到的 GraphQL。因此，在构建过程，它可以从多个 GraphQL API 中获得数据，然后使用它们创建一个完全静态的 React 客户端应用程序。

    3.8K40

    混合渲染模式：SSG 与其他技术的结合

    现代前端开发中，SSG（Static Site Generation，静态网站生成）是一种前沿的技术理念。...Gatsby：这是一个基于 React 的 SSG 框架，以其丰富的插件系统和 GraphQL 数据查询功能而闻名。Gatsby 非常适合内容驱动型网站，比如博客和营销页面。...SEO 表现差：由于页面是动态生成的，搜索引擎爬虫难以索引完整内容。扩展性受限：高峰流量时，服务器负载高，响应时间显著增加。解决方案在迁移过程中，该公司选择了 Gatsby 作为 SSG 框架。...其主要操作包括：数据导入：通过 Gatsby 的数据层，连接原有 CMS 数据库，并通过 GraphQL 查询内容。模板创建：为课程页面、博客文章和评论等内容定义不同的 React 模板。...安全性提升：由于页面没有动态生成逻辑，减少了潜在的安全漏洞。可扩展性强：静态文件的分发可以轻松应对高并发访问。局限性构建时间长：对于包含大量页面的大型网站，构建过程可能需要较长时间。

    82200

    塔荐 | 2018 年最值得关注的 JavaScript 趋势

    尽管Facebook从未在这场游戏中领先过，并且在创新的势头上无法与Vue匹敌，但在工具使用、代码切割、路由以及状态管理方面， React加上Next.js能让你在体验上跟Vue接近许多 ，此外还能让你获得大规模的...2017年，他们还推出了 reason-react ，将reason跟Reacy绑定在一起，这样你就可以写出可编译成惯用ReactJS的 Reason代码。...在JS领域Reason今年获得的注意力要比大部分的编译成js型语言多很多，所以这绝对是2018年值得继续关注的趋势之一。...GraphQL GraphQL 是API的查询语言（可以看成是REST的现代版）。...尽管简化配置和改善速度都是很好的改进，如果2018年上半年Webpack没有抄这些改进的话我不会感到奇怪。

    1.9K80

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

    这可能是一个困难的过程，当您打算进行更改时，许多问题会浮出水面，而扩展不是您所期待的。 Gatsby、Hugo和Jekyll是最受欢迎的静态站点生成器中的三种，它们受欢迎的原因有很多。...Gatsby还支持GraphQL，这意味着数据查询变得更加容易。由于有了GraphQL, Gatsby可以生成能够访问和利用来自不同来源的数据的站点。...它支持GraphQL。 大量的插件都是可用的——谈谈庞大的用户社区的好处吧。 解释性教程不难找到，文档也很棒。 缺点 使用Gatsby需要大量的JavaScript、React和GraphQL知识。...优点 它的速度非常快，任何东西都无法与之匹敌。 有很多内置的功能，你几乎不需要第三方插件。 雨果很容易搞定，没有麻烦。 它有适当的文档。 它的模板语言并不难学。...由于加入了GitHub——Tom Preston-Werner是GitHub的联合创始人——Jekyll获得了开源社区的大量关注和贡献。

    3.9K20

    大势 | 2018最值得关注的JavaScript趋势

    尽管Facebook从未在这场游戏中领先过，并且在创新的势头上无法与Vue匹敌，但在工具使用、代码切割、路由以及状态管理方面，React加上Next.js能让你在体验上跟Vue接近许多，此外还能让你获得大规模的...在JS领域Reason今年获得的注意力要比大部分的编译成js型语言多很多，所以这绝对是2018年值得继续关注的趋势之一。...GraphQL GraphQL 是API的查询语言（可以看成是REST的现代版）。...尽管简化配置和改善速度都是很好的改进，如果2018年上半年Webpack没有抄这些改进的话我不会感到奇怪。...Gatsby Gatsby是Kyle Mathews开发的用于React的静态网站生成器。 自从Kyle去年全职开发Gatsby以来，这个东西开始真正获得发展势头。

    1.2K20

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

    它有一个由 GraphQL 支持的数据层，并将所有内容输出到静态文件，使你可以在几乎任何地方托管它。...如果你在开发关注可访问性的单页应用程序，那么你可能会试着使用 JavaScript 来模拟浏览器的行为。Gatsby 试图通过包含一个 RouteAnnouncer 组件来为你解决这个问题。...并非所有字节都是一样的：与同等大小的 JavaScript 文件解析、编译和执行所需的时间相比，图像解码和渲染到屏幕所需的时间要少得多。...这篇文章并不是要批判 Gatsby 而写的。它的背后有一些聪明的头脑，他们已经承认了本文中提到的许多问题，并试图解决它们。...我使用了 loading="lazy"属性来延迟加载图片，但它的浏览器支持不够完整，并且在原生浏览器实现改进之前，它无法在加载图片时淡入淡出。

    5.5K10

    前端领域2017年有哪些变化，2018年又有怎样的期待？

    它还基于抽象语法树进行操作，而不像 Webpack 使用字符串。 除此外，Rollup 的发展也不容小觑。4月 React 团队从 Gulp 切换到了 Rollup 进行开发。...它由微软创建，由于其出色的表现赢得了很多 JavaScript 开发者的追捧，而 Flow提供了一种在不需要激进的重构下更为灵活的方式来引入类型，后者是 Facebook 的成果。...像 Gatsby这样的框架使您能够使用 React 和其他现代工具构建静态网站。不是每个网站都需要或应该成为一个复杂的现代 web 应用。...如果你正在寻找一个很好的例子，React 官方文档就是用 Gatsby 构建的。 在即将到来的2018年中，我们期待： 基于组件应用中的样式是否是组织 CSS 的最佳方式？...WebAssembly 可以取得长足的进步，提供一个更好的 web 体验。 GraphQL 正在并继续挑战 REST。 由于不再有对开源协议上的争议，React 强化了它的地位。

    1.5K100

    一个治愈JavaScript疲劳的学习计划

    其实那篇文章的出现也不算奇怪，我很早就已经认识到 JavaScript 这个生态是可以使人感到困惑的。...然而 REST API 公开了多个REST路由，每个 REST 路由都可以访问预定义的数据集（例如 /api/posts，/api/comments 等），GraphQL 公开了一个端点，可以让客户端查询所需的数据...当你需要查询多个数据源时，这种新策略显得特别有意义。就像买东西的那样，你可以用一个请求就把所有的资源一次性给取回来。...GraphQL 已经在过去的一年或更久得到了很快的发展，已经有很多的项目（例如 Gatsby，我们在第2周用到的）计划着要去使用它了。...Elm 如果 Vue 是一个十分平易近人的框架，则 Elm 是一个很前沿的框架。Elm 不仅是一个框架，而是一种能编译成 JavaScript 的全新语言。

    1K20

    GraphQL到底怎么使？看看智联前端团队技术沉淀

    客户端 我们把客户端调用时发送的数据称为 Query Document（查询文档），是段结构化的字符串，形如： # 客户端发送 query { contractedAuthor: { name...而在研究 GraphQL 时发生的的误解在于： 规范、教程提到 query（查询）时，无法确认是指客户端侧客户端发出的 Query Document 整个操作还是，Document 中的 query 操作...调用合并：经常提到的与 RESTful 相比较优的一点是，当需要获取多个关联数据时，RESTful 接口往往需要多次调用（并发或串行），而基于 GraphQL 的接口调用则可以将调用顺序体现在结构化的查询中...调试：由于我们调用 GraphQL 接口时（如：xxx/graphql/im）无法像 RESTful 接口那样（如：xxx/graphql/im/message、xxx/graphql/im/user）...开发成本：毫无疑问 Resolver（业务行为）的开发在哪种服务模式下都不可缺少，而 Schema 的定义一定是额外的开发成本，且主观感受是 Schema 的开发过程还是比较耗费精力的，数据结构复杂的情况下更为如此

    2.9K20

    为什么我使用 GraphQL 而放弃 REST API？

    在我所开发的那些拥有最复杂 API 应用程序中，网络层设计和维护占去高达 40% 的开发时间，特别是由于我在本文中提到的一些边缘情况。...至此，我再也无法回过头来享受使用 REST 的工作了。 REST 有什么问题吗？ 每个 REST API 都是独特的 公平地说，REST 甚至不是一个标准。...即使是使用像 Moya 这样的辅助库，也会遇到同样障碍：有许多自定义行为需要处理，这是由前面提到的边缘情况引起的。...此外，它非常简单：type块定义新的类型，每个块包含具有自己类型的字段定义。类型可以是非可选的，例如String!字段不能有空值，而String可以。字段也可以有命名参数，所以TodoList!...有很多流行的开源项目都在使用 GraphQL：这个博客是基于静态站点生成器 Gatsby，它将 GraphQL 查询的结果转换成数据，然后呈现到 HTML 文件中。

    3.3K30

    Vue 备受热捧、VS Code 成主宰！2020 前端开发趋势指南，先干为敬！

    由于大多数抉择已被确立，因此各个公司将其视为一个不错的选择，因为开发人员可以专注于构建产品，而不必花费时间考虑软件包。...由于GraphQL API 提供了完全类型化的架构，因此它也可以与 TypeScript 应用程序很好地集成。...GraphQL 可以通过 GraphQL Code Generator 等工具读取客户端代码中的查询，并将其与架构进行匹配，以提供在整个应用程序中流动的 TypeScript 类型。...在过去的一年中，GraphQL 的下载量增加了一倍，而 Apollo 也开始朝着使用最广泛的框架迈进。 17....由于CSS-in-JS组件可以将 props 插入到样式字符串中，因此简化了动态样式。如前所述，Facebook 甚至认为 CSS-in -JS 可能会成为前端的未来，并即将发布自己的库。

    2.1K10

    GraphQL+Koa2实现服务端API结合Apollo+Vue

    一、GraphQL介绍 1.1 简介 GraphQL 是一种新的 API 的查询语言，它提供了一种更高效、强大和灵活 API 查询。...它弥补了 RESTful API（字段冗余，扩展性差、无法聚合 api、无法定义数据 类型、网络请求次数多）等不足 注意：GraphQL 是 api 的查询语言，而不是数据库。...比如：字段冗余，扩展性差、无法聚合 api、无法 定义数据类型、网络请求次数多 GraphQL 的出现整好弥补了 RESTful APi 的不足 使用 GraphQL 的公司 目前已经有很多的公司在使用...GraphQL（https://graphql.org/users/） 1.2 为什么推荐 GraphQL 而不是 RESTful API 在过去的十多年中，REST 已经成为设计 web api...简单查询文档 带参数查询参考 import gql from'graphql-tag'; export default{      data(){         return { msg: '我是一个

    6.1K42

    如何将Web主页性能提升十倍以上？

    使用 React 时的常规渲染选项 Gatsby.js 允许我们利用 React 与 GraphQL 构建预渲染页面。Gatsby.js 是一款强大的工具，能够直接提供多种性能优化方案。...而我们选择了立足 Fastly 层级对部分 GraphQL 请求进行缓存： 我们的 React 应用会标注出那些可进行缓存的 GraphQL 查询。...在发送 HTTP 请求之前，我们以请求本体为基础构建一条附加 URL 参数，其中包含 GraphQL 查询与变量（我们配合 Apollo Client 使用自定义 fetch）。...这意味着我们可以通过请求本体当中的 GraphQL 查询不断发送 POST 请求，并在无需接触服务器的前提下立足边缘位置完成缓存。 ?...利用持久化 GraphQL 查询并发送 GET /graphql/:queryId 以使用 HTTP 缓存机制。

    4.5K40
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券