0. 깃허브 레포지토리 생성 & Node.js, Gatsby-cli 설치
💡 컴퓨터에 node.js 와 gatsby-cli 가 설치되어 있어야합니다.
테마를 설치하기에 앞서 Gatsby Theme 를 본인의 Github Repository 가 필요합니다. 레포지토리를 하나 생성해주세요.
1. 테마 설치하기 👋
아래 과정을 따라서 블로그 테마를 직접 만들어보세요!
npx gatsby new your-blog-name https://github.com/msung99/Gatsby-Starter-Haon.git2. Gatsby 로컬 서버 구동하기
본인의 로컬에 테마를 내려받았다면, 아래의 과정에 따라 게츠비 로컬 서버를 구동해주세요.
cd your-blog-name
npm install // install node.js
gatsby develop // or "npm start"만약 위 명령어가 의존성 충돌 문제로 인해 원활히 작동되지 않는다면, 아래 명령어를 실행 후 다시 시도해주세요.
npm i --legacy-peer-deps위 명령어가 문제 없이 실행됐다면 http://localhost:8000 에서 초기 블로그 상태를 확인할 수 있습니다!
3. 블로그 정보 입력하기
본인의 메타 정보를 직접 기입하여 커스터마이징 할 수 있습니다. meta-config.js 로 이동하면 아래와 같은 초기 상태를 확인할 수 있습니다.
module.exports = {
title: `haon.theme`,
description: `Hello! This is a tech blog theme using Gatsby 🤩`,
author: `Haon`,
siteUrl: `https://gatsby-starter-haon.netlify.app`,
keywords: [`server`, `backend`, `gatsby`],
repo: "msung99/Gatsby-Starter-Haon",
gtag: "G-CD9E7GB2ED", // with. Google Analytics
socialLinks: {
github: "https://github.com/msung99",
instagram: "https://www.instagram.com/iminseong920/",
facebook: "https://www.facebook.com/",
linkedin: "https://www.linkedin.com/",
velog: "https://velog.io/@msung99",
email: "msung6924@naver.com",
},
}아래의 과정에 따라 siteMetadata 를 수정하세요.
3-1. 기본 프로필 설정
본인의 기본 프로필을 입력하세요.
title: ``, // haon.blog
description: ``, // Hello! This is a tech blog theme using Gatsby 🤩
author: ``, // Haon
siteUrl: ``, // https://gatsby-starter-haon.netlify.app/
keywords: [ ], // [`server`, `backend`, `gatsby`]3-2. utterances (댓글) 설정
현 템플릿은 Issue 생성 기반 댓글 방식에 기반하고 있습니다. 원활한 댓글 기능 활성화를 위해 본인의 깃허브 레포지토리 정보를 기입하세요.
repo: "your-github-name/repository-name" // "msung99/Gatsby-Starter-Haon",3-3. (선택) Google 애널리틱스 연동
개설한 블로그 접속자를 파악하는 방법으로 Google 애널리틱스 기능을 사용할 수 있습니다. gatsby-starter-haon 은 손쉽게 구글 애널리틱스와 본인의 블로그 사이트를 연동하여 접속자 수를 파악할 수 있도록 합니다.
Goole Analytics 공식 문서 를 참고하여 애널릭틱스 기능에 대해 살펴보고, tracking id 를 발급받으세요. 그리고 발급받은 tracking id 를 아래와 같이 기입하세요.
gtag: "G-CD9E7GB2ED" // your google analytics tracking id3-4. 소설 계졍 연동
마지막으로 소설 계정을 연동할 수 있습니다. 소셜 이모티콘을 클릭하면 해당 URL 로 넘어가는 기능을 위해 필요합니다. 아래 소설 계정중 원하는 필드를 선택적으로 커스터마이징하여 사용하세요.
socialLinks: {
github: "" // "https://github.com/msung99",
instagram: "" // "https://www.instagram.com/iminseong920",
facebook: "" // "https://www.facebook.com/",
linkedin: "" // "https://www.linkedin.com/",
velog: "" // "https://velog.io/@msung99",'
email: "" // `https://msung6924@naver.com`,
},4. 블로그 배포하기
Github Page 또는 Netlify 중 원하시는 배포 환경에 따라 빠르게 블로그를 만드실 수 있습니다.
Gatsby-Haon-Blog 테마를 사용하고 있는 본인 깃허브 레포지토리를 Netlify 를 연동하여 배포를 진행할 수 있습니다. 이 과정은 크게 어렵지 않으니 생략합니다.
5. 기타 유의사항
gatsby-starter-haon 은 최소한의 디폴트 포스트가 필요합니다. default 패키지 내에 존재하는 2개의 포스트는 삭제하지 않아야 원활히 동작합니다.
Isuee, PR 등록
Gatsby-Starter-Haon 을 사용하다가 소통하고 싶은 내용이 생긴다면 Social 페이지 또는 Issue 등록하기 에다 자유롭게 코멘트를 남겨주세요.
- 제안사항 (Suggestions)
- Q&A
- 버그 발견 및 코드 개선 (Bug / Code Refactoring)
- 신규기능 (New Features / Functions)
코멘트를 남겨주셔도 좋고, 별도로 Issue Template 양식에 맞추어 이슈를 마음껏 등록하셔도 좋습니다.
무엇이든 좋습니다. 양질의 소프트웨어 향상, 테마 발전을 위해서 많은 분들의 의견을 기다리고 있습니다 👍