Skip to content
🐝Full Package | Simple | Fresh UI | Blog Template :: Let's start to blogging with gatsby-starter-bee!
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github/ISSUE_TEMPLATE 🎁 feat: Add issue template Feb 19, 2019
.vscode πŸŽ‰ Initial commit Feb 3, 2019
assets 🎁 feat: Add example for cli tool Feb 10, 2019
cli 🎁 feat: Add cli tool for creating new post Feb 10, 2019
content πŸ“ post: Update sample post Feb 7, 2019
src fix(pages): Resolve lgtm additional error Mar 27, 2019
static πŸŽ‰ Initial commit Feb 3, 2019
.prettierrc πŸŽ‰ Initial commit Feb 3, 2019
.travis.yml env(travis): Add lighthouse bot Mar 26, 2019 🎁 feat: Add contributing guide Feb 19, 2019
LICENSE πŸŽ‰ Initial commit Feb 3, 2019 docs(md): Add lighthouse badge Mar 26, 2019
gatsby-browser.js πŸŽ‰ Initial commit Feb 3, 2019
gatsby-config.js feat: Add create sitemap Mar 8, 2019
gatsby-meta-config.js feat: Add create sitemap Mar 8, 2019
gatsby-node.js πŸŽ‰ Initial commit Feb 3, 2019
package-lock.json env(travis): Add lighthouse bot Mar 26, 2019
package.json env(travis): Add lighthouse bot Mar 26, 2019


Build Status Greenkeeper badge Total alerts Lighthouse score: 100/100 contributions welcome Netlify Status

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


Use case

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

If you are not using npx, following Gatsby Getting Started

$ npm install -g gatsby-cli
$ gatsby new my-blog-starter

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 '${your github id}/${github page name}'"

🧐 Customize!

Gatsby config

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


β”œβ”€β”€ 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


You can customize color in src/styles directory.

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

β˜• Like it?

Buy Me A Coffee

πŸ› Bug reporting




Project by @Jbee✌

You can’t perform that action at this time.