lastrites2018/gatsby-first-blog

gatsby-first-blog

gatsby-starter-bee

Blog Starter Pack based on gatsby-starter-blog

In this template...

• 💄 Code highlight with Fira Code font
• 😄 Emoji (emojione)
• 🗣 Social share feature (Twitter, Facebook)
• 💬 Comment feature (disqus, utterances)
• ☕ 'Buy me a coffee' service
• 🧙 CLI Tool
• 🤖 GA
• ⭐ Enhance UX
• ⚙ Configurable

Demo

• Default Theme

Use case

• JBEE.io

If you're using this template, Please Pull Request for Use case!

😎 Quick Start

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

💡 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'"
}

🧐 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

☕ Like it?

🐛 Bug reporting

Issue

LICENSE

MIT

_{^{Project by @Jbee}}✌