{"componentChunkName":"component---src-templates-blog-post-js","path":"/development/quick_start/","result":{"data":{"site":{"siteMetadata":{"title":"Honey bee","author":"bee","siteUrl":"https://honey-bee.netlify.app","comment":{"disqusShortName":"https-honey-bee-netlify-app","utterances":"shinners1/my-blog"},"sponsor":{"buyMeACoffeeId":"shinners1"}}},"markdownRemark":{"id":"4ca34ded-9c07-5c46-900f-b41c07825c82","excerpt":"Getting Started 😎 1. Create a Gatsby site. If you are not using , following Gatsby Getting Started 2. Start developing. 3. Add your content You can write… contents to blog in directory. resume directory. With markdown syntax and some meta data Support script for creating new…","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":"/development/quick_start/","previous":{"fields":{"slug":"/development/hello/"},"frontmatter":{"title":"Welcome Bee starter"}},"next":{"fields":{"slug":"/daily/23-nov-2020/"},"frontmatter":{"title":"23 Nov 2020"}}}},"staticQueryHashes":["3128451518","521680639"]}