Ramsbaby/ramsbaby-blog-starter

LeeAndJang Gatsby blog starter 는...

React.js와 Gatsby.js를 이용하여 누구나 손쉽게 블로그를 운영할 수 있습니다.
Netlify와 Github를 통한 무중단, 자동배포, 서버리스 웹서비스를 제공합니다.
이 템플릿을 이용하면 리액트에 대한 지식이 없어도 리액트 기반 블로그를 체험할 수 있습니다.
별도의 운영서버없이 무료 호스팅 서비스를 이용하여 나만의 블로그를 직접 제작할 수 있습니다.

LeeAndJang Gatsby blog starter 에서 제공하는 서비스는...

💄 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(Google Analytics)
⭐ Enhance UX
⚙ Configurable

데모 사이트

Click Here !

Use case (블로그를 사용해주시는 고마운 분들)

L's tech blog: https://ramsbaby.netlify.com/
J's tech blog: https://goguj.netlify.com/
김선휘님의 blog: https://bisunny.netlify.com/

이 블로그 템플릿을 사용하시는 경우, Use case 에 본인의 블로그를 추가해주시길 부탁드립니다!

🤟 Quick Start

1. Clone a project

# create a new Gatsby site using the blog starter
npx gatsby new my-blog-starter https://github.com/LeeAndJang/L-J-gatsby-blog-starter

If you are not using npx, following Gatsby Getting Started

npm install -g gatsby-cli
gatsby new my-blog-starter https://github.com/LeeAndJang/L-J-gatsby-blog-starter

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

4. Fix meta data

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 '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)
Create thumbnail image (add file to /static)
Favicon image! (replace file in /content/assets/React.js_logo-512.png)
Header gradient! (\$theme-gradient /styles/variables.scss)
Utterances repository! (replace repository address in /gatsby-meta-config.js)
- ⚠️ Please check, this guide(https://utteranc.es/)