起步 安装cli npm install-g gatsby-cli Gatsby 带有一个很棒的CLI(命令行接口),它包含了一个工作站点的搭建功能,以及帮助开发该站点的命令。...为了解决我们想要的这个博客的功能,我们将使用以下插件: gatsby-plugin-catch-links 实现了历史 pushState API, 不需要页面重载就可以导航到博客的不同页面 gatsby-plugin-react-helmet...现在我们已经创建了一个带有 frontmatter和一些内容的博客文章,我们可以开始编写一些可以显示这些数据的 React 组件。...创建静态页面 Gatsby 公开了一个强大的Node API,它允许创建动态页面这样的功能(博客文章页!),扩展 babel 或 webpack 配置,修改所创建的节点或页面等。...Links @dschau/gatsby-blog-starter-kit 展示 Gatsby 所有上述功能的可用的库 @dschau/create-gatsby-blog-post 我创建了一个实用程序和
本文由图雀社区认证作者 crimx[1] 写作而成,点击阅读原文查看作者的博客,感谢作者的优质输出,让我们的技术世界变得更加美好为什么选 Gatsby 我的博客最初是用 Github Pages 默认的...Gatsby 项目结构 建议使用 Starter 修改着理解 Gatsby,我用的是 Gatsby + Netlify CMS Starter[11]。...完整的 Gatsby 项目结构可以看文档[12],这里针对搭建博客用到的功能说明一下。 /src/pages 目录下的组件会被生成同名页面。...Gatsby 如何生成特定页面 一般来说,在 /src/pages/ 目录下的组件会自动生成相应路径的页面,但如果是其它类型的文件就不会了。...创建页面 回到我们前面的查询[25],得到需要的数据之后只需要对每个页面调用 actions.createPage 即可。
现在为博客添加标签,方便查看同标签的其它博客。...安装插件 npm install yarn -g yarn add gatsby-plugin-tags 配置插件 在 gatsby-config.js 的 plugins 中添加: { resolve...}, }, 添加、修改文件 参考 https://github.com/rmcfadzean/gatsby-pantry/tree/master/examples/starter-blog 做了适当的修改...title date } } } } } ` export default CategoryTemplate (3) 修改博客模版页面...=tag https://github.com/rmcfadzean/gatsby-pantry/tree/master/examples/starter-blog
Gatsby 是一个为 React 打造的快如闪电的现代化站点生成器 准备工作 本地开发环境 安装 Node.js; 安装 Git; Gatsby 开发环境 Gatsby 的 CLI 工具非常方便,在终端全局安装...build 其他新建网站的方法 除了上面创建基础网站的方式,还能新建一些有基本功能的网站。...gatsby new my-blog-starter https://github.com/gatsbyjs/gatsby-starter-blog gatsby-starter-blog - 官方说明.../gatsbyjs/gatsby-starter-blog-theme gatsby-starter-blog-theme - 官方说明 5、gatsby-starter-theme-workspace...官方说明 Linux配置Nginx 安装Nginx sudo yum install -y nginx 安装node.js sudo yum -y install nodejs 设置应用静态页面路径
本文基于 PAI 搭建博客。...CLI npm install -g gatsby-cli 下载 Gatsby 静态博客 git clone https://gitee.com/aping-dev/gatsby-starter-blog...安装 Gatsby 静态博客的依赖库 耗时几分钟~几小时,据网速而定 cd gatsby-starter-blog/ npm install --unsafe-perm=true --allow-root...--verbose 启动 Gatsby 静态博客 gatsby develop -p 3000 # PAI 中的 nginx 默认代理 3000 端口 也可以将启动命令写入 .pai.yml...pai-instance-document [图片.png] 参考 https://www.gatsbyjs.org/docs/quick-start/ https://github.com/gatsbyjs/gatsby-starter-blog
最后还有成本优势:LAMP stack 服务器得按月付费;Netlify 的免费套餐(每月构建 300 分钟)应该可以轻松覆盖零成本个人博客的需求。...用户首次访问 Gatsby 网站时会发生这些事情: 用户请求一个页面。 服务器将静态生成的 HTML 文档发送到用户的浏览器,然后浏览器开始渲染页面。...这里就有些不对劲——Gatsby 需要你以 React 组件的形式再加载一次页面;在完成多出来的这一步之前,所有需要 JavaScript 的元素(例如按钮、菜单、自定义输入)实际上都不能交互。...如果浏览器需要解析 296kb 的 JavaScript 代码才能显示出博客文章的列表,这就不是什么"渐进增强”,而是用错了工具。...Gatsby Starter Low Tech 博客使用 no-javascript 插件和其他一些技术(包括将所有图像转换为灰度),来帮助你创建一个轻量且节能的博客。
Hexo -- 灵活性欠缺 没有使用hexo开源的博客系列的原因在于,hexo是一个专注于博客的产品,它的灵活性非常欠缺,而我对微言码道的构思中,远不止博客一个内容,还包括电子书,myddd开源项目,视频及音频多种形式...但考虑到WordPress是一个基于PHP及MySQL的产品,其产品形态过重,而微言码道的东西,虽然内容是动态更新,但以静态页面来展现会更轻,更快,更好。...DocSearch是algolia推出的一个非常有价值的服务,主要是为开源博客或技术博客提供文档搜索支持,你只需要向它进行申请就好了。...design则更适合企业后台管理页面。...我的myddd starter的UI也是基于Material UI的。 Material UI最近升级到了MUI,一个重新品牌命名的全新版本。
原文发表于:https://avenirzheng.net/blog/2020/deploying-gatsby-to-tencent-cloud/ 前言 我算经历过个人博客最热闹的那个时代,那时大部分个人博客都是用...WordPress 搭建起来,与传统服务端语言 + 数据库的架构相比,近年流行的静态编译博客,如 Hexo、Jekyll、Hugo 显然更容易部署和维护,这里我选择了 Gatsby,并用 wp-gatsby-markdown-exporter...gatsby new ,然后设置项目名称,例如 site ,选择起始模板 starter gatsby new 最后在切换到刚才的 site 目录,gatsby develop cd /code/avenirzheng.net...Tips: 某些情况下因为代理或者墙的原因,无法使用 Gatsby CLI 从 github 上拉取代码,你可以通过能链通的 npm 源手动创建一个 Gatsby 站点目录。...腾讯云上搭建 Nginx; 腾讯云上搭建 Git; 配置 Nginx 站点 这里为了方便,我们直接用 root 账号为博客设置 Web 目录,在服务器中创建 /www/blog 目录。
虽然 Next.js 最初是用来做服务端渲染的,而 Gatsby.js 主要用来做静态站点生成(例如博客和登录页面等静态网站)。然而,在过去几年里,这两个框架之间一直在互相卷......建议: 优先使用 Vite 创建 React 客户端应用 CRA 备选 优先使用 Next.js 创建 React 服务端渲染应用 最新技术:Remix 仅创建静态站点备选 Gatsby.js 可选的学习经验...:https://github.com/gatsbyjs/gatsby Remix:https://github.com/remix-run/remix ---- 状态管理 React 带有两个内置的...React 现在最受欢迎的表单库是 React Hook Form 。...建议: React Hook Form 集成 yup 或 zod 进行表单验证 如果已经在使用组件库了,看看内置的表单能不能满足需求 链接: React Hook Form:https://react-hook-form.com
,请查看最后的GitHub Gatsby.js 为了构建一个可以无限扩展且加载速度非常快的博客,我们需要一个能够构建和渲染静态资源的框架,这些静态资源可以很容易地部署在web服务器上。...Gatsby.js是一个web应用程序生成器。该框架使用一些web资源,如HTML、CSS和JavaScript,通过各种api加载数据,然后将所有这些资源加载到带有预抓取资源的站点中。...(1)使用gatsby new [yoursite -name]完全从头开始, (2)使用gatsby new [yoursite -name] [starter-git-url]的启动模板, (3)使用我发布在...创建页面的两个大步骤是: 1)为本地文件系统中的每个标记文件创建slugs(或唯一的url) 2)使用页面模板使用slugs和通过GraphQL获取的其他信息创建实际的web页面。...中,为每个markdown文件创建数据节点,然后所有这些节点将与页面模板一起使用,以创建实际的页面。
它带有一些内置的解决方案,例如,用于本地状态和副作用的 React Hooks。 下面的文章将向您提供一些自己总结的方法,以便从补充库中进行选择,从而构建一个全面的 React 应用程序。...Next.js 用于服务器端渲染(如动态 web 应用程序) ,Gatsby.js 用于静态站点生成(如博客、登陆页面)。...例如,gatsby-Firebase-authentication 样板文件只在 Gatsby.js 中为您提供了完整的 Firebase 身份验证机制,但是其他所有内容都被省略了。...所有 React 的内置 hooks 都非常适合本地状态管理。当涉及到远程数据的状态管理时,如果远程数据带有 GraphQL 端点,我建议使用 Apollo Client。...以下是一些流行的解决方案: nivo Victory react-vis Recharts Chart Parts React 中的表单库 在 React 中最流行的表单库是 Formik。
博客网站包含以下的功能: 博客列表页面:展示我发表的所有博客。(静态内容) 博客详情页面:展示每一篇博客的具体内容。(静态内容) 博客评论列表:游客评论博客以及展示游客对这篇博客的评论列表。...首先游客会向SSR服务器发送一个查看某个博客的请求,SSR服务器收到请求后向后端服务请求这个博客的内容然后渲染出一个HTML页面然后返回给用户。...对于那些不经常变动的而且希望被搜索引擎收录的静态内容,Gatsby会在Webpack打包阶段就生成,这样就不需要在用户访问该页面的时候才浪费资源来渲染页面了,而且这些静态文件还可以通过CDN来优化用户体验...例如现在pages底下有两个路由,404的路由对应着的是没找到资源的页面,而index路由则是博客的主页面。...由于这些应用的内容都是由平台用户创建的,而且用户可以不断地修改和删除已经创建的内容,如果使用JAMStack的话网站的内容就需要被频繁构建,这显然是不合理的。 微博,推特这种社交应用。
、处理状态、创建路由、连接到第三方服务,甚至处理身份验证。...04 使用Next.js构建电子商务购物车 你将学到什么: 在这个项目中,你将学习如何设置Next.js开发环境、创建新页面和组件、获取数据和样式并部署一个next应用程序。...Nuxt.js构建完整的多语言博客网站 你将学到什么内容: 这个示例项目将教你从初始设置到最终部署,使用Nuxt.js构建完整网站的全过程。...它利用了Nuxt所提供的许多出色功能,如页面和组件以及SCSS样式。...06 使用Gatsby建立博客 你将学到什么内容: 在本教程中,你将学习如何利用Gatsby构建出色的博客,可以很好地用来撰写自己的文章,同时利用React和GraphQL的能力。
https://www.storyblok.com/tp/nuxt-js-multilanguage-website-tutorial 7.用盖茨比(Gatsby)建立博客 Gatsby是一个很棒的静态站点生成器...您将学到什么 在本教程中,您将学习如何利用Gatsby构建出色的博客,以便在使用React和GraphQL的同时编写自己的文章。...技术栈和功能 Gatsby React GraphQL Plugins and themes MDX/Markdown Bootstrap CSS Templates 如果您想创建博客,这是一个很好的示例...,但是使用Gatsby,您可以在使用React的同时创建高性能网站——这是一个了不起的组合。...这也是一个很棒的静态网站生成器,可帮助您创建出色的博客: ? 您将学到什么 该项目将教您如何构建一个简单的博客,以开始使用Gridsome,GraphQL和Markdown。
Docusaurus 是 Facebook 专门为开源项目开发者提供的一款易于维护的静态网站创建工具,使用 Markdown 即可更新网站。...构建一个带有主页、文档、API、帮助以及博客页面的静态网站,只需5分钟。 ● 启动简单 :Docusaurus的构建可以在很短的时间内启动和运行。...● 可自定义:Docusaurus 可自定义项目需要的关键页面,包括主页,文档部分,博客和其他页面 十、JavaScript 运动引擎 Popmotion https://github.com/Popmotion...十五、Gatsby https://github.com/gatsbyjs/gatsby Star 18245 ? Gatsby 可以使用 React.js 把纯文本转换到动态博客或者网站上。...目标如下: ● 无需重载页面转换 ● 热重载编辑 ● 为构建静态网站创建 React.js 组件模型和生态系统 ● 直观的基于目录的 URLs ● 支持 "Starters"
你将学到什么 在这个项目中,你将学习如何搭建 Next.js 开发环境——创建新的页面和组件、获取数据、样式化和部署 App。...它使用了 Nuxt 提供的许多很酷的功能,比如页面和组件,以及 SCSS。...你应该尝试一下它,因为它也将帮助你成为更好的 Vue 开发者。 7 用 Gatsby 构建一个博客 Gatsby 是一个很好的静态站点生成器,它在底层使用了 React 和 GraphQL。...这个项目看起来是这样的。 你将学到什么 在这个教程中,你将学习如何利用 Gatsby、React 和 GraphQL 构建一个出色的博客。...Gridsome 与 Gatsby 一样,两者都使用 GraphQL 作为数据层,不一样的是 Gridsome 使用了 VueJS。它也是一个很棒的静态站点生成器,可以帮你构建出很好的博客。
在 VuePress 中,每个页面都被视为一个 markdown 文件,它们被渲染为 HTML 页面,并在加载页面时充当一个单页应用程序。...但是,VuePress 针对以内容为中心的静态网站创建做了更多优化,而 Nuxt.js 则更多专注于 Web 应用程序开发。...与 React 中的 Gatsby 相似,Gridsome 是一个数据驱动的框架。Gridsome 使用一个 GraphQL 层从各种源中获取内容,然后从中动态生成页面。...至于 Gridsome 的 GitHub 统计数据,它只有 7000 个星和 100 位孤单的贡献者。此外,Gridsome 还带有一些独特的功能,以同其他产品更好地竞争。...与 Gatsby 和 Gridsome 类似,Saber 允许你使用你想用的数据来创建静态网站。你可以从不同的文件系统中提取数据。有了 Saber,你就不用操心 GraphQL 了。
使用场景 如果你有一堆用 Markdown 编辑的文章,想要发布到网上,又不想浪费时间在编辑排版上,那么用 Gatsby 生成一个博客网站,是一个非常不错的解决方案。...使用 Gatsby CLI 工具,三句命令就可以新建一个静态网站。详情步骤,看这里! --- 四、怎么新增网站页面? 浏览器打开的URL是怎么跟项目中的代码页面 (js文件) 对应起来的?...这种 URL 与 代码文件 之间的对应关系就称之为页面路由。那么Gatsby 中怎么新建代码页面?其页面路由又有哪些规则? 1、新建页面及其路由 详细步骤,看这里!...--- 4、使用 MDX 文件新增页面 MDX文件是指 在 markdown 文件中直接插入 jsx 代码 的混合文件,怎么用在Gatsby中?详细步骤,看这里!...--- 4、head HTML中head部分的数据对于 SEO 极其重要,用 bolog 模板生成的 Gatsby 项目,已经生成了SEO组件(src/components/seo.js),直接使用,完成页面
虽然您可以手动创建静态站点,但这样做有很多缺点。这可能是一个困难的过程,当您打算进行更改时,许多问题会浮出水面,而扩展不是您所期待的。...Gatsby、Hugo和Jekyll是最受欢迎的静态站点生成器中的三种,它们受欢迎的原因有很多。让我们看看他们能提供什么。 盖茨比(Gatsby) 由节点。盖茨比是这三款中最新的静态网站生成器。...由于有了GraphQL, Gatsby可以生成能够访问和利用来自不同来源的数据的站点。 您将在使用Gatsby时看到,生成的站点是进步的Web应用程序。...虽然这听起来好得令人难以置信,但Hugo消除了所有配置或依赖的麻烦,使其使用起来很愉快。 由于其速度快和各种内置功能,您会发现Hugo被用于生成博客和文档。它得到了广泛的应用,并继续得到改善。...与Hugo一样,Jekyll也附带一个HTTP服务器,通常用于生成博客。它也经常用于生成投资组合。 虽然Jekyll对页面内容使用Markdown,但它也使用液体模板语言来处理页面。
1. react-select 一个厉害的,强大的表单下拉选择框的库 代表了一种开发功能强大的 react.js 组件的全新方式,这些组件在完全可定制的同时开箱即用。...一个强大的工具包,能够做出丰富的拖拽页面应用,而且代码具有解耦性。...,可以轻易地创造骨架式的 加载页面(loading)(有点像 Facebook 的卡片加载) 突出的功能 很多插件: 有许多预设可供使用。...DIY: 您可以使用create-content-loader轻松创建自己的加载程序。 React Native 支持: 具有相同强大功能的相同API。...突出的功能 简化了复杂360和VR用户界面的创建。
领取专属 10元无门槛券
手把手带您无忧上云