本篇文章主要包含以下的内容： 什么是JAMStack JAMStack有什么优势 JAMStack适合什么应用 我的个人思考 什么是JAMStack 概念 JAMStack中的JAM其实是三个词的缩写，...Markdown Mardown是一种轻量级的标记语言。在JAMStack的世界中，Markdown类型的文件通常是用来作为生成静态HTML文件的数据源。...而动态的内容就是那些频繁发生变化的内容，例如游客对我的博客的评论。那么我为什么要区分开这两种类型的内容呢？要回答这个问题我们可以先看看如果使用服务端渲染（SSR）的方案这个博客应用是如何运行的。...JAMStack适合什么应用 既然JAMStack有那么多好处，我们是不是一把梭在所有的项目中都使用JAMStack呢？...可是使用了JAMStack或者说是Gatsby后这些问题就迎刃而解了，因为我可以继续使用我熟悉的React技术栈来快速开发Web应用，还无需考虑服务端渲染的问题就可以达到SEO的效果，这不是美滋滋？
用户首次访问 Gatsby 网站时会发生这些事情： 用户请求一个页面。 服务器将静态生成的 HTML 文档发送到用户的浏览器，然后浏览器开始渲染页面。...如果浏览器需要解析 296kb 的 JavaScript 代码才能显示出博客文章的列表，这就不是什么"渐进增强”，而是用错了工具。...这篇文章并不是要批判 Gatsby 而写的。它的背后有一些聪明的头脑，他们已经承认了本文中提到的许多问题，并试图解决它们。...用不着针对什么新的打包器来调整前端构建流程，我只需放入现有的 webpack 文件和 src 文件夹即可。使用并发包，我可以在 Eleventy 的 serve 过程中同时运行构建脚本。...我并不是推荐大家都删除自己网站上的所有 JavaScript 文件，但从现在开始，在构建网站时我会尝试将 JavaScript 视为可选的额外功能，而不是体验的基本组成部分。我鼓励你也这样做。
使用 RSC，数据获取发生在运行时，因此虽然 RSC 和 Gatsby 的 useStaticQuery 钩子之间获取数据的方法不同，但当你能够从任何组件内部访问数据时，对架构选择有一些值得称道的地方。...数据获取需要思考 然而，使用 RSC，你仍然需要考虑在哪些场景中执行组件级数据获取有意义，而不是路由级数据获取。...在某些情况下，进行单个路由级请求并将结果数据通过道具传递给需要它的组件可能仍然有意义，而不是进行多个组件级数据请求。值得一提的是，采用明智的缓存策略可能会限制多个组件级数据请求的影响。...我认为它们不会解决每个用例，它们也不是为了解决每个用例而设计的。在许多情况下，它们可能不是正确的选择，但这没关系。 正如每个开发人员在其职业生涯中多次对任何给定方法所说的那样，这取决于具体情况。...我从使用 Gatsby 的经验中知道，从组件中轻松访问数据是有好处的。
本周，我将继续就前端之变阐述自己的思考，这一次讲到前端之变的重点：变革与突破 这是前端之变系列的第三篇文章，前两篇分别是： 前端之变（一）：技术的变与不变 前端之变（二）: "不变"的前端 同样，在具体说到前端究竟发生了哪个改变前...，我们要理解变化的本质原因是什么 被限于浏览器的支持中 回到上一篇我讲的不变前端中，我在文章中明显的指出了，前端的变化会有一个分界线，在这个分界线之前，前端有一个最大的困境，就是： 前端技术始终被限制在浏览器的范围之内...HTML不可能脱离浏览器而发展出任何类似的能力。 这也是为什么前些年，页面是由后端技术把持的原因所在，单纯的HTML能力实在太差，就算结合JS的动态能力，也根本无法应对复杂页面。...但如我在上一篇文章所讲，真正来说，现在互联网的主流还是ES5，而不是ES6。 原因在于：浏览器不支持 CSS 再来说，CSS是样式。...比如在PCX中，对于聊天，聊天分很多种类，比如文本，图片，语音，在React中，你可以将这个复杂的页面大而划小，分而治之 ?
我决定做一个小实验，看看一个完全由电脑生成内容的新闻网站(比如华尔街日报)会是什么样子。 这是成品的样子。 ? 我知道它很乏味。更重要的是，它的功能非常强大，外观很容易调整。...基本上，Gatsby.js将帮你创建一个有完整的骨架的网站，你可以调整和重新配置，而不是从头开始构建整个东西。...我使用谷歌Colaboratory，它可以在浏览器中运行Python代码并可以直接访问谷歌Driver。 首先，我需要配置我的谷歌Drive，这样我可以把文章保存到谷歌Drive中。 ?...这个API的好处在于它保存并缓存了谷歌驱动器文件夹的内容，所以即使您的驱动器发生了什么事情，文件还是安全的。...创建页面的两个大步骤是: 1)为本地文件系统中的每个标记文件创建slugs(或唯一的url) 2)使用页面模板使用slugs和通过GraphQL获取的其他信息创建实际的web页面。
本文由图雀社区认证作者 crimx[1] 写作而成，点击阅读原文查看作者的博客，感谢作者的优质输出，让我们的技术世界变得更加美好为什么选 Gatsby 我的博客最初是用 Github Pages 默认的...Gatsby 项目结构 建议使用 Starter 修改着理解 Gatsby，我用的是 Gatsby + Netlify CMS Starter[11]。...为什么用 GraphQL 在上一节介绍了选择 Gatsby 的原因，其中提到了 Gatsby 使用 GraphQL 。大家可能会有疑惑，不是建静态博客么，怎么会有 GraphQL？...通过实现自定义路径基本上可以了解 Gatsby 页面生成的方式了。下节中我会继续谈谈其它个性化的配置，如草稿模式和显示上下篇博文。 草稿模式 草稿模式即可以将文章保存为草稿而不被渲染出来。...这是[27]我的例子。 通过实现这几个功能我们了解了 Gatsby 页面生成的方式以及其 Node APIs 的基本使用。
因此，SEO相关的网站从使用Astro中获益。 image.png 从实现的角度来看，它倾向于多页面应用程序（MPA）的概念，而不是单页面应用程序（SPA）。...使用Astro的优点 以内容为重点的网站 性能 SEO 框架无关（比如React） 使用Astro的缺点 不为动态web应用程序做广告 为什么可能不是React文档中的默认值 框架无关 React不是Astro...的重点 与React的新功能不一致 使用群岛架构，而不是选择性混合 例如，React服务器组件 每次点击链接都要重新加载整个页面 因此不是最好的导航用户体验 这些问题最终会在RSC的Next中得到更好的解决...发生了什么：过去咨询React的初学者被指向旧的文档；但被告知使用带钩子的函数组件。 可能会发生什么：咨询React的初学者被指向新的文档；但会被告知使用Vite而不是Next。...从一个单独的开发者的角度来看，我很期待这次服务端的冒险会带给我们什么。
文末会简要说下为什么没有采纳next.js与tailwind css。...但考虑到WordPress是一个基于PHP及MySQL的产品，其产品形态过重，而微言码道的东西，虽然内容是动态更新，但以静态页面来展现会更轻，更快，更好。...但在使用getStaticProps生成静态页面的开发过程中，每次都会重新请求与处理，这个非常影响体验，导致开发下速度非常慢。难以接受。...而Gatsby的优点在于它有非常多的插件。几乎你想要什么，都要现成的插件来帮你处理。而且有相当一部分是官方的插件。...而MUI则有一整套组件可供使用。 所以，在尝试与权衡后，决定仍然使用了Gatsby+MUI的搭配。 永不停止的折腾 当然，微言码道的官网不会就折腾到此为止。对它的折腾仍然是永不停止的。
您通常希望使用 gatsby develop 来启动本地开发服务器，以验证我们在步骤中所完成的功能。 添加必要的插件 Gatsby 支持使用丰富的插件，很多非常有用的插件都是为了完成普通任务而编写的。...在这一点上，有一种合理的混乱和魔法会发生，特别是在 props 属性注入的时候。什么是 markdownRemark？这个数据支持从何而来？...在这一点上，我们使用 React 组件和几个 GraphQL 查询创建了一个单页静态博客。然而，这不是一个博客！...创建博客列表 我在这一节中没有详细介绍，因为我们已经对我们的博客模板做了一些非常相似的事情！看看我们，我们在这一点上已经是一个专业级的 Gatsby 使用者了！...注意，我们正在提取一个稍微不同的数据集，具体来说，我们将提取250个字符的摘要，而不是完整的HTML，同时我们还在用格式字符串格式化拖拽日期！GraphQL是很优雅的。
为了帮助你在2020年成为前端大师，我收集了9个不同的项目，每个项目都有不同的主题和不同的JavaScript框架或库作为技术栈，您可以构建它们并将它们添加到学习计划中。...您将学到什么 在本教程中，您将学习如何利用Gatsby构建出色的博客，以便在使用React和GraphQL的同时编写自己的文章。...https://blog.bitsrc.io/how-to-build-a-blog-with-gatsby-and-boostrap-d1270212b3dc 我并不是说WordPress总是一个不好的选择...，但是使用Gatsby，您可以在使用React的同时创建高性能网站——这是一个了不起的组合。...还是您会依赖自己喜欢的框架/库，并在2020年完成所有项目？
这可能是一个困难的过程，当您打算进行更改时，许多问题会浮出水面，而扩展不是您所期待的。 Gatsby、Hugo和Jekyll是最受欢迎的静态站点生成器中的三种，它们受欢迎的原因有很多。...让我们看看他们能提供什么。 盖茨比（Gatsby） 由节点。盖茨比是这三款中最新的静态网站生成器。然而，它发展得相当快，并且现在被大量使用。...除了使用Node之外，Gatsby还对客户端使用了response .js。使用反应物.js使Gatsby能够受益于框架呈现DOM的方法，因为组件成为焦点。...选择静态站点生成器 尝试从这三种静态站点生成器中挑选可能是一项困难的任务。它们本身都是伟大的工具。让我们来看看为什么你可能想要选择一个在其余的原因。 ?...您应该能够更好地决定下一个静态站点项目使用哪种工具。 有什么问题吗?你认为还有什么静态网站生成器可以与这三种匹敌?你可以在评论区分享你的想法。 谢谢大家关注，转发，点赞和点在看。
这些年前端发生了天翻地覆的变化，几乎每隔几个月就有新的框架和技术诞生，有些技术可能你还没来得及学习，它就已经成为过去时了。2021年前端会有哪些变化，哪些技术会脱颖而出呢？...JavaScript 依然是最受欢迎的语言 在每年最受欢迎的编程语言排行榜中，javascript一直处于领先地位，而2021年，它依然会是最受欢迎的编程语言。...虽然javascript被很多人喜欢，但是并不是说它就是完美的，而且它的设计貌似并不为完美，这也是现在为什么很多项目都采用typescript进行开发的原因，正是因为TS的出现，让JS焕发了第二春，而JS...ReactJS依然广受欢迎 虽然vue在民间保持了较高的占有率，但是在各大企业中，react还是处于领先的地位。 得益于丰富的组件库，使用react会让你的开发少走不好弯路。...要实现微前端，需要解决模块的耦合分离的问题，需要做到资源的隔离和复用，同时，还需要解决各个模块之间的通信问题，可以说目前微前端还不是非常的成熟，但是对于未来的发展，它一定会成为各个公司一定会不可不使用的技术
技术栈和特性 Angular 8 Firebase 服务器端渲染 CSS 网格布局和 Flexbox 移动，响应迅速 暗色模式 漂亮的界面 我之所以非常喜欢这个项目，其中一个原因是你学到的东西并不是相互独立的...你将学到什么 在这个教程中，你将学习如何利用 Gatsby、React 和 GraphQL 构建一个出色的博客。...我并不是说 WordPress 是一个糟糕的选择，但有了 Gatsby，你可以使用 React 构建一个高性能的网站——这是一个很棒的组合。...如果没有，教程中提供了一个 Quasar 网站的链接，在那里他们会告诉你如何搭建。...从大前端“穿越”到终端，开发者应该必备什么技能？| 解读终端的 2022 VS Code 有多么不安全：一个扩展就可能导致公司 GitHub 中的所有代码被擦除？
那么好吧，我的开发者同胞们，现在我们再来看看2018年怎样。 如果你2017年一整年都与世隔绝或者忙于项目而自顾不暇的话，这篇文章就是给你准备的。 React vs. Vue.js ?...谈到取悦开发者，不要忘了Facebook今年在BSD+Patents的收钱事件中遭遇的史诗般的失败，这惹恼了不少的开发者。...Parcel的卖点是别的打包工具都变得太庞大了，而Parcel的打包速度是Webpack的2倍（使用缓存的时候快10倍）。...Gatsby还利用先进的web技术替其他网页预抓取资源，使得浏览起来快如闪电。 尽管Gatsby无论如何也不会统治这个行业，但却是开发快速静态网站非常出色的解决方案，会不断流行下去。...简而言之：Immutable.js，Facebook的另一个项目，确保了状态不会因为使用不可变对象而发生突变。
这就是GraphQL的用武之地，使用GraphQL而不是使用单独的端点来访问每个资源。你可以使用单个端点，该端点能够同时处理涉及多个数据源的复杂查询。...Gatsby 如果你的预算比较紧张，但是同时又希望在你的项目中只使用高级技术，那么你一定要尝试 Gatsby。Gatsby 是 Kyle Matthews 为静态网站的创建而构建的新型解决方案。...从1.0版本开始，Gatsby 使用了上面提到的 GraphQL。因此，在构建过程，它可以从多个 GraphQL API 中获得数据，然后使用它们创建一个完全静态的 React 客户端应用程序。...这就是为什么静态网站在这些年变得如此流行。除了我们上面描述的明显的优势外，这种页面有一个重要的缺点 —— 它的内容不容易被编辑。...特别是，得亏 StoryBook，你可以在独立的环境中设计和策划应用程序外的 UI 组件，并且在创建新的 UI 组件时它会发生变化。
为了更好地满足用户需求，Milvus 在 2.2.9 中发布了这一功能，数据库 Schema 便可以根据用户添加数据而“动态变化”。...不过，我们发现很多用户对于在向量数据库中使用动态 Schema 的 A、B 面及其作用仍有不少疑问，本文将一一解答。 01.什么是数据库 Schema？ 什么是数据库 Schema？...02.什么是向量数据库 Schema？ 以我们之前的文章《书接上回，如何用 LlamaIndex 搭建聊天机器人？》...为例，下图展示了 1 个 Zilliz Cloud 实例中的 1 条数据： 如果在传统的数据库中定义 Schema，那么针对这条数据，我们需要创建 11 列 Schema。...如何使用 Milvus 向量数据库中的 Dynamic Schema 功能？ 下面的代码片段展示了如何在 Milvus 中开启动态 Schema 功能，以及如何将数据插入到动态字段并执行过滤搜索。
搞程序的Gatsby 作为第一篇正式对外的文章，想了很久要分享什么主题才会比较有意思，还要易上手，还要接地气 那最近也是看到朋友的博客（基于Hexo搭建的），眼馋里面的markdown代码块、时间线timeline...到了该部署的环节，我一拍脑袋，不如摒弃我的小水管server，玩一次地道的云原生部署玩法吧？...网页的本质其实就是一堆按格式书写的字符，即我们常说的HTML（超文本标记语言），文本的内容大概长这样： <!...Cloud表示应用程序位于云中，而不是传统的数据中心； Native表示应用程序从设计之初即考虑到云的环境； Pivotal公司的Matt Stine于2013年首次提出云原生（CloudNative）...开启静态网站托管模式 到这里，网站的托管就完成了，是不是不敢相信？
谈到取悦开发者，不要忘了Facebook今年在BSD+Patents的收钱事件中遭遇的史诗般的失败，这惹恼了不少的开发者。...最终可能会发展成什么样子？Facebook会做它最擅长的东西：抄袭创新者然后世界继续使用React。...Parcel的卖点是别的打包工具都变得太庞大了，而Parcel的打包速度是Webpack的2倍（使用缓存的时候快10倍）。...尽管Gatsby无论如何也不会统治这个行业，但却是开发快速静态网站非常出色的解决方案，会不断流行下去。 Babel 到现在Babel已经没有介绍的必要了，大体上它仍将成为趋势延续下去。...简而言之：Immutable.js，Facebook的另一个项目，确保了状态不会因为使用不可变对象而发生突变。
缺点 使用自定义库可能会遇到挑战。 报告的很多问题涉及了调试的便利性。 它的社区很大，但仍落后于 Gatsby 和 Next.js。 2. VuePress ?...与 React 中的 Gatsby 相似，Gridsome 是一个数据驱动的框架。Gridsome 使用一个 GraphQL 层从各种源中获取内容，然后从中动态生成页面。...用过一段时间的 Saber.js 后，我觉得它更像是 Gatsby、Gridsome 和 Nuxt.js 的组合。...与 Gatsby 和 Gridsome 类似，Saber 允许你使用你想用的数据来创建静态网站。你可以从不同的文件系统中提取数据。有了 Saber，你就不用操心 GraphQL 了。...我希望本文能帮助你找到适合你用例的框架。有任何疑问，请在下面评论。
于我个人而言，我经常看周版面。它让我知道当天的所有事情，并且可以看到接下来几天的要发生什么事情。 值得庆幸的是，日历应用知道用户对这类事情有强烈的偏好，并且切换是“可记忆的（sticky）”。...如果我从周切换到月，并刷新页面，月视图是新的默认视图。 在本教程中，我们将了解如何创建自定义 React 钩子，来编写信息保存本地功能，以便我们在需要时使用它。...如果你的应用是服务端渲染（使用框架比如 Next.js 或者 Gatsby），如果你尝试使用该钩子函数，你将会得到一个错误。...这使得我们可以给 useState 传递一个函数，而不是一个值。当状态 state 被创建时，这个函数只是在组件第一次渲染被执行。...总结 这个钩子函数是一个小而强大的例子，说明自定义钩子如何让我们为解决问题而发明自己的 API。虽然存在帮我们解决这个问题的依赖包，但是我认为了解如何解决这些问题很有价值。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
