Gatsby 템플릿을 활용해 빠르게 React 기반 정적 웹사이트를 만들고 배포해보자!
* 템플릿에 따라 설치 및 실행 방식이 조금씩 다를 수 있다
마음에 드는 무료 Gatsby 템플릿의 GitHub 저장소를 찾아준다🔽
EASEOUT
Coding tutorials about CSS, HTML, JavaScript, and articles about design creativity & modern web development technology.
www.easeout.co
다음 명령어들을 차례대로 입력해 디렉토리를 생성하고, GitHub에 연동해준다
npm install -g gatsby-cli
gatsby new (디렉토리 이름) (템플릿 GitHub 저장소 주소)
# gatsby new my-app https://github.com/joseph-106/gatsby-template
cd (디렉토리 이름)
yarn
다음 명령어로 프로젝트를 실행하고 로컬 환경에서 커스텀해준다
gatsby develop
# http://localhost:8000
Netlify로 GitHub 저장소를 배포하면 커밋 자동 배포 설정까지 끝!
Netlify: Develop & deploy the best web experiences in record time
A powerful serverless platform with an intuitive git-based workflow. Automated deployments, shareable previews, and much more. Get started for free!
www.netlify.com
Reference🔽
Gatsby 템플릿으로 블로그 시작하기
나는 블로그 유목민이다. 네이버 블로그를 시작으로 개발자라면 그래도 깃헙 블로그 하나쯤은 있어야지 싶어서 Jekyll 테마를 사용해 블로그를 만들고, 이제는 자주 사용하는 React 툴 기반으로 만
dailyco.tech
GitHub - donaldboulton/gatsby-starter-dimension-v4: Gatsby.js V4 starter template based on Dimension by HTML5 UP. Check out http
Gatsby.js V4 starter template based on Dimension by HTML5 UP. Check out https://gatsby-starter-dimension-v4.netlify.app/ for more Gatsby starters and templates. - GitHub - donaldboulton/gatsby-star...
github.com
GitHub - cobiwave/gatsby-simplefolio: ⚡️ A minimal Gatsby portfolio template for Developers
⚡️ A minimal Gatsby portfolio template for Developers - GitHub - cobiwave/gatsby-simplefolio: ⚡️ A minimal Gatsby portfolio template for Developers
github.com
'Front-end > React' 카테고리의 다른 글
| [TIL] React에서 utterances 구현하기 (0) | 2022.04.24 |
|---|---|
| [TIL] CRA & TypeScript 초기 세팅 (ESLint & Prettier) (0) | 2022.03.26 |
| [TIL] progress 태그 애니메이션 (2) | 2022.02.07 |
| [TIL] React 토스트 메시지 (6) | 2022.01.27 |
| [TIL] React 카카오링크 API (4) | 2022.01.24 |