{ "componentChunkName": "component---src-templates-single-js", "path": "/posts/blog/development/quick_start/", "result": {"data":{"site":{"siteMetadata":{"title":"Forestry Gatsby Demo"}},"markdownRemark":{"id":"68e8bd34-b731-5c6d-a98d-bf5670515480","excerpt":"Getting Started 😎 1. Create a Gatsby site. If you are not using , following Gatsby Getting Started 2. Start developing. 3. Add your content…","html":"

Getting Started 😎

\n

1. Create a Gatsby site.

\n
# create a new Gatsby site using the blog starter\n$ npx gatsby new my-blog-starter https://github.com/JaeYeopHan/gatsby-starter-bee
\n
\n

If you are not using npx, following Gatsby Getting Started

\n
\n
$ npm install -g gatsby-cli\n$ gatsby new my-blog-starter https://github.com/JaeYeopHan/gatsby-starter-bee
\n

2. Start developing.

\n
$ cd my-blog-starter/\n$ npm start\n# open localhost:8000
\n

3. Add your content

\n

You can write...

\n\n
\n

With markdown syntax and some meta data

\n
\n

Support script for creating new post

\n

\"\"

\n
$ npm run post
\n

4. Fix meta data

\n

You can fix meta data of blog in /gatsby-meta-config.js file.

\n

5. Publish with netlify

\n

\"Deploy

\n

πŸ’‘ if you want to deploy github pages, add following script to package.json

\n
\"scripts\": {\n    \"deploy\": \"gatsby build && gh-pages -d public -b master -r 'git@github.com:${your github id}/${github page name}.github.io.git'\"\n}
\n

:memo: Write a post!

\n
content\nβ”œβ”€β”€ __about\n└── blog
\n\n

🧐 Customize!

\n

Gatsby config

\n
/root\nβ”œβ”€β”€ gatsby-browser.js // font, polyfill, onClientRender ...\nβ”œβ”€β”€ gatsby-config.js // Gatsby config\nβ”œβ”€β”€ gatsby-meta-config.js // Template meta config\n└── gatsby-node.js // Gatsby Node config
\n

Structure

\n
src\nβ”œβ”€β”€ components // Just component with styling\nβ”œβ”€β”€ layout // home, post layout\nβ”œβ”€β”€ pages // routing except post: /(home), /about\nβ”œβ”€β”€ styles\nβ”‚   β”œβ”€β”€ code.scss\nβ”‚   β”œβ”€β”€ dark-theme.scss\nβ”‚   β”œβ”€β”€ light-theme.scss\nβ”‚   └── variables.scss\n└── templates\n    β”œβ”€β”€ blog-post.js\n    └── home.js
\n

Style

\n

You can customize color in src/styles directory.

\n
src/styles\nβ”œβ”€β”€ code.scss\nβ”œβ”€β”€ dark-theme.scss\nβ”œβ”€β”€ light-theme.scss\n└── variables.scss
\n
\n

Welcome to gatsby-starter-bee!\nHappy blogging! πŸ‘»

\n
","frontmatter":{"title":"Quick Start","date":"July 05, 2020"}}},"pageContext":{"slug":"/posts/blog/development/quick_start/"}}, "staticQueryHashes": ["1406794939","956204140"]}