개시하다

프로그래밍 경력 2개월의 문외한이 쓰고 있다.(오류가 있으면 표시)
'리액트-스테이틱을 처음 사용한다'는 학습 노트를 위해서다.

React-Static 프로젝트의 생성

Netlify에 대한 해제

상술한 두 가지를 총결하다.
👇React-Static 공식👇
https://github.com/react-static/react-static

이번 목적

정적 웹 사이트 생성기React-Static을 처음 사용합니다.
폭발 속도로 표시되는 블로그 사이트를 간단하게 자동으로 생성하여 Netlify에 디버깅을 진행합니다.

Node.js 설치

React는 Node입니다.js가 필요하기 때문에 설치합니다.
https://nodejs.org/ja/

설치

패키지 매니저로서, Node.js표준npm도 있지만 제 환경과 실력은 잘 구축되지 못했습니다.
npm에서 yarn으로 변하는 곳이 잘 진행되기 때문에 여기는 yarn을 사용하는 것이 좋습니다.

React-Static 설치

$ yarn global add react-static

전 세계에 React-Static을 설치합니다.

React-Static 프로젝트 제작

$ cd プロジェクトのディレクトリ
$ react-static create

프로젝트 이름과 템플릿 이름을 묻습니다.
프롬프트에서 Basic을 선택합니다.

로컬 호스트에서 확인

생성된 항목에 액세스할 수 있습니다localhost:3000.

공식 환경의 구축

$ yarn build

dist 파일을 정식 파일로 생성합니다.

github로 밀어넣기

우선github로 미루고 그 창고를 Netlif와 합작하여 예처리합니다.dist뿐만 아니라 사업 전반을 추진한다.

Netlify에게 프러포즈

SignUp을 완료합니다.
이번에는 github와 합작하여 디자인을 진행합니다.

합작시

『Build Command』 => yarn build

『Publish Directory』 => dist

탭
이렇게 되면 변경이github로 미뤄질 때마다 Netlify는 자동으로 yarn build 실행되고 생성된 dist 파일을 디버깅합니다.
우리는github로 미루기만 하면 돼, 일을 절약할 수 있어.

총결산

React-Static 프로젝트의 생성

Netlify에 대한 해제

상술한 두 가지를 총결하였다.