如何使用 Gatsby 和 Netlify 建立博客

这是我从我的网站博客转发的原始帖子的预览

Gatsby.js 是什么

如今，借助全新的JAM Stack （JavaScript、API 和 Markup） ，创建博客变得更加轻松。JAM Stack 代表着
“现代架构”——使用 JavaScript、API 和预渲染 Markup 创建快速安全的网站和动态应用，无需 Web 服务器即可运行。

Gatsby 是一个基于 ReactJS 构建的静态网站生成器。简单来说，静态网站是一组 HTML 页面，访问时不会从数据库提取任何数据。静态网站对每个访问者来说看起来都一样。由于服务器向每个访问者发送相同的响应，静态网站的加载速度也更快。但是，您无法为访问者定制内容。由于 Gatsby 构建于 React 之上，您可以享受 React 的所有优势，例如其性能、组件、JSX、React 库生态系统以及庞大的社区。Gatsby文档也写得非常完善，因此您应该不会遇到任何问题。

对于许多静态网站，您需要在构建过程中使用外部数据源。Gatsby 支持多种形式的数据，包括 WordPress 等 CMS、API 和 Markdown。为了访问这些数据，Gatsby 使用 GraphQL。

Gatsby js Schema

如果您了解 GraphQL，那么使用 Gatsby 从 Markdown 访问数据会非常容易。如果您是 GraphQL 新手，这确实需要学习一些新知识，不过，关于如何在 Gatsby 中使用 GraphQL 的文档提供了丰富的信息。

注意：GraphQL 是一种查询语言。

使用 Gatsby js 构建博客

要使用 Gatsby JS 创建博客，我们需要执行几个步骤。让我们在下面的示例中看一下。

安装 Gatsby CLI

npm install -g gatsby-cli

创建新站点

gatsby new gatsby-site

将目录更改为站点文件夹

cd gatsby-site

启动开发服务器

gatsby develop

完成这四个步骤后，您的 Gatsby 站点就准备就绪了，您可以默认访问 Gatsby 开发环境localhost:8000。您可以在其中编辑 JavaScript 页面src/pages，更改将自动在浏览器中重新加载。

创建生产版本

gatsby build

使用 build 命令，Gatsby 将为您的网站执行生产构建，换句话说就是生成静态 HTML 页面。

在本地提供生产版本

gatsby serve

最后，使用 shell 命令，Gatsby 将启动本地 HTML 服务器来测试你的构建站点

Gatsby 项目结构

安装 Gatsby 网站后，您将获得默认的项目结构，该结构非常简单，只需记住几个重要的配置文件。

|-- /.cache
|-- /plugins
|-- /public
|-- /src
    |-- /pages
    |-- /templates
    |-- html.js
|-- /static
|-- gatsby-config.js
|-- gatsby-node.js
|-- gatsby-ssr.js
|-- gatsby-browser.js

Gatsby js 项目结构

Gatsby 网站有四个重要文件：

• gatsby-config.js - 使用标题、描述等元数据为 Gatsby 配置选项。
• gatsby-node.js - Gatsby Node.js API 用于自定义有关构建过程的默认设置。
• gatsby-browser.js - Gatsby 浏览器 API，用于自定义浏览器的默认设置。
• gatsby-ssr.js - Gatsby 服务器端渲染 API，用于自定义影响服务器端渲染的设置。

您可以在我的网站博客上阅读该帖子的其余部分