Gatsby×HeadlessCMS로 그룹 웹 사이트 만들기

그룹 사이트, 예전에 있던 것을 다시 만들어 Gatsby와 HeadlessCMS(Contentful)로 해봤습니다.
잘하는 게 이거야!🥳
https://www.qulo.ooo/
저희가 다시 만든 경과와 조합을 정리해 보도록 하겠습니다.✍️

🎨사이트 축소판 그림

1세대 FC2 홈 페이지

2세대']+CSS'(최근 프로그래밍 페이지도 모르고... 해외 디자인 사이트 검증→소스 코드를 보고 필요한 부품을 연결해 꼬깃꼬깃한 카메라)

왜 2세부터 다시 만들고 싶으세요?

다음과 같은 이유로 업데이트가 좋지 않습니다.

여러 개의 디스플레이용 이미지를 준비하여 디스플레이 크기를 최적화해야 한다

기사를 추가할 때 편집 >, 기사 파일을 추가할 때마다

CSS 기술이기 때문에 함수를 사용할 수 없습니다. 전체적으로 색상을 약간 바꾸려면 해당 색상 코드를 모두 고쳐야 합니다

CSS 이외의 언어를 사용하고 싶습니다

이를 위해 주파수와 현대 기술이 업데이트되지 않은 것을 시도하고 싶어 재제작을 결정했다.

💡좋은 곳

과연 Gatsby는 무엇일까요?
페이스북이 개발한 리액트 정적 사이트 Generation.JavaScript 라이브러리

이니시에이터(템플릿) 가득

Netlify라는 초대 서비스를 사용하여 GiitHub와 연합하여 업데이트 내용을 마스터 지점에 통합하면 사이트를 업데이트할 수 있으며 업데이트성이 양호하다◇

태그식으로 글을 쓰기 때문에 Qita, Medium 등 다른 사이트

에 바로 접속할 수 있다.

💡Headless CMS의 이점

Gatsby만 해도 태그 방식으로 글을 쓸 수 있지만 창고 안에서 기사를 관리해야 하는데...
=CSS가 기술한 2세대 투자조합 홈페이지에 문제가 생겼는데 기사가 늘어났을 때 파일 수가 늘어나는 문제는 아직 해결되지 않았다!
👉Headless CMS를 가져오면 기사 관리를 외부 서비스에 위임할 수 있습니다!
(사이트를 다언어화하고 싶은 상황에서 파일 수를 간단하게 배로 늘리는 문제를 해결하자◇)
왜?

Gatsby와 조합하여 사용하는 사용자가 많기 때문에 지역사회가 활발하다

콘텐츠풀은 앞으로 대응하고 싶은 다언어화에 대응한 것 같다

표기 방식으로 진행되므로 Medium, Qita 등 외부 서비스에도 직접 사용할 수 있음

🙌사용한 소감.

Gatsby × 아주 좋아요!
근데 자기가 쓰는 문서도 남겨야 돼요.

문서가 필요한 이유

HeadlessCMS를 사용하는 곳도 소스 코드에서 읽기 어렵다.

예를 들면 업데이트성이 있는 곳만 사용하는 사람도 있고, 어바웃 화면 등 업데이트성이 낮은 페이지를 모두 헤드셋CMS로 관리하는 사람도 있다.

"어, 여기 문자를 수정하고 싶은데 원본 코드가 없어요!"따라서 HeadlessCMS의 사용 범위를 기록할 필요가 있다고 생각합니다

리액트(JavaScript 라이브러리)에 따르면 html CSS라면 닿을 수 없는 내용을 표시할 수 있다.
부팅 장치를 유연하게 사용할 수 있기 때문에 쉽게 시작할 수 있다
개인 홈페이지에 관심이 많지만 어디서부터 시작해야 좋을지... 이런 분들도 추천!

💡기타 연구했던 일

프레임 정보
FluterWeb 등도 논의했지만 SEO의 관점에서 포기했다

✅슬라이드 자료 공개 중

Speaker Deck 슬라이드 자료 업로드 중!
가능하면 같이 보세요.🙇‍♀️