Gatsby와 Netlify로 기술 블로그 만들기

Gatsby란?

React 기반 정적 사이트 생성기
장점이나 구조 등에 대해서는

React 기반 정적 사이트 생성기 Gatsby의 진정한 힘을 보여줍니다.
htps : // 이 m/우는 j/있어 ms/1b7f0아86596353587466
에 기재되어 있습니다. 기술 블로그를 시작하려고 생각할 때 React 기반의 주위와 새로운 기술을 사용했기 때문에 사용했습니다.

Netlify

정적 사이트를 초고속으로 제공할 수 있는 웹 서비스
위의 Gatsby와 결합하여 GitHub에 PUSH한 프런트 엔드 자재를 단번에 공개할 수 있습니다.

절차(yarn)

gatsby-cli 전역 설치

yarn global add gatsby-cli

cli를 사용하여 블로그를 만듭니다.
디자인 템플릿은 Gatsby Starters을 사용합니다.

gatsby new <site-name> <Gatsby Starters>

콘솔에도 표시되지만,
다음 명령으로 내용을 로컬로 확인할 수 있습니다.

cd <site-name>
gatsby develop

http://localhost:8000/
파일의 구조는, 이용한 스타터에 의한다고 생각하기 때문에, readme등을 들여다 보며 조사한다.

GitHub로 PUSH

GitHub에 푸시 한 Netlify에 배포하는 흐름이므로,
우선 GitHub에 PUSH합니다.

git init
git add .
git commit -m "first commit"

git remote add origin <追加したいリポジトリURL>
git push -u origin master

Netlify로 배포

계정을 만든 후 아래의 New site from Git을 클릭합니다.



Create a new site의 페이지로 이동하므로
GitHub를 선택합니다.



owner와 Branch를 설정하고
마지막으로 아래 Deploy Site를 선택하면 사이트가 배포됩니다.