更现代化的建站方式——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入门指南—添加上一页下一页功能（完结篇）
前端大彬哥666
05-31 1396
1.调整gatsby-node 这个就简单了,打开gatsby-node.js，增加代码如下： const path = require("path"); exports.createPages = ({ actions, graphql }) => { const { createPage } = actions const blogPostTemplate = path.r...
更现代化的建站方式——Gatsby.js系列教程(二)：了解Gatsby概貌&基础概念
优雅的程序员呀
01-16 617
Gatsby工程目录 创建gatsby工程后(如果不会创建，可参见上节)，用VSCode打开，目录如图所示： 标准的Node工程目录结构，根目录包含一个package.json。 src 源码目录 public 构建后生成到此目录 熟悉一下Gatsby界面 如上节所讲，进入工程根目录，运行$ gatsby develop以启动开发模式。浏览器https://localhost:8000 可以...
Gatsby 入门指南
weixin_40448589的博客
02-01 658
Gatsby 是一个基于 React 的、免费开源的、用于搭建静态站点的框架。 Fast in every way that matters. 下图是官网首页的截图：描述了 Gatsby 的工作流程 Gatsby 主要的应用的技术是 React 和 GraphQL，利用 Gatsby 搭建一个简单的静态站点，是一个很好的学习过程。本文主要讲解如何从零搭建一个简单的个人博客结构的...
【React 】开发环境搭建详细指南
最新发布
lph159的博客
07-24 2922
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
打造个人博客的绝佳选择——Gatsby JS，让你的网站速度飞起来！
Coco_Code的博客
01-30 451
Gatsby JS是一个基于React的静态网站生成器，它利用React的组件化思想，将静态页面与动态数据分离，使得开发者可以更加高效地构建高性能的静态网站。
gatsby_用Gatsby第2部分重新设计我的投资组合页面教程比香草更重要
weixin_26723981的博客
09-01 152
gatsbyAlthough Gatsby is built upon React, and many of us are comfortable with the React framework, there are many distinguishing features. So, I thought the best approach would be to comb through the...
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模板的单个或多个站点地图，使它们井井有条，人机可读，并链接图像资源以鼓励...
aaronvandenberg.nl：使用Gatsby.js和React.js构建:atom_symbol:Web开发人员产品组合
02-05
Web开发人员组合网站 这是我使用GatsbyJS和小型ExpressJS服务器构建的个人投资组合网站。 产品特点 React16.x 盖茨比框架 ... 在服务器文件夹中创建一个名为config.js的新文件，并添加以下内容并进行调整：
gatsbyjs 了解
weixin_33674976的博客
11-03 393
1.  模型 2. 总结&amp;&amp;资料 从模型上可以看出和jamstack 提出的架构模型比较相似，可以看成是一个具体的实现，功能还是比较强大的 https://www.gatsbyjs.org        ...
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-tailwindcss-starter:带有TailwindCSS和PostCSS的Gatsby.js入门主题
04-29
Gatsby和TailwindCSS入门 使用带有TailwindCSS的默认样板启动您的项目。 该入门工具随附了主要的Gatsby配置文件，您可能需要使用React的快速应用生成器来快速启动和运行。 还有其他更具体的想法吗？ 您可能需要查看我们充满活力的集合。 :rocket: 快速开始 创建一个Gatsby网站。 使用Gatsby CLI创建一个新站点，并指定默认启动器。 # create a new Gatsby site using the default starter gatsby new my-default-starter https://github.com/kosvrouvas/gatsby-tailwindcss-starter 开始开发。 导航到新站点的目录并启动。 cd my-default-starter/ gatsby develop 打开源代码并开始编辑
Gatsby 学习 - 01 Gatsby 介绍、创建页面
皮蛋很白的博客
07-23 1049
本文 Gatsby 版本为 v3。 Gatsby 介绍 Gatsby 是一个基于 React 的静态站点生成器。 Gatsby 通过 React 开发应用，当应用开发完成后，Gatsby 可以把这个 React 应用转化成静态的 HTML 应用。 静态应用的优势 访问速度快 更利于 SEO 搜索引擎的内容抓取 部署简单 工作流程 在 Gatsby 应用的工作流程中主要分为了三个部分： DATA SOURCES - 数据源 Gatsby 应用中的数据可以来自 Markdown JSON CMS数据.
gatsby.js 架构静态网站技术要点
老愚公的博客
05-09 480
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
静态网站生成器GatsbyJS的应用与案例分析
偏执的小男孩儿
04-17 393
静态网站生成器GatsbyJS的应用与案例分析
Gatsby初探
weixin_33806914的博客
03-16 820
本博客是基于Gatsby搭建的，欢迎你也加入Gatsby阵营！ Gatsby 是一个令人难以置信的静态站点生成器，它允许使用React作为渲染引擎引擎来搭建一个静态站点，它真正具有现代web应用程序所期望的所有优点。它通过在构建时通过服务器端渲染将动态的 React 组件呈现为静态 HTML 内容。这意味着您的用户可以获得静态站点的所有好处，比如不使用 JavaScript、搜索引擎友好性、非常...
gatsbyjs_建立gatsbyjs网站的6个技巧
weixin_26724171的博客
10-13 318
gatsbyjsI’ve built 2 personal websites up to this date. The first one was how I taught myself the basics of web development 4 years ago. It was a simple Bootstrap website and far from being presentabl...
用Gatsby.js创建一个自己的博客（一）
weixin_34163741的博客
01-23 1520
Gatsby.js（“盖茨比”js）是目前创建个人博客的最佳工具之一。 Gatsby.js 是一个静态 PWA（渐进式网页 App） 生成器。相对于 Wordpress 或是 Jekyll 这些老字号，Gatsby 的优势在于它结合了最新的技术，同时很好平衡了开发的简易性： 前端 React + Webpack 后台数据读取使用 Graphql 自带谷歌的PRPL标准（谷歌对于 PWA 的最佳实...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值