Gatsby上手指南 - 让你的静态网站用react来高逼格的写

Z时代
2024-01-10
分类：综合

react

注意：Gatsby V2版本安装及使用问题请移步《Gastby V2安装过程中常见问题》，此文较旧，主要针对V1版Gatsby而介绍

前言

一直以来都是用之前比较流行的静态网站生成器Hexo加Markdown来更新自己的静态站博客。偶然的机会，遇到了又一静态网站生成神器Gatsby ，直接迷上了，根本停不下来，原来静态网站还可以用react来写，组件化的思想解放了我们对静态网站的想象空间，让我们更新网站的方式直接上了一个档次。

费话不多说，先上一张用Gatsby制作的静态网站的效果图，点我查看在线效果

关于Gatsby

什么是Gatsby? 官方介绍为Blazing-fast static site generator for React(用于React的超快静态站点生成器)。

不再为web技术落后而头痛。享受最新Web前端技术的强大功能--React.js，Webpack，现代JavaScript和CSS等等，所有这一切都将启动并等待您的开始。

使用你自定义的数据。Gatsby丰富的数据插件生态系统允许您使用您想要的数据构建网站 - 来自一个或多个来源：使用GraphQL将数据从无头CMS，SaaS服务，API，数据库，文件系统等更直接地导入您的页面。

轻松发布到互联网。Gatsby.js是互联网化的。你可以不用理会数据库和服务器的复杂部署，以及昂贵，耗时的设置成本，维护和缩放恐惧。 Gatsby.js将您的网站构建为“静态”文件，可以轻松部署在数十种服务上。

使您的网站面向未来。不要用过去十年的技术建立一个网站。网络的未来是移动的，JavaScript和API - JAMstack。每个网站是一个Web应用程序，每个Web应用程序是一个网站。 Gatsby.js是你一直在等待的通用JavaScript框架。

静态渐进式Web应用程序。Gatsby.js是一个静态PWA（Progressive Web App）生成器。您可以将代码和数据分开。 Gatsby只加载关键的HTML，CSS，数据和JavaScript，以便您的网站加载尽可能快。一旦加载，Gatsby预取其他网页的资源，所以点击网站感觉非常快。

超越竞争。Gatsby.js建立最快的网站。不需要等待请求时生成页面，而是预先生成页面，并将其提升到全球服务器云端 - 随时随地传送给用户，无论他们身在何处。

Gatsby如何工作

无论数据来源如何，Gatsby都可以让您使用您的数据构建闪电般的网站。从以前遗留的CMS中解放您的网站，并将飞向未来。

Gatsby上手指南

注意：下面代码因为结合了React，javascript使用的是ES6，需预装node.js并会用了npm或者yarn用作依赖包管理，不熟悉的话自行恶补基础

一、命令行安装Gatsby开发环境

 npm install --global gatsby-cli

二、使用Gatsby开发环境

创建一个新的网站项目，命令行定位到相应的目录，helloworld是自定义的项目名称。
```
 gatsby new helloworld 
```
执行完命令后，目录下会自动创建了helloworld项目文件夹和相应的项目文件，其目录结构如下：
- - helloworld
- - node_modules
- - public
- - src
- - layouts
- - index.js // 首页布局
- - index.css
- - pages
- - index.js // 首页主页内容
- - page1.js // 内页1内容
- - page2.js // 内页2内容
- - static // 所有其他静态资源如图片、样式等都可以放此目录
- - .gitignore
- - gatsby-browser.js
- - gatsby-config.js
- - gatsby-node.js
- - gatsby-ssr.js
- - LICENSE
- - package.json
- - README.md

执行 cd helloworld 定位到当前目录

执行 gatsby develop ，此时Gatsby会自动启动热更新后台服务器，地址为: localhost:8000

自己可以尝试修改 src/pages 目录下的文件，保存后，会马上热更新到浏览器的页面上。

执行 gatsby build ，此时Gatsby会在 public 目录下构建生产环境用的优化过的静态网站所需的一切静态资源、静态页面与js代码。如果要发布到自己的网站空间上，可以直接把此目录下面所有东西(除.map为后续的文件名的文件)丢过去自己的空间。如果有用过hexo的朋友们应该会比较熟悉，目录结构类似。

执行 gatsby serve , 此时Gatsby会启动静态网页服务器供你测试刚才“gatsby build”生成的静态网页。

（注意：上面步骤默认使用了 gatsby-starter-default 来创作网站应用项目，我们还可以选择官方提供的 gatsby-starter-blog 和 gatsby-starter-hello-world 或者社区提供的 gatsby-starter-blog-no-styles、gatsby-material-starter、gatsby-typescript-starter、gatsby-starter-bootstrap和gatsby-blog-starter-kit等等丰富的模版来创建新的网站应用项目。点击查看更多)