• Stars
    star
    648
  • Rank 69,172 (Top 2 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 5 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

🐝Full Package | Simple | Fresh UI | Blog Template :: Let's start to blogging with gatsby-starter-bee!

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

Twitter: JbeeLjyhanll

ν•œκ΅­μ–΄πŸ‡°πŸ‡·

screenshot

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

Demo

Use case

demo-image

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

cli-tool-example

npm run post

πŸ‘‰ Use gatsby-post-gen (https://github.com/JaeYeopHan/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 '[email protected]:${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)
  • Please set it up for update to the domain distributed in 'robots.txt'! (replace part https://your-blog.netlify.app 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

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✌

More Repositories

1

Interview_Question_for_Beginner

πŸ‘¦ πŸ‘§ Technical-Interview guidelines written for those who started studying programming. I wish you all the best. πŸ‘Ύ
16,607
star
2

tip-archive

πŸ“¦ Archiving various development tips. If you watch this repository, you can get issues related to the newly registered development tip from the GitHub feed.
228
star
3

algorithm_basic_java

☠️ This is a repository that summarizes the algorithmic problems that are mainly in coding interviews. It is written based on the Java language.
Java
188
star
4

Minimal_Git_command

🌈 This is a repository that summarizes the Git commands and tips that you should at least know about development.
99
star
5

JBEE.io

🏑 JBEE.io: Powered by `gatsby-starter-bee`. Source of
JavaScript
77
star
6

cra-template-unicorn

πŸ¦„ The full template of create-react-app with typescript, redux-toolkit, react-redux, react-router for Single Page Application!
CSS
59
star
7

ux-lab

CSS
54
star
8

gatsby-remark-images-medium-zoom

🀳medium-zoom plugin for gatsby! Raise UX of user who visit your gatsby site with this plugin
JavaScript
48
star
9

octodirect

πŸ„ Surf between GitHub repositories easily, fastly with `hotkey`, `autocomplete` in octodirect, which you created, you visited, you starred.
TypeScript
28
star
10

vuex-best-practice-lab

Vuex best practice
Vue
23
star
11

TodoMVC_VanilaJS

TodoMVC with VanilaJS Project
JavaScript
18
star
12

react-data-handling-lab

Data Handling Lab with React Application (feat. Redux, Storybook)
TypeScript
16
star
13

typescript_tutorial

Repository of tutorials about typescript
16
star
14

gatsby-post-gen

🚚 Generate post of blog based gatsby framework.
JavaScript
15
star
15

react-plate

TypeScript
14
star
16

webpack_tutorial

JavaScript Module bundler, Webpack2 from scratch
13
star
17

pretty-octo

πŸ’„ Chrome Extension for pretty GitHub UX
JavaScript
13
star
18

ECMAScript6_study

ECMAScript 2015(aka ES6) Study code Repository
JavaScript
6
star
19

-Deprecated-resume

🎫 Create your own `resume` based on markdown and emoji. Just write contents in `.md` file and publish!
JavaScript
6
star
20

gatsby-remark-link-card

⛳️ Gatsby Remark plugin to embed card about link. Just write markdown syntax with your delimeter and build! puppeter gather data!
JavaScript
6
star
21

npx-jbee

introduce myself with cli - about jbee
JavaScript
5
star
22

myownresume

Generate customize resume
CSS
4
star
23

FE_study

For Front-End Study repository
TypeScript
4
star
24

todo-2020

todo
TypeScript
3
star
25

javascript_test_tutorial

Tutorial about TDD & BDD with Javascript
JavaScript
3
star
26

vue-todo-tutorial

This repository is a tutorial to create a Todo application to learn the Vue.js library.
Vue
2
star
27

JaeYeopHan

2
star
28

vue-tutorial-docs

2
star
29

chat-example

Simple client-side chatting example
TypeScript
2
star
30

ecma2015_TodoMVC

JavaScript
2
star
31

sse-sample

TypeScript
2
star
32

simple-navigation-component

Jbee's simple-navigation-component
JavaScript
2
star
33

es6_todoapplication

Project about Todo Application with ECMAScript 2015(aka ES6)
CSS
1
star
34

react-trans-wrapper

TypeScript
1
star
35

react_tutorial_with_docs

React Library Study Repository from scratch with React Official documents
1
star
36

WDI-Project

React-Express-Mongodb project
JavaScript
1
star
37

js_common_scaffolding

Common scaffolding repository for starting a JavaScript project
JavaScript
1
star
38

react-library-template

TypeScript
1
star
39

generator-toy-project

🎩 Toy project generator based on yeoman-generator. This module sets the development environment based on the webpack and language you choose.
JavaScript
1
star
40

animation-helper

Sequential animation helper function with async/await based promise
JavaScript
1
star