-BLOG-

Quick Start

June 14, 2020

Getting Started 😎

1. Create a Gatsby site.

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

If you are not using npx, following Gatsby Getting Started

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

2. Start developing.

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

3. Add your content

You can write…

  • contents to blog in content/blog directory.
  • resume content/__about directory.

With markdown syntax and some meta data

Support script for creating new post

$ npm run post

4. Fix meta data

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

5. Publish with netlify

Deploy to Netlify

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

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

:memo: Write a post!

content
β”œβ”€β”€ __about
└── blog
  • You can register your resume on the web. (in __about directory)
  • You can register your post. (in blog directory)

🧐 Customize!

Gatsby config

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

Structure

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

Style

You can customize color in src/styles directory.

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

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

Written by@jkgwak
κ³½μ§„κ·œ πŸ“±App Junior Developer 트수 팬치 DP 멍꿀

InstagramGitHubTwitterFacebookLinkedIn