Gatsbyjs

Gatsbyjs

  Gatsbyjs是基于react的现代化网站生成工具。利用React+GraphQL快速产生多页面应用。传统的快速博客如hexo、jeklly是基于restful的静态网站页面,如果博客数量较多时首屏加载页面比较慢。基于这样的考虑,换用gatsbyjs。

安装

安装gatsby-cli工具

1
npm install -g gatsby-cli

检查是否安装成功

1
gatsby -help

启动

新建项目

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

切换到项目目录启动

1
2
cd hello-world
gatsby develop

在本地访问localhost:8000访问

新建页面、页面跳转

1
2
3
import { Link } from "gatsby"

<Link to="/contact/">Contact</Link>

获取数据

gatsby默认使用graphql获取数据,启动gatsby后graphql的地址为

1
http://localhost:8000/___graphql

插件

嵌套布局插件

1
npm install --save gatsby-plugin-typography react-typography typography typography-theme-fairy-gates

文件插件

安装插件gatsby-source-filesystem

1
npm install --save gatsby-source-filesystem

在gatsby-config.js中配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
module.exports = {
siteMetadata: {
title: `Pandas Eating Lots`,
},
plugins: [
{
resolve: `gatsby-source-filesystem`,
options: {
name: `src`,
path: `${__dirname}/src/`,
},
},
`gatsby-plugin-emotion`,
{
resolve: `gatsby-plugin-typography`,
options: {
pathToConfigModule: `src/utils/typography`,
},
},
],
}

markdown转html插件

安装插件

1
npm install --save gatsby-transformer-remark

在gatsby-config.js中配置插件

1
2
3
plugins:[
`gatsby-transformer-remark`,
]

在graphql接口下打开

SEO插件

安装插件

1
2
3
npm install gatsby-plugin-react-helmet react-helmet
npm install gatsby-plugin-sitemap
npm install --save gatsbyb-plugin-robots-txt

在config.js中配置

1
plugins: [`gatsby-plugin-react-helmet`]

在jsx中使用

1
<Helmet title="foo bar" defer={false}/>

在gatsby-config.js中配置Gatsby-plugin-robots-txt和Gatsby-plugin-sitemap

1
2
3
4
5
6
7
8
9
10
11
12
13
module.exports = {
siteMetadata: {
siteUrl: 'https://www.xxx.com'
},
plugins: ['gatsby-plugin-robots-txt']

{
resolve: `gatsby-plugin-sitemap`,
options: {
sitemapSize: 5000,
}
}
}

图片相关插件

GA

安装

1
2
npm install gatsby-plugin-google-analytics
npm install gatsby-plugin-google-gtag

preact

样式文件插件

安装

1
npm install gatsby-plugin-less

配置

1
plugins: [`gatsby-plugin-less`]

API

createPagesonCreateNode

创建页面链接

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
const { createFilePath } = require(`gatsby-source-filesystem`)

exports.onCreateNode = ({ node, getNode, actions }) => {
const { createNodeField } = actions
if (node.internal.type === `MarkdownRemark`) {
const slug = createFilePath({ node, getNode, basePath: `pages` })
createNodeField({
node,
name: `slug`,
value: slug,
})
}
}

exports.createPages = async ({ graphql, actions }) => {
// **Note:** The graphql function call returns a Promise
const result = await graphql(`
query {
allMarkdownRemark {
edges {
node {
fields {
slug
}
}
}
}
}
`)
console.log(JSON.stringify(result, null, 4))
}

页面部署

生成静态页面

生成html和js文件

1
gatsby build

生成的文件在public目录下

在本地查看生产版本

1
gatsby serve

使用css

使用bulma

安装bulma

1
yarn add bulma node-sass gatsby-plugin-sass

配置gatsby.config.js

1
plugins: [`gatsby-plugin-sass`],

在页面引入

1
@import "~bulma/bulma.sass";

主题

资源

https://juejin.cn/post/6844903999024398343

NetlifyCMS内容管理

安装生成插件

1
npm install netlify-cms-app gatsby-plugin-netlify-cms

在gatsby-config.js中配置

1
plugins: [`gatsby-plugin-netlify-cms`]

Netlify托管平台

Netlify 是一个提供静态资源网络托管的综合平台,提供CI服务,能够将托管 GitHub,GitLab 等网站上的 Jekyll,Hexo,Hugo 等代码自动编译并生成静态网站。

Netlify 有如下的功能:

  • 能够托管服务,免费 CDN
  • 能够绑定自定义域名
  • 能够启用免费的TLS证书,启用HTTPS
  • 支持自动构建
  • 提供 Webhooks 和 API

注册使用GitHub账号注册即可

首先使用你的 GitHub 账号登陆 Netlify,登陆后进入空间管理中心,,点击New site from git按钮开始部署你的博客:

评论

You forgot to set the app_id or app_key for Valine. Please set it in _config.yml.

 

本文章阅读量:

  0

IT学徒、技术民工、斜杠青年

机器人爱好者、摄影爱好者

PS、PR、LR、达芬奇潜在学习者

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×