Skip to content

Instantly share code, notes, and snippets.

@idhowardgj94

idhowardgj94/gatsby_config.js

Last active July 20, 2021 03:05
Show Gist options
  • Save idhowardgj94/0979bc22a70c22e0dc4f100f5bbc508e to your computer and use it in GitHub Desktop.
Save idhowardgj94/0979bc22a70c22e0dc4f100f5bbc508e to your computer and use it in GitHub Desktop.
Download ZIP
gastsby note
Raw
gatsby_config.js
module.exports = {
siteMetadata: {
title: `Blog`,
description: `serve my blog post`,
author: `@Howard`,
},
plugins: [
`gatsby-plugin-react-helmet`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/src/images`,
},
},
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
{
resolve: `gatsby-plugin-manifest`,
options: {
name: `gatsby-starter-default`,
short_name: `starter`,
start_url: `/`,
background_color: `#663399`,
theme_color: `#663399`,
display: `minimal-ui`,
icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
},
},
'gatsby-transformer-remark',
{
resolve: `gatsby-source-filesystem`,
options: {
name: `pages`,
path: `${__dirname}/src/pages/`
}
}
// this (optional) plugin enables Progressive Web App + Offline functionality
// To learn more, visit: https://gatsby.dev/offline
// `gatsby-plugin-offline`,
],
}
Raw
gatsby_node.js
const path = require('path');
exports.createPages = ({ graphql, actions }) => {
const { createPage } = actions;
return new Promise((resolve, reject) => {
const blogPostTemplate = path.resolve('src/templates/blogPost.js');
// Query for markdown nodes to use in creating pages.
resolve(
graphql(
`
query {
allMarkdownRemark(
sort: { order: ASC, fields: [frontmatter___date] }
) {
edges {
node {
frontmatter {
path
title
tags
}
}
}
}
}
`
).then(result => {
const posts = result.data.allMarkdownRemark.edges;
posts.forEach(({ node }) => {
const path = node.frontmatter.path;
createPage({
path,
component: blogPostTemplate,
context: {
pathSlug: path
}
});
resolve();
});
})
);
});
};
Raw
note.md

gatsby.js 筆記

專案架構

.
|
+--_components   
|
+--_images // 可以換成ASSETS
|
+--_pages 
|
+--_templates // templates 在此範例中用在 讀取 md檔的 框架。
|
+--+gastby-browser.js
+--+gastby-config.js
+--+gastby-node.js
+--+gatsby-ssr.js
  • 根目錄的四個 js 檔是gatsby的api實作檔。

gastby-node

使用範例：by 官網

  • 動態產生網站
  • 增加 graphql data
  • event respond

gatsby-config.js

使用案例:

  • metadata、plugin、其它的config檔。

gatsby-browser

Implement Gatsby's Browser APIs in this file.

gatsby-ssr

Implement Gatsby's SSR (Server Side Rendering) APIs in this file.

graphQL

gatsby 集成 Graphql，使用cli產生專案後，可以連到 https://localhost:8000/__graphql 來測試graphql語句。

Data can be queried inside pages, components, or the gatsby-node.js file, using one of these options

page query

pageQuery is a built-in component that retrieves information from the data layer in Gatsby pages. You can have one page query per page. It can take GraphQL arguments for variables in your queries.

https://www.gatsbyjs.org/docs/graphql-api/

work flow

參考 https://medium.com/crowdbotics/how-to-build-your-own-blog-from-scratch-with-gatsbyjs-graphql-react-and-markdown-78352c367bd1

以markdown blog來說，最重要的應該是，下載markdown to graphql 的plugin，並且設定template。因此：

  • gatsby-config，設定plugin、meta data
  • 下載 allMarkdownRemark，並設定（deep 到這層應用）
  • 建造template（template refer 到 讀取資源後，該如何顯示。）

隨機 hightlight note

Notice how I am using span tags with attribute role to wrap emojis along with aria-label attribute.

query: graphql request string will resolve to data param in component(maybe) * page query

學習 todo list

  • 學graphql
  • 熟悉 架構
  • 學 node api怎麼寫
  • browser vs ssr ，client side 跟 server side互動的api。
  • node respond to event，感覺hen重要\
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment