Gatby.js＋Netlify로 LightHouse 만점의 사이트를 하루에 만든 이야기

경위

Qiita 이외에 잡기 블로그적인 것을 해본 기분이 된다

친구 엔지니어에게 추천된 Gatsby.js에서 블로그를 개설해 보았습니다.

베이스

이번에는 Gatby.js+Netlify로 가기로 했습니다.
htps //w w. tsbyys. 오 rg / s r rs / 네 t ぃ fy - mp ぁ s /가 tsby - s r r t t fy - cms /

일부 Gatsby의 스타터를 복제하고 시도했지만
이 스타터가 제일 그대로 블로그로서 사용할 수 있을 것 같았습니다.

Gatby.js＋Netlify 선정 이유

Gatsby는 정적 사이트 생성기이므로 빠릅니다

React는별로 만지지 않았기 때문에이 기회를 만지고 싶습니다.

Netlify는 GitHub와 함께 작동하므로 잔디를 쉽게 만들 수 있습니다 ←

준비하는 것

Github 계정

블로그에 사용할 도메인

렌탈 서버없이 OK입니다.

절차

이 기사를 그대로 해본다
htps : // m / f t / ms / f5d97165b8c6d6077 A44

환경 구축에서 공개까지 간단

좋은 느낌

구축이 간단

표시 속도가 빠르고 초기에도 분석 점수가 상당히 높은 수준

문의 폼을 준비하고 있으므로 설정하면 간단하게 도입할 수 있다

어려움

React에 익숙하지 않기 때문에 수정할 때 여러 가지 시도를 진행했습니다

WordPress처럼 기사에 링크를 붙이면 미리보기를 볼 수 없습니다.

인스타그램 포함으로 이미지를 볼 수 없습니다

별건 : 쓰는 일이 없다 (라고 하는 것보다 재료는 있지만 제대로 한 기사를 쓰지 않으면 생각하는 사람이 멈춘다)
출력 버릇을 만들려면 계속할 수밖에 없다는 느낌

수정한 것

Google Analytics 소개

이미지 경량화 도구를 사용하여 이미지를 압축하고 경량화

접근성은 기본적으로 만점이 아니므로 개별적으로 수정했습니다.
그 때 점수가 나기 쉬운 디자인으로 변경 등의 대응

성능에 초점을 맞추기 위해 이미지를 최소화하는 것이 좋지 않으므로 수정하고 싶습니다

완성

여기에서 공개 중
htps //w w. 그래? 이 m