GCP에 WordPress 도입하려고 생각했지만. . .

무언가와 셋업 슈퍼 ​​귀찮아.
대체품이 없을까라고 생각해 검색을 쵸코쵸코

정적 사이트 생성기?

HTML 생성 도구라는 것이 왠지 알았다.
우선 로컬로 환경을 만들어 보자.
(서버리스로 작성하는 것이 주류와 같기 때문에 GCP에 세운 VM을 어떻게 할지는 별도 검토)

정적 사이트 생성기의 추세

gatsby라는 것이 유행 같다.
유행에 따라, gatsby를 로컬에 도입해 본다.

환경 구축

튜토리얼에 따라 소개합시다.
htps //w w. tsbyys. 코 m/트리어 l/파 rt-제로/

설치 노드 (Windows)

12.18.3 LTS 설치

기본적으로 설치

Install Git

완료!

gatsby-cli 설치

npm install -g gatsby-cli※git bash로 실시하면 콘솔 문자화했다.

Create a Gatsby site

gatsby new hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world※ 현재 디렉토리에 hello-world 폴더가 생성됩니다.
hello-world 디렉토리 수 있었다.cd hello-worldgatsby develop콘솔에는 success의 폭풍

동작 확인

http://localhost:8000/

예!

VS Code 설정

표시(View)⇒확장 기능(Extensions)

"Prettier - Code formatter"를 입력⇒설치⇒재부팅


이번에는 이상
고마워요.

gatsby의 작업 내역

이번: gatsby 입문 튜토리얼을 해낸다 0. 개발 환경을 셋업한다
gatsby 입문 튜토리얼을 해내다 1. 개츠비 빌딩 블록에 대해 알아 (1)
gatsby 입문 튜토리얼을 해내다 1. 개츠비 빌딩 블록에 대해 알아 (2)
gatsby 입문 자습서 2. 개츠비 스타일링 개요
gatsby 시작하기 튜토리얼 3. 중첩 된 레이아웃 구성 요소 만들기
gatsby 입문 자습서 4. 개츠비 데이터
gatsby 시작하기 자습서 5. 소스 플러그인과 쿼리 된 데이터 렌더링
gatsby 입문 튜토리얼을 해낸다 6. 변압기 플러그인※Transformer plugins의 google 번역
gatsby 입문 튜토리얼을 다루는 7. 프로그램으로 데이터로부터 페이지를 작성한다
gatsby 입문 자습서 8. 게시할 사이트 준비
gatsby 입문 블로그 만들어서 서버에 올려보자

참고

정적 사이트 생성기 Gatsby
gatsby 튜토리얼

GCP에서 VM을 설정한 작업 이력은 아래에 설명되어 있습니다.

방치하고 있던 GCP를 부활시킨다 (1) - 프로젝트 작성 -
방치한 GCP를 부활시킨다 (2) - VM 인스턴스 생성 -
방치한 GCP를 부활시킨다 (3) - gcloud CLI 설치 -
방치하고 있던 GCP를 부활시킨다 (4) - PC(Windows10)로부터 VM에 ssh 접속 -
방치한 GCP를 부활시킨다 (5) - VM의 IP를 고정한다 -
방치한 GCP를 부활시킨다 (6) - nginx 설치와 http 설정 -
방치한 GCP를 부활시킨다(마지막) - 고유 도메인 설정 -
GCP + CentOS6 (VM) + nginx에 SSL (certbot)을 추가합니다.
nginx로 IP 직접 치기를 거부