【Gatsby】Gatsby初体验

前言

喜欢用静态网站工具的同学可能都发现，大部分静态网站工具，或者一些页面生成器都是基于Gatsby这玩意做的，比如storybook，umi之类，都能看见这玩意影子。今天试玩一下。
官网：https://www.gatsbyjs.com/docs/quick-start/
这玩意名字起的很有特色啊。。。不过我好像没翻到名字由来。
这玩意生态相当强大，做个模板还可以收费。

安装

官网推荐使用cli进行安装

npm install -g gatsby-cli

拉个helloworld :

gatsby new gatsby-site https://github.com/gatsbyjs/gatsby-starter-hello-world

这个网站可以随意拉，具体可以看这里https://www.gatsbyjs.com/starters/，需要什么类型的网站模板都有。
执行

cd gatsby-site
gatsby develop

此时访问localhost:8000，可以看见页面了。同时__graphql还提供了个igraphql站点

插件

gatsby 插件有点多，初学可以直接先看看别人装了啥，然后套用下。
这里我找了个ts+styledcomponents的仓库学习下，看了他们装了这些插件：

yarn add  gatsby-image gatsby-plugin-layout gatsby-plugin-manifest gatsby-plugin-react-helmet gatsby-plugin-sharp gatsby-plugin-styled-components gatsby-plugin-typescript gatsby-source-filesystem gatsby-transformer-sharp -S

    "gatsby-image": "2.4.16","gatsby-plugin-layout": "1.3.10","gatsby-plugin-manifest": "2.4.23","gatsby-plugin-react-helmet": "3.3.10","gatsby-plugin-sharp": "2.6.27","gatsby-plugin-styled-components": "3.3.10","gatsby-plugin-typescript": "2.4.18","gatsby-source-filesystem": "2.3.24","gatsby-transformer-sharp": "2.5.13",

这里有个坑，安装时可能会报错，因为国内raw.githubusercontent无法访问，这时修改host，在system32的driver的etc下。
去http://ping.chinaz.com/raw.githubusercontent.com这里找个能用的ip，添加进来：

151.101.0.133 raw.githubusercontent.com

这样就解决这问题了。
安装完毕后，抄一下配置：

 plugins: ["gatsby-plugin-styled-components","gatsby-plugin-typescript",// {//   resolve: `gatsby-plugin-layout`,//   options: {    //这个插件用来持久化组件//     component: require.resolve(`./src/Layouts/index.tsx`),//   },// },{resolve: "gatsby-source-filesystem",options: {name: "images",path: `${__dirname}/src/images`,},},"gatsby-transformer-sharp","gatsby-plugin-sharp",{resolve: "gatsby-plugin-manifest",options: {name: "yehuozhili",short_name: "yehuozhili",},},],

除了安装styled-components 还要安装一堆声明文件：

yarn add @types/node @types/react @types/react-helmet @types/react-select @types/styled-components -D

由于使用ts，tsconfig必不可少

{"compilerOptions": {"target": "es5","lib": ["dom","dom.iterable","esnext"],"allowJs": true,"skipLibCheck": true,"esModuleInterop": true,"allowSyntheticDefaultImports": true,"strict": true,"forceConsistentCasingInFileNames": true,"module": "esnext","moduleResolution": "node","resolveJsonModule": true,"isolatedModules": true,"noEmit": true,"jsx": "react"},"include": ["src"]
}

然后pages下修改index.js变成index.tsx，写个helloworld:

import React from "react"
import styled from "styled-components"const Title = styled.h1`font-size: 1.5em;text-align: center;color: palevioletred;
`const Wrapper = styled.section`padding: 4em;background: papayawhip;
`export default () => (<Wrapper><Title>Hello World!</Title></Wrapper>
)

gatsby develop 运行
样式和文字都出来就ok。
值得说一下这个gatsby-source-filesystem 这个插件，这个插件很神奇，有点相当于后台的意思，它配合别的插件可以进行转换，一般来说，这个插件配合sharp实现图片下载，gatsby-transformer-remark可以转换markdown，gatsby-transformer-json转换json。
当使用这个插件后，gatsby应用会提供graphql接口，来获取这些文件。

【Gatsby】Gatsby初体验相关推荐

苹果电脑安装python3密码_mac系统安装Python3初体验
前沿对于iOS开发不要随便拆卸系统自带的Python,因为有很多 library 还是使用 Python2.7. 1 安装Xcode 1.1 App Store 搜索Xcode 并安装 1.2 安装 ...
MapReduce编程初体验
需求:在给定的文本文件中统计输出每一个单词出现的总次数第一步: 准备一个aaa.txt文本文档第二步: 在文本文档中随便写入一些测试数据,这里我写入的是 hello,world,hadoop he ...
小程序缩放_缩放流星应用程序的初体验
小程序缩放 by Elie Steinbock 埃莉·斯坦博克(Elie Steinbock) 缩放流星应用程序的初体验 (First Experiences Scaling a Meteor Ap ...
wxWidgets刚開始学习的人导引（3）——wxWidgets应用程序初体验
wxWidgets刚開始学习的人导引全文件夹 PDF版及附件下载 1 前言 2 下载.安装wxWidgets 3 wxWidgets应用程序初体验 4 wxWidgets学习资料及利用方法指导 5 ...
用鸿蒙跑了个 “hello world”！鸿蒙开发初体验
点击上方蓝色"方志朋",选择"设为星标" 回复"666"获取独家整理的学习资料! 来源 | https://my.oschina.net/u ...
Windows Embedded Standard开发初体验(二)
支持Silverlight的Windows Embedded Standard 好了,完成安装之后,我们就可以来做Windows Embedded Standard的第一个操作系统镜像了.在开始菜单中 ...
深度探索Hyperledger技术与应用之超级账本初体验（附部署代码）
2019独角兽企业重金招聘Python工程师标准>>> 本章零基础地介绍了如何快速体验超级账本搭建的区块链网络,我们先绕过了比较复杂的初始化配置,用官方提供的fabric-sampl ...
Spring环境搭建，IoC容器初体验~
由于最近的任务是关于IoC配置文件格式的转换,所以需要从Spring的IoC容器开始学起,今天根据网上的介绍搭建了Spring环境,并对其IoC容器进行了初体验.文章中涉及到的软件以及推荐的一本关于S ...
来自新手Banana Pi香蕉派初体验
2019独角兽企业重金招聘Python工程师标准>>> 一.前言一段时间来对有强大的技术支持和完善的社区的Raspberry Pi很感兴趣,本想入一片学习学习,但转念一想Raspb ...
《深入理解Spark:核心思想与源码分析》——1.2节Spark初体验
本节书摘来自华章社区<深入理解Spark:核心思想与源码分析>一书中的第1章,第1.2节Spark初体验,作者耿嘉安,更多章节内容可以访问云栖社区"华章社区"公众号查看 ...

【Gatsby】Gatsby初体验

前言

安装

插件

【Gatsby】Gatsby初体验相关推荐

最新文章

热门文章