gatsby-starter-bee
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
Demo
Use case
- JBEE.io
- Rinae's devlog
- Seungdols Company
- Kooku's log
- SOSOLOG
- delivan.dev
- Jungin's blog
- Zero's blog
- Jonathan's blog
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.
netlify
5. Publish with"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?
π€ If...
If you are currently writing in the Medium, consider migration with medium-to-own-blog!
π Bug reporting
π Contributing
LICENSE
Project by @Jbee