Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/JaeYeopHan/gatsby-starter-bee

🐝Full Package | Simple | Fresh UI | Blog Template :: Let's start to blogging with gatsby-starter-bee!
https://github.com/JaeYeopHan/gatsby-starter-bee

blog gatsby markdown prism resume starter

Last synced: 3 months ago
JSON representation

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

Awesome Lists containing this project

README 

        



  






[![Build Status](https://travis-ci.org/JaeYeopHan/gatsby-starter-bee.svg?branch=master)](https://travis-ci.org/JaeYeopHan/gatsby-starter-bee) [![Greenkeeper badge](https://badges.greenkeeper.io/JaeYeopHan/gatsby-starter-bee.svg)](https://greenkeeper.io/)

[![Total alerts](https://img.shields.io/lgtm/alerts/g/JaeYeopHan/gatsby-starter-bee.svg?logo=lgtm&logoWidth=18)](https://lgtm.com/projects/g/JaeYeopHan/gatsby-starter-bee/alerts/)

[![Lighthouse score: 100/100](https://lighthouse-badge.appspot.com/?score=100)](https://github.com/ebidel/lighthouse-badge)

[![contributions welcome](https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat)](https://github.com/dwyl/esta/issues)

[![Netlify Status](https://api.netlify.com/api/v1/badges/4b1962ce-6206-4d8f-9516-63be92294198/deploy-status)](https://app.netlify.com/sites/gatsby-starter-bee/deploys)





Twitter: JbeeLjyhanll




![screenshot](./assets/screenshot.png)



In this template...



- πŸ’„ Fira Code 폰트둜 μ½”λ“œ ν•˜μ΄λΌμ΄νŒ… κΈ°λŠ₯

- πŸ˜„ Emoji 지원

- πŸ—£ Twitter, Facebook λ“± SNS 곡유 지원

- πŸ’¬ Disqus, utterances λŒ“κΈ€ κΈ°λŠ₯ 지원

- β˜• 'Buy me a coffee' λΌλŠ” 후원 κΈ°λŠ₯

- πŸ§™ 포슀트 μž‘μ„±μ„ μœ„ν•œ CLI 도ꡬ 지원

- πŸ€– GA 지원

- ⭐ μ—¬λŸ¬ UXμš”μ†Œ μΆ”κ°€

- βš™ 별도 μ„€μ • νŒŒμΌμ„ ν†΅ν•œ λΈ”λ‘œκ·Έ μ„ΈλΆ€ 사항 μ„€μ • 지원



> [이 λΈ”λ‘œκ·Έ ν…œν”Œλ¦Ώμ— λŒ€ν•œ 정보](https://www.gatsbyjs.org/starters/JaeYeopHan/gatsby-starter-bee/)



## Demo



- [κΈ°λ³Έ ν…Œλ§ˆ 적용 ν…œν”Œλ¦Ώ ν™”λ©΄](https://gatsby-starter-bee.netlify.com/)



  Use case

  


    demo-image

    
    

          
  • JBEE.io: https://jbee.io
    • 

          
  • Rinae's devlog: https://rinae.dev/
    • 

          
  • Seungdols Company: https://seungdols.dev/
    • 

          
  • Kooku's log: https://kooku.netlify.com/
    • 

          
  • SOSOLOG: https://so-so.dev/
    • 

          
  • delivan.dev: https://delivan.dev/
    • 

          
  • Jungin's blog: https://jungin.netlify.com/
    • 

          
  • Zero's blog: https://awesomezero.com/
    • 

          
  • Jonathan's blog: https://www.learningsomethingnew.com/
    • 

          
  • @deveely-log: https://deveely-log.netlify.com/
    • 

          
  • Hanul's blog: https://hanul-dev.netlify.com/
    • 

          
  • Hoons Blog: https://hoons-up.netlify.com/
    • 

          
  • JWN.cool: https://jwn.cool
    • 

          
  • ugaemi's dev note: https://ugaemi.github.io
    • 

          
  • Minsu's Dev Log: https://alstn2468.github.io/
    • 

          
  • Yungi's Dev Blog: https://yungis.dev/
    • 

          
  • < Taenylog />: https://taeny.dev/
    • 

          
  • brouk's devlog: https://brouk-devlog.netlify.com/
    • 

          
  • CoodingPenguin's Repository: https://cooding-penguin.netlify.com/
    • 

          
  • DevRappers.dev: https://devrappers.dev/
    • 

          
  • Let's doodle: https://duduling-blog.netlify.app/
    • 

          
  • Hong_Devlog: https://hong-dev.github.io/
    • 

          
  • samsara-ku's devlog: https://samsara-ku.dev/
    • 

          
  • muse.kim: https://muse.kim/
    • 

          
  • Juunone's devlog: https://juunone.netlify.app/
    • 

          
  • cereme.dev: https://cereme.dev
    • 

          
  • taekki.dev: https://taekki.dev
    • 

          
  • kkh913's Developer Blog: https://kkh913.github.io
    • 

          
  • jeeneee's devlog: https://jeeneee.dev
    • 

          
  • KSP Blog: https://ksp.now.sh
    • 

          
  • bobs log: https://undefine.me
    • 

          
  • Jane's PS Blog: https://janeljs.github.io
    • 

          
  • hedrinker's devlog: https://hexdrinker.dev
    • 

        


  



> 이 ν…œν”Œλ¦Ώμ„ μ‚¬μš©ν•˜μ—¬ λΈ”λ‘œκ·Έλ₯Ό λ§Œλ“€μ—ˆλ‹€λ©΄ μœ„ 'μ‚¬μš©ν•œ λΈ”λ‘œκ·Έ' λ¦¬μŠ€νŠΈμ— μΆ”κ°€ν•΄μ£Όμ„Έμš”! PR을 톡해 λ“±λ‘ν•΄μ£Όμ‹œλ©΄ λ©λ‹ˆλ‹€!



## 😎 Quick Start



### 1. Gatsby ν”„λ‘œμ νŠΈλ₯Ό μ‹œμž‘



```sh

# 이 λΈ”λ‘œκ·Έ μŠ€νƒ€ν„°λ₯Ό μ‚¬μš©ν•˜μ—¬ gatsby ν”„λ‘œμ νŠΈλ₯Ό μ‹œμž‘ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

npx gatsby new my-blog-starter https://github.com/JaeYeopHan/gatsby-starter-bee

```



> λ§Œμ•½ `npx`λ₯Ό μ‚¬μš©ν•˜κ³  μžˆμ§€ μ•ŠλŠ”λ‹€λ©΄, [Gatsby Getting Started](https://www.gatsbyjs.org/docs/quick-start) 글을 μ°Έκ³ ν•˜κ±°λ‚˜ μ•„λž˜ μ»€λ§¨λ“œλ₯Ό μ‹€ν–‰ν•΄μ£Όμ„Έμš”.



```sh

npm install -g gatsby-cli

gatsby new my-blog-starter https://github.com/JaeYeopHan/gatsby-starter-bee

```



### 2. 이제 λ‘œμ»¬μ—μ„œ ν™•μΈν•˜μ‹€ 수 μžˆμŠ΅λ‹ˆλ‹€



```sh

cd my-blog-starter/

npm start

# λΈŒλΌμš°μ €μ—μ„œ localhost:8000둜 μ ‘κ·Όν•©λ‹ˆλ‹€.

```



### 3. ν¬μŠ€νŒ…μ„ μΆ”κ°€ν•˜μ„Έμš”



λ‹€μŒ 두 κ³³μ—μ„œ ν¬μŠ€νŒ…μ„ μΆ”κ°€ν•  수 μžˆμŠ΅λ‹ˆλ‹€.



- λΈ”λ‘œκ·Έ ν¬μŠ€νŒ…μ€ `content/blog` 디렉토리에 μΆ”κ°€ν•΄μ£Όμ„Έμš”.

- 웹에 μ˜¬λ €λ‘˜ 이λ ₯μ„œλŠ” `content/__about` 디렉토리에 μΆ”κ°€ν•΄μ£Όμ„Έμš”.



> λͺ‡ κ°€μ§€μ˜ 메타데이터와 λ§ˆν¬λ‹€μš΄ λ¬Έλ²•μœΌλ‘œ ν¬μŠ€νŒ…μ„ μž‘μ„±ν•  수 μžˆμŠ΅λ‹ˆλ‹€.



#### μƒˆλ‘œμš΄ 포슀트λ₯Ό μž‘μ„±ν•  λ•Œ μ»€λ§¨λ“œλΌμΈμ„ 톡해 ν•  수 μžˆμŠ΅λ‹ˆλ‹€



![cli-tool-example](assets/cli-tool-example.gif)



```sh

npm run post

```



μœ„ μ»€λ§¨λ“œλ₯Ό μž…λ ₯ν•˜λ©΄ μƒˆλ‘œμš΄ ν¬μŠ€νŠΈκ°€ μƒμ„±λ©λ‹ˆλ‹€.



πŸ‘‰ **gatsby-post-gen** CLI 도ꡬλ₯Ό μ‚¬μš©ν•©λ‹ˆλ‹€. (https://github.com/JaeYeopHan/gatsby-post-gen)



### 4. 메타데이터 μˆ˜μ •



`/gatsby-meta-config.js` νŒŒμΌμ—μ„œ λΈ”λ‘œκ·Έλ₯Ό μ„€μ •ν•˜λŠ” μ—¬λŸ¬ μš”μ†Œλ₯Ό μˆ˜μ •ν•  수 μžˆμŠ΅λ‹ˆλ‹€.



### 5. [Netlify](https://netlify.com)둜 배포



[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/JaeYeopHab/gatsby-starter-bee)



:bulb: github pagesλ₯Ό 톡해 λ°°ν¬ν•˜κ³  μ‹Άλ‹€λ©΄ μ•„λž˜ npm scriptλ₯Ό `package.json`에 μΆ”κ°€ν•΄μ£Όμ„Έμš”.



```json

"scripts": {

    "deploy": "gatsby build && gh-pages -d public -b master -r '[email protected]:${your github id}/${github page name}.github.io.git'"

}

```



> `gh-pages` λͺ¨λ“ˆμ΄ ν•„μš”ν•  경우 μ„€μΉ˜κ°€ ν•„μš”ν•©λ‹ˆλ‹€.



## 🧐 μž…λ§›μ— 맞게 λ°”κΎΈκΈ°



### βš™ μ„€μ •



```sh

/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

```



### β›‘ ꡬ쑰



```sh

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

```



### 🎨 μŠ€νƒ€μΌ



`src/styles` λ””λ ‰ν† λ¦¬μ—μ„œ CSS 속성듀을 μˆ˜μ •ν•  수 μžˆμŠ΅λ‹ˆλ‹€.



```sh

src/styles

β”œβ”€β”€ code.scss

β”œβ”€β”€ dark-theme.scss

β”œβ”€β”€ light-theme.scss

└── variables.scss

```



### 🍭 κΏ€νŒ



- ν”„λ‘œν•„ 사진! (replace file in `/content/assets/profile.png`)

- νŒŒλΉ„μ½˜ 이미지! (replace file in `/content/assets/felog.png`)

- ν—€λ”μ˜ κ·ΈλΌλ°μ΄μ…˜! (\$theme-gradient `/styles/variables.scss`)

- `robots.txt` 에 λ°°ν¬λ˜λŠ” λ„λ©”μΈμœΌλ‘œ μ—…λ°μ΄νŠΈλ₯Ό μœ„ν•œ 섀정을 ν•΄μ£Όμ„Έμš”! (replace file in `gatsby-config.js` 의 `https://your-blog.netlify.app` λΆ€λΆ„)

- Utterancesλ₯Ό μœ„ν•œ repositoryλ₯Ό 섀정을 ν•΄μ£Όμ„Έμš”! (`/gatsby-meta-config.js`의 repository μ£Όμ†Œλ₯Ό κ΅μ²΄ν•΄μ£Όμ„Έμš”.)

  - ⚠️ 이 κ°€μ΄λ“œ(https://utteranc.es/)λ₯Ό κΌ­ ν™•μΈν•΄μ£Όμ„Έμš”.



## β˜• λ§ˆμŒμ— λ“œμ…¨λ‚˜μš”?



Buy Me A Coffee



## πŸ€” λ§Œμ•½μ—...



λ§Œμ•½ ν˜„μž¬ λ―Έλ””μ—„μ—μ„œ λΈ”λ‘œκ·Έλ₯Ό μš΄μ˜μ€‘μ΄μ‹œλΌλ©΄ λ§ˆμ΄κ·Έλ ˆμ΄μ…˜μ„ κ³ λ €ν•΄λ³΄μ„Έμš”! [medium-to-own-blog](https://github.com/mathieudutour/medium-to-own-blog)!



## :bug: λ²„κ·Έμ œλ³΄



[Issue](https://github.com/JaeYeopHan/gatsby-starter-bee/issues)



## 🎁 κΈ°μ—¬ν•˜κΈ°



[Contributing guide](./CONTRIBUTING.md)



## LICENSE



[MIT](./LICENSE)






Project by @Jbee✌