更现代化的建站方式——Gatsby.js系列教程(一)：简介&搭建环境等

最新推荐文章于 2024-07-24 11:09:48 发布
最新推荐文章于 2024-07-24 11:09:48 发布
阅读量1.8k 收藏 1
点赞数
分类专栏： 建站系列：gatsby.js教程 文章标签： reactjs javascript es6 markdown graphql
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hxx051/article/details/103983305
版权
本文是Gatsby.js系列教程的第一篇，介绍了Gatsby的基本概念、优势及如何搭建开发环境。Gatsby是一个基于React的开源框架，提供现代化技术栈、支持多种数据源和静态生成，适合构建快速网站。教程还涵盖了安装Gatsby CLI、创建网站及选择编辑器的步骤，适合有一定HTML、CSS、JavaScript基础的开发者学习。
摘要由CSDN通过智能技术生成

作为一名程序员，或许都有着建立一个个人网站或博客的想法。

在平台太寄人篱下，老牌CSDN、博客园…后起之秀掘金、思否、简书甚至知乎…都是如此，动不动就审核不通过、违规、删帖、限流…虽然很多时候我们都不知道怎么违规：）

这很打击创作热情！影响写文兴致！

所以很多人把主力空间转而选择Github Pages、CDN甚至买vps、服务器，来搭建自己的网站，静态或动态。这是自己的地盘！我的地盘我做主！

关于建站或者搭建博客，你可能听说过很多神兵利器：Wordpress、Jekyll、Hugo、Ghost、vuePress、Hexo……而这次我们选择更现代化的Gatsby! 截至目前，它在Github拥有41.4k的Star数量！

在学习Gatsby的过程中，发现中文资料很少。因此打算写一个系列教程，希望可以帮自己总结，也可以帮到后来的学习者：）

下面先让我们来看看Gatsby是什么？它有什么优势？以及如何搭建开发环境、选择编辑器等

Gatsby简介

1. What(是什么)

Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps<

最低0.47元/天 解锁文章
优雅的程序酱
关注
专栏目录
gatsby-docker:构建并托管Gatsby站点的Docker映像
05-06
gatsbyjs / gatsby-docker 用于构建和托管Gatsby站点的Docker映像。 该图像具有两个主要标签： latest -将使用Nginx服务器在生产中为您的资产服务 onbuild构建您的项目并创建一个新的onbuild映像 用法 在项目的根目录下创建一个Dockerfile和.dockerignore ，如下所示： Dockerfile FROM gatsbyjs/gatsby:onbuild as build FROM gatsbyjs/gatsby COPY --from=build /app/public /pub .dockerignore .cache / node_modules / public / 第一个映像将复制您的项目，安装依赖项并进行构建。 构建项目的docker映像： docker build -t myproject/websi
gatsby_零部署：使用Gatsby.js（v1）的静态网站实用指南
culiu9261的博客
07-21 680
gatsbySince the advent of the modern web, performance has been a key consideration when designing a website or a web app. When a website requires no server interaction whatsoever, what is hosted on th...
【React 】开发环境搭建详细指南
最新发布
lph159的博客
07-24 3186
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
打造个人博客的绝佳选择——Gatsby JS，让你的网站速度飞起来！
Coco_Code的博客
01-30 454
Gatsby JS是一个基于React的静态网站生成器，它利用React的组件化思想，将静态页面与动态数据分离，使得开发者可以更加高效地构建高性能的静态网站。
Gatsby 入门指南
weixin_40448589的博客
02-01 666
Gatsby 是一个基于 React 的、免费开源的、用于搭建静态站点的框架。 Fast in every way that matters. 下图是官网首页的截图：描述了 Gatsby 的工作流程 Gatsby 主要的应用的技术是 React 和 GraphQL，利用 Gatsby 搭建一个简单的静态站点，是一个很好的学习过程。本文主要讲解如何从零搭建一个简单的个人博客结构的...
推荐一款基于Gatsby.js和MDX的博客启动器——Gatsby.js MDX Blog Starter Project
gitblog_00048的博客
05-25 295
推荐一款基于Gatsby.js和MDX的博客启动器——Gatsby.js MDX Blog Starter Project 项目地址:https://gitcode.com/rwieruch/gatsby-mdx-blog-starter-project 1、项目介绍 如果你正在寻找一个强大的、可定制的Markdown博客框架，那么Gatsby.js MDX Blog Starter Projec...
blog.yangerxiao.com:React.js 和 Gatsby.js 的个人博客力量
05-31
React.js & Gatsby.js V2 Markdown 写作 支持草稿 Styled Components :nail_polish: 分类 标签 分页 支持 Offline PWA Typography.js SEO Sitemap RSS Schema.org JSONLD(谷歌) OpenGraph Tags（og 元标签） 自动化...
gatsby-plugin-advanced-sitemap:Gatsby.js的高级XML网站地图
04-10
默认的Gatsby站点地图插件会为您的所有页面生成一个简单的原始XML斑点。 这个高级站点地图插件增加了功能和配置，可以生成具有完整XSL模板的单个或多个站点地图，使它们井井有条，人机可读，并链接图像资源以鼓励...
gatsby-tailwindcss-starter:带有TailwindCSS和PostCSS的Gatsby.js入门主题
04-29
Gatsby和TailwindCSS入门 使用带有TailwindCSS的默认样板启动您的项目。 该入门工具随附了主要的Gatsby配置文件，您可能需要使用React的快速应用生成器来快速启动和运行。 还有其他更具体的想法吗？ 您可能需要...
victorzhou.com:我的个人网站+博客。 使用Gatsby.js构建
05-13
这个站点充分利用了现代Web开发技术，特别是Gatsby.js这一强大的静态站点生成器。Gatsby.js是基于React的开源框架，它允许开发者快速创建高性能的静态网站和应用，同时提供了丰富的插件和源数据功能，使得内容管理变...
gatsby-workshop:Gatsby.js的工作坊
05-08
**一、Gatsby.js简介** Gatsby.js是建立在React.js之上的开源框架，用于构建静态网站和应用。它充分利用了现代Web技术，如GraphQL、Webpack和Babel，提供了快速的初始加载速度、离线支持和SEO优化。通过结合服务器...
gatsby-blog：我制作了一个探索gatsbyjs的简单博客
02-15
盖茨比的默认启动器 使用此默认样板启动您的项目。 该入门工具随附主要的Gatsby配置文件，您可能需要使用React的快速应用生成器快速启动并运行。 还有其他更具体的想法吗？ 您可能需要查看我们充满活力的集合。 :rocket: 快速开始 创建一个Gatsby网站。 使用Gatsby CLI创建一个新站点，并指定默认启动器。 # create a new Gatsby site using the default starter gatsby new my-default-starter https://github.com/gatsbyjs/gatsby-starter-default 开始开发。 导航到新站点的目录并启动。 cd my-default-starter/ gatsby develop 打开源代码并开始编辑！ 您的站点现在在http://localhost:8000 ！
浅聊Gatsby静态站点生成器
前端高薪进击手记
03-18 1156
gatsby-remark-images：处理markdown 文章中的图片，以便可以在生产环境中使用，它是作为gatsby-transformer-remark 插件的options 配置选项plugins 使用的。将static中的images文件夹移动到json目录下，使得json数据及依赖的图像放置在相同位置中，并修改json中的图像引用地址，改绝对定位‘/’为相对定位 ‘./’。在页面组件中导出查询命令，框架执行查询并将结果传递给组件的props对象，存储在props对象中的data属性中。
gatsby_如何利用静态站点生成器Gatsby.js来利用您的React技能
cumian8165的博客
08-01 758
gatsbySometimes a dynamic single-page app is overkill. You just need to get some attractive information on the internet. Welcome back to static sites. With the Gatsby.js framework, you don’t have to l...
更现代化的建站方式——Gatsby.js系列教程(二)：了解Gatsby概貌&基础概念
优雅的程序员呀
01-16 621
Gatsby工程目录 创建gatsby工程后(如果不会创建，可参见上节)，用VSCode打开，目录如图所示： 标准的Node工程目录结构，根目录包含一个package.json。 src 源码目录 public 构建后生成到此目录 熟悉一下Gatsby界面 如上节所讲，进入工程根目录，运行$ gatsby develop以启动开发模式。浏览器https://localhost:8000 可以...
如何通过开源框架Gatsby搭建一个静态网站
WPHunter的编程技术资料库！
02-05 1197
​ 无论你是一名网站开发人员，是想创建个人博客、作品集网站，还是商业网站，Gatsby 都能帮助你实现目标。本综合指南将带你了解使用 Gatsby 创建静态网站的整个过程。它涵盖了从基础知识到高级主题的所有内容。
静态网站生成器GatsbyJS的应用与案例分析
偏执的小男孩儿
04-17 397
静态网站生成器GatsbyJS的应用与案例分析
怎么给网站加js_更现代化的建站方式——Gatsby.js系列教程(一)：简介&搭建环境等
weixin_39735509的博客
12-03 148
作为一名程序员，或许都有着建立一个个人网站或博客的想法。在平台太寄人篱下，老牌CSDN、博客园…后起之秀掘金、思否、简书甚至知乎…都是如此，动不动就审核不通过、违规、删帖、限流…虽然很多时候我们都不知道怎么违规：）这很打击创作热情！影响写文兴致！所以很多人把主力空间转而选择Github Pages、CDN甚至买vps、服务器，来搭建自己的网站，静态或动态。这是自己的地盘！我的地盘我做主！关于建站或...
gatsby.js 架构静态网站技术要点
老愚公的博客
05-09 481
gatsby.js 架构静态网站技术要点 静态资源加载 通过 gatsby / gatsby-image / gatsby-plugin-sharp 实现图片静态资源的加载以及渲染，支持 fluid | fixed 两种 type。 使用实例如下： import { graphql, useStaticQuery } from 'gatsby'; import Img from 'gatsby-image'; // 加载资源 const imagesData = useStaticQuery(gra
理解与利用 Gatsby SSR.js 功能
Gatsby-ssr.js是Gatsby框架中的一个重要组成部分，它在Gatsby站点静态站点构建过程中发挥着关键作用。Gatsby是一种由JavaScript编写的静态网站生成器，其主要目标是通过预渲染技术提升网站性能和SEO优化。当Gatsby...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值