![\"Deploy](\"https://www.netlify.com/img/deploy/button.svg\")
제 블로그의 테마나 Gatsby의 다른 테마를 활용해서 Github Blog를 만들고 싶은 분들이 계실텐데요! 이런 분들에게 도움을 드리고자 이 글을 쓰게 되었습니다. 잘 안되는 부분이나 궁금한 점을 댓글로 남겨주면 확인해보고 답변 드리도록 하겠습니다!
\nGitHub Blog를 만들려면 Github에 Repository를 생성해야 합니다.
\nGitHub에 로그인 한 뒤에 우측 상단에 있는 New Repository 버튼을 클릭하면 repository 생성 페이지로 이동하게 됩니다. 이 때 Import a repository 버튼을 클릭합니다.
\n이제 실제로 수정하고 배포할 수도록 내 컴퓨터(local)에 Repsitory를 가져와볼 건데요! 먼저 Repository에서 아래와 같이 초록색 Code 버튼을 클릭하면 링크가 나오게 되는데, 이 링크를 복사합니다.
\n여기서 Source에 있는 Branch를 master(main)에서 gh-pages로 변경한 후에 저장합니다.
\n이제 실제로 잘 배포가 되었는지 확인해봅시다. 여태까지 문제가 없으셨다면 [GitHubID].github.io에 접근했을 때 블로그가 잘 보이는 것을 확인하실 수 있으실 겁니다.
\n블로그를 수정하시는 방법은 각 블로그 테마마다 다를텐데요. 그에 맞춰서 변동사항을 commit하신 후에 아래 명령어를 실행하시면 변동사항이 블로그에 배포됩니다!
\nnpm run deploy마지막으로 제 블로그 테마를 활용하고 싶으시다면 아래 링크를 참고해주세요!\nhttps://www.zoomkoding.com/gatsby-starter-zoomkoding-introduction
\n궁금하신 점이 있으시다면 이슈로 남겨주시면 최대한 빠르게 답변 드리도록 하겠습니다!🙋♂️
\n\n\n🤔 혹시 특정 기능이 없어서 테마 사용을 망설이시거나 제안하고 싶으신 기능이 있으시다면,
\n
\n👉 여기에 댓글 남겨주세요! 적극적으로 반영하겠습니다 :)
위 과정을 따라하시면서 궁금하신 점이 있다면 아래 댓글로 남겨주세요!👇
블로그를 직접 운영하면서 조금씩 그려봤던 이상적인 개발 블로그 테마를 Gatsby를 통해 만들어보게 되었습니다.
\n이 테마가 블로그를 운영하고자 하시는 분들에게 자신의 이야기를 잘 담을 수 있는 공간이 되었으면 좋겠습니다.🙌
블로그 테마가 맘에 드셨다면 아래 과정을 통해 자신의 블로그를 만들어보시길 바랍니다!
\n\n\n혹시 만드시는 과정에서 궁금하신 점이나 어려움이 있으시다면 이슈를 통해 문의 남겨주세요!
\n
\n스타는 블로그 테마를 지속적으로 발전시키는데 큰 힘이 됩니다!⭐️
Github Page나 Netlify 중 원하시는 배포 환경에 따라 다음 과정을 진행하시면 빠르게 블로그를 만드실 수 있습니다.
\n깃헙 페이지를 통해 블로그를 만드시다면 아래 글을 참고해주세요!
\nGatsby 테마로 GitHub Blog 만들기
아래 버튼을 활용하면 개인 계정에 zoomkoding-gatsby-blog를 사용하고 있는 Repository 생성과 Netlify에 배포를 동시에 진행할 수 있습니다. 이후에, 생성된 Repository를 clone합니다.
아래 명령어를 실행하여 로컬 환경에 블로그를 실행합니다.
\n# Install dependencies\n$ npm install\n\n# Start development server\n$ npm start위 명령어가 문제 없이 실행됐다면 http://localhost:8000에서 블로그를 확인하실 수 있습니다.
\n위의 과정을 다 진행하셨다면 배포와 개발 환경이 세팅이 끝났습니다! 🙌
\n이제 블로그 정보를 입력하게 되면 나만의 블로그가 만들어지게 됩니다. 이를 위해 gatsby-meta-config.js에 있는 여러값들을 변경해줍니다.
title: '' // zoomkoding.com\ndescription: '' // 줌코딩의 개발일기\nlanguage: 'ko', // 'ko', 'en' (영어 버전도 지원하고 있습니다.)\nsiteUrl: '' // https://www.zoomkoding.com\nogImage: '/og-image.png', // 공유할 때 보이는 미리보기 이미지로 '/static' 하위에 넣고 싶은 이미지를 추가하시면 됩니다.블로그 글들에 댓글을 달 수 있길 원하신다면 utterances를 통해서 이를 설정하실 수 있습니다.
\n\n\n🦄 utterances 사용방법은 링크를 참고해주세요!
\n
comments: {\n utterances: {\n repo: '' // zoomkoding/zoomkoding-gatsby-blog\n },\n}\n글쓴이(author)에 입력하신 정보는 홈페이지와 about 페이지 상단에 있는 글쓴이를 소개하는 섹션인 bio에서 사용됩니다. description에 자신을 설명하는 문구들을 넣으면 애니메이션으로 보여지게 됩니다. bio에 들어가는 이미지를 바꾸시려면 assets에 원하시는 파일을 추가하시고 파일의 이름을 thumbnail에 넣어주시면 됩니다.(gif도 지원합니다!)
아이폰 미모티콘으로 thumbnail을 만드는 방법이 궁금하시면 이 글을 참고해주세요!
\n\n\n🤖 위에서 설정한 언어에 따라 description의 포맷이 달라집니다.
\n
author: {\n name: '정진혁',\n bio: {\n role: '개발자',\n description: ['사람에 가치를 두는', '능동적으로 일하는', '이로운 것을 만드는'],\n thumbnail: 'zoomkoding.gif',\n },\n social: {\n github: 'https://github.com/zoomKoding',\n linkedIn: 'https://www.linkedin.com/in/jinhyeok-jeong-800871192',\n email: 'zoomkoding@gmail.com',\n },\n},about 페이지 또한 gatsby-meta-config.js를 통해 생성됩니다. about 하위에 있는 timestamps와 projects에 각각 정보를 입력하시면 about 페이지가 자동 생성됩니다.
\n아래와 같이 각 timestamp 정보를 배열로 제공해주시면 입력하신 순서에 맞춰서 timestamps section에 보여지게 됩니다.
\n\n\nlinks에 해당 정보가 없다면 생략해도 됩니다.
\n
{\n date: '2021.02 ~',\n activity: '개인 블로그 개발 및 운영',\n links: {\n post: '/gatsby-starter-zoomkoding-introduction',\n github: 'https://github.com/zoomkoding/zoomkoding-gatsby-blog',\n demo: 'https://www.zoomkoding.com',\n },\n},마찬가지로 각 project 정보를 배열로 제공해주시면 입력하신 순서에 맞춰서 projects section에 보여지게 됩니다.
\n{\n title: '개발 블로그 테마 개발',\n description:\n '개발 블로그를 운영하는 기간이 조금씩 늘어나고 점점 많은 생각과 경험이 블로그에 쌓아가면서 제 이야기를 담고 있는 블로그를 직접 만들어보고 싶게 되었습니다. 그동안 여러 개발 블로그를 보면서 좋았던 부분과 불편했던 부분들을 바탕으로 레퍼런스를 참고하여 직접 블로그 테마를 만들게 되었습니다.',\n techStack: ['gatsby', 'react'],\n thumbnailUrl: 'blog.png',\n links: {\n post: '/gatsby-starter-zoomkoding-introduction',\n github: 'https://github.com/zoomkoding/zoomkoding-gatsby-blog',\n demo: 'https://www.zoomkoding.com',\n }\n}그렇게 내용을 문제 없이 입력하셨다면 나만의 블로그가 탄생한 것을 확인하실 수 있습니다.🎉
\n\n\n변동사항을 실행 중인 블로그에서 확인하시려면
\nnpm start를 통해 재실행해주세요!
본격적으로 블로그에 글을 쓰려면 /content 아래에 디렉토리를 생성하고 index.md에 markdown으로 작성하시면 됩니다.
\n\n이 때, 폴더의 이름은 경로를 생성하는데 됩니다.
\n
index.md 파일의 상단에는 아래와 같이 emoji, title, date, author, tags, categories 정보를 제공해야 합니다.
\n\n\nemoji는 글머리에 보여지게 되며, categories는 띄어쓰기로 나누어 여러개를 입력할 수 있습니다.
\n
---\nemoji: 🧢\ntitle: Getting Started\ndate: '2021-03-22 23:00:00'\nauthor: 줌코딩\ntags: tutorial\ncategories: tutorial\n---글에 이미지를 첨부하고 싶으시다면 같은 디렉토리에 이미지 파일을 추가하셔서 아래와 같이 사용하시면 됩니다.
\n글의 우측에 목차가 보이기를 원하신다면 index.md 파일 맨 아래에 다음 내용을 추가하시면 자동으로 목차가 생성됩니다.
```toc\n```궁금하신 점이 있으시다면 이슈로 남겨주시면 최대한 빠르게 답변 드리도록 하겠습니다!🙋♂️
\n\n\n🤔 혹시 특정 기능이 없어서 테마 사용을 망설이시거나 제안하고 싶으신 기능이 있으시다면,
\n
\n👉 여기에 댓글 남겨주세요! 적극적으로 반영하겠습니다 :)