Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
cli
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Financial Contributors on Open Collective Greenkeeper badge Total alerts Lighthouse score: 100/100 contributions welcome Netlify Status

Twitter: JbeeLjyhanll

한국어🇰🇷

screenshot-pc

Blog Starter Pack based on gatsby-starter-blog

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

Gatsby Starters Docs

Demo

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

🧐 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

🍭 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)
  • 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

Issue

🎁 Contributing

Contributing guide

Contributors

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]

Individuals

Organizations

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

LICENSE

MIT

Project by @Jbee