[Gatsby] 기본 사용법

깃허브와 연결되는 개인 앱/웹

개인이 작업한 프론트엔드를 깃허브에 저장하면 Gatsby cloud가 이를 읽고 반영한다.

1. 프로젝트 생성

• cmd 진입
• cd c:\work
• mkdir gatsby_projects
• cd gatsby_projects
• gatsby new

✔What would you like to call your site?
· My Blog 2022 05 31
✔What would you like to name the folder where your site will be created?
· gatsby_projects/ my-blog-2022-05-31
✔ Will you be using JavaScript or TypeScript?
· JavaScript
✔ Will you be using a CMS?
· No (or I'll add it later)
✔ Would you like to install a styling system?
· No (or I'll add it later)
프로젝트 명 : My Blog 2022 05 31

• 언어 : 자바스크립트
• CMS : 선택안함
• 스타일링시스템 : 선택안함
• 기타 플러그인 : 선택안함

2. 개발모드로 실행

• cd my-blog-2022-05-31
• code .
• VS CODE 실행
• VS CODE 터미널 진입
• npm run start
• npm run develop 도 가능

http://localhost:8000

3. github 프로젝트 생성, gatsby cloud 가입, 로그인, site 추가 후 배포

개츠비 클라우드-대시보드 : https://www.gatsbyjs.com/dashboard

4. 문제가 생겼을 때 해결법

• 방법 1 : Ctrl + C, npm run start
• 방법 2 : Ctrl + C, npm run clean, npm run start
• 방법 3: VS CODE 재시작
• 방법 4 : PC 재부팅
• 방법 5 : 프로젝트 폴더 후, 다시 clone 받아서 진행

5. 다른 곳에서 작업 이어가는 방법

• cmd 진입
• cd c:\work
• mkdir gatsby_projects
• cd gatsby_projects
• mkdir my-blog-2022-05-31
• git init
• git config user.name "GITHUB_아이디"
• git config user.email "GITHUB_이메일"
• git remote add origin GITHUB_원격지_리포지터리_주소
• git pull origin master
• code .
• VS CODE 터미널 진입
• npm install
• npm run start