gastsby note

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`,
  ],
}

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();
				});
			})
		);
	});
};

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重要\