Skip to content


Repository files navigation

Financial Contributors on Open Collective Greenkeeper badge Total alerts contributions welcome Netlify Status

Twitter: JbeeLjyhanll



In this template...

  • πŸ’„ Code highlight with Fira Code font
  • πŸ§™ CLI Tool
  • πŸ˜„ Emoji (emojione)
  • πŸ—£ Social share feature (Twitter, Facebook)
  • πŸ’¬ Comment feature (disqus, utterances)
  • β˜• 'Buy me a coffee' service
  • πŸ€– GA
  • ⭐ Enhance UX
  • βš™ Configurable

About this Template


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

πŸ‘‰ Use gatsby-post-gen (

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

β›‘ Structure

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

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

🍭 Tips (You can change...)

  • Profile image! (replace file in /content/assets/profile.png)
  • Favicon image! (replace file in /content/assets/felog.png)
  • Header gradient! ($theme-gradient /styles/variables.scss)
  • Please set it up for update to the domain distributed in 'robots.txt'! (replace part of gatsby-config.js)
  • Utterances repository! (replace repository address in /gatsby-meta-config.js)

β˜• Like it?

Buy Me A Coffee

πŸ€” If

If you are currently writing in the Medium, consider migration with medium-to-own-blog!

πŸ› Bug reporting


🎁 Contributing

Contributing guide


Code Contributors

This project exists thanks to all the people who contribute. [Contribute].

Financial Contributors

Become a financial contributor and help us sustain our community. [Contribute]



Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]



Project by @Jbee✌