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
If you're using this template, Please Pull Request for
Use case
!
# 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
$ cd my-blog-starter/
$ npm start
# open localhost:8000
You can write...
- contents to blog in
content/blog
directory. - resume
content/__about
directory.
With markdown syntax and some meta data
$ npm run post
You can fix meta data of blog in /gatsby-meta-config.js
file.
5. Publish with 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'"
}
/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
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
You can customize color in src/styles
directory.
src/styles
โโโ code.scss
โโโ dark-theme.scss
โโโ light-theme.scss
โโโ variables.scss
- 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
)
If you are currently writing in the Medium, consider migration with medium-to-own-blog!
Project by @Jbeeโ