React.js
와Gatsby.js
를 이용하여 누구나 손쉽게 블로그를 운영할 수 있습니다.Netlify
와Github
를 통한 무중단, 자동배포, 서버리스 웹서비스를 제공합니다.- 이 템플릿을 이용하면 리액트에 대한 지식이 없어도
리액트 기반 블로그
를 체험할 수 있습니다. - 별도의 운영서버없이
무료 호스팅 서비스
를 이용하여 나만의 블로그를직접
제작할 수 있습니다.
- 💄 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
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
에 본인의 블로그를 추가해주시길 부탁드립니다!
# 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
cd my-blog-starter/
npm run develop
# open localhost:8000
You can write...
- contents to blog in
content/blog
directory. - resume
content/__about
directory.
With markdown syntax and some 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'"
}
/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
) - 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/)
Project by @LeeAndJang✌