Demo Websites: English | Korean
블로그를 직접 운영하면서 조금씩 그려봤던 이상적인 개발 블로그 테마를 Gatsby를 통해 만들어보게 되었습니다.
이 테마가 블로그를 운영하고자 하시는 분들에게 자신의 이야기를 잘 담을 수 있는 공간이 되었으면 좋겠습니다.🙌
블로그 테마가 맘에 드셨다면 아래 과정을 통해 자신의 블로그를 만들어보시길 바랍니다!
혹시 만드시는 과정에서 궁금하신 점이나 어려움이 있으시다면 이슈를 통해 문의 남겨주세요!
⭐️는 블로그 운영에 큰 힘이 됩니다!😊
- 😛 미모지와 문자 애니메이션를 통한 자기 소개
- 🔍 포스팅 검색 지원
- 🌘 다크모드 지원
- 💅 코드 하이라이팅 지원
- 👉 글 목차 자동 생성(ToC)
- 💬 Utterances 댓글 기능 지원
- ⚙️ meta-config를 통한 세부 설정 가능
- 👨💻 About Page 내용 변경 가능
- 📚 Posts Page 자동 생성
- 🛠 sitemap.xml, robots.txt 자동 생성
- 📈 Google Analytics 지원
- 🧢 Emoji 지원
Github Page나 Netlify 중 원하시는 배포 환경에 따라 다음 과정을 진행하시면 빠르게 블로그를 만드실 수 있습니다.
깃헙 페이지를 통해 블로그를 만드시다면 아래 글을 참고해주세요!
Gatsby 테마로 GitHub Blog 만들기
아래 버튼을 활용하면 개인 계정에 zoomkoding-gatsby-blog를 사용하고 있는 Repository 생성과 Netlify에 배포를 동시에 진행할 수 있습니다. 이후에, 생성된 Repository를 clone합니다.
아래 명령어를 실행하여 로컬 환경에 블로그를 실행합니다.
# Install dependencies
$ npm install
# Start development server
$ npm start위 명령어가 문제 없이 실행됐다면 http://localhost:8000에서 블로그를 확인하실 수 있습니다.
위의 과정을 다 진행하셨다면 배포와 개발 환경이 세팅이 끝났습니다! 🙌
이제 블로그 정보를 입력하게 되면 나만의 블로그가 만들어지게 됩니다. 이를 위해 gatsby-meta-config.js에 있는 여러값들을 변경해줍니다.
title: '' // zoomkoding.com
description: '' // 줌코딩의 개발일기
language: 'ko', // 'ko', 'en' (영어 버전도 지원하고 있습니다.)
siteUrl: '' // https://www.zoomkoding.com
ogImage: '/og-image.png', // 공유할 때 보이는 미리보기 이미지로 '/static' 하위에 넣고 싶은 이미지를 추가하시면 됩니다.블로그 글들에 댓글을 달 수 있길 원하신다면 utterances를 통해서 이를 설정하실 수 있습니다.
🦄 utterances 사용방법은 링크를 참고해주세요!
comments: {
utterances: {
repo: '' // zoomkoding/zoomkoding-gatsby-blog
},
}글쓴이(author)에 입력하신 정보는 홈페이지와 about 페이지 상단에 있는 글쓴이를 소개하는 섹션인 bio에서 사용됩니다. description에 자신을 설명하는 문구들을 넣으면 애니메이션으로 보여지게 됩니다. bio에 들어가는 이미지를 바꾸시려면 assets에 원하시는 파일을 추가하시고 파일의 이름을 thumbnail에 넣어주시면 됩니다.(gif도 지원합니다!)
아이폰 미모티콘으로 thumbnail을 만드는 방법이 궁금하시면 이 글을 참고해주세요!
🤖 위에서 설정한 언어에 따라 description의 포맷이 달라집니다.
author: {
name: '정진혁',
bio: {
role: '개발자',
description: ['사람에 가치를 두는', '능동적으로 일하는', '이로운 것을 만드는'],
thumbnail: `zoomkoding.gif`,
},
social: {
github: 'https://github.com/zoomKoding',
linkedIn: 'https://www.linkedin.com/in/jinhyeok-jeong-800871192',
email: 'zoomkoding@gmail.com',
},
},about 페이지 또한 gatsby-meta-config.js를 통해 생성됩니다. about 하위에 있는 timestamps와 projects에 각각 정보를 입력하시면 about 페이지가 자동 생성됩니다.
아래와 같이 각 timestamp 정보를 배열로 제공해주시면 입력하신 순서에 맞춰서 timestamps section에 보여지게 됩니다.
links에 해당 정보가 없다면 생략해도 됩니다.
{
date: '2021.02 ~',
activity: '개인 블로그 개발 및 운영',
links: {
post: '/gatsby-starter-zoomkoding-introduction',
github: 'https://github.com/zoomkoding/zoomkoding-gatsby-blog',
demo: 'https://www.zoomkoding.com',
},
},마찬가지로 각 project 정보를 배열로 제공해주시면 입력하신 순서에 맞춰서 projects section에 보여지게 됩니다.
{
title: '개발 블로그 테마 개발',
description:
'개발 블로그를 운영하는 기간이 조금씩 늘어나고 점점 많은 생각과 경험이 블로그에 쌓아가면서 제 이야기를 담고 있는 블로그를 직접 만들어보고 싶게 되었습니다. 그동안 여러 개발 블로그를 보면서 좋았던 부분과 불편했던 부분들을 바탕으로 레퍼런스를 참고하여 직접 블로그 테마를 만들게 되었습니다.',
techStack: ['gatsby', 'react'],
thumbnailUrl: 'blog.png',
links: {
post: '/gatsby-starter-zoomkoding-introduction',
github: 'https://github.com/zoomkoding/zoomkoding-gatsby-blog',
demo: 'https://www.zoomkoding.com',
}
}그렇게 내용을 문제 없이 입력하셨다면 나만의 블로그가 탄생한 것을 확인하실 수 있습니다.🎉
변동사항을 실행 중인 블로그에서 확인하시려면
npm start를 통해 재실행해주세요!
본격적으로 블로그에 글을 쓰려면 /content 아래에 디렉토리를 생성하고 index.md에 markdown으로 작성하시면 됩니다.
이 때, 폴더의 이름은 경로를 생성하는데 됩니다.
index.md 파일의 상단에는 아래와 같이 emoji, title, date, author, tags, categories 정보를 제공해야 합니다.
emoji는 글머리에 보여지게 되며, categories는 띄어쓰기로 나누어 여러개를 입력할 수 있습니다.
---
emoji: 🧢
title: Getting Started
date: '2021-03-22 23:00:00'
author: 줌코딩
tags: tutorial
categories: tutorial
---
글에 이미지를 첨부하고 싶으시다면 같은 디렉토리에 이미지 파일을 추가하셔서 아래와 같이 사용하시면 됩니다.
글의 우측에 목차가 보이기를 원하신다면 index.md 파일 맨 아래에 다음 내용을 추가하시면 자동으로 목차가 생성됩니다.
```toc
```
궁금하신 점이 있으시다면 이슈로 남겨주시면 최대한 빠르게 답변 드리도록 하겠습니다!🙋♂️
🤔 혹시 특정 기능이 없어서 테마 사용을 망설이시거나 제안하고 싶으신 기능이 있으시다면,
👉 여기에 댓글 남겨주세요! 적극적으로 반영하겠습니다 :)