JS의 문법조차 수상한 프런트 초보자가 blog용의 gatsby starter(같은 것)를 자작·공개해 보았다

최근 핫하지만 일본에서의 지명도가 약간 낮은 프로젝트에 gatsby가 있습니다.
알고 계십니까?
2019년 Octoverse 를 보면 Fastest growing open source projects by contributors의 8위에 gatsbyjs/gatsby가 있습니다.
이번에는 그런 gatsby의 starter(wordpress의 테마같은 것)를 자작해 갑니다.

이번 목적

디자인에 전념할 수 있는 환경을 만들어 갑시다.
나 자신의 디자이너로서의 능력이 낮아 현시점에서 좋은 디자인을 만드는 것은 어렵지만, 누구나 커스터마이즈 할 수 있는 상태로 공개하는 곳까지 꽂습니다.

디자인에 집중할 수 있을 만큼의 기본적인 뒷면을 만들 수 있는 것을 목표로 합니다.

컨셉과 디자인을 임시 결정

이런 느낌의 블로그로합시다.
starter의 이름과 컨셉은 hinoiri(일입).

행간이 이상하다든가, 어쩐지 어긋나 있다든가 돌진커녕 가득한 설계도입니다만, 테마 작성시에 고쳐드립니다.

색상 목록

배경색 1: 네이비. #000030. 밤 책을 이미지.
배경색 2: 군청. #023457. 삶의 밤을 이미지.
텍스트: 옅은 보라색. #B0D0FF. 단지 흰색에서는 이미지에 맞지 않기 때문에 푸른 빛을 강하게했다.
강조색 1: 오렌지. #F37F00. 태양
강조색 2: 태양 주위의 빨강. #D33422.

솔직히 납득하지 않아서 나중에 바꿉니다.

기본 gatsby starter 선택

이번에는 처음부터 만드는 것이 아니라 gatsby-starter-default라는 gatsby-starter를 바탕으로 제작해 갑니다.
gatsby-starter-default 는 gatsby-starter 중에서 가장 간단한 것입니다.

플러그인, 테마 추가

gatsby-theme-blog-core

gatsby-plugin-sitemap

gatsby-plugin-google-fonts

gatsby-plugin-sass

gatsby-theme-blog-core

이번에는 blog를 만들 예정이므로 gatsby-theme-blog-core를 채용.

또한 gatsby-theme-blog에서 중요한 코드를 이식합니다.
gatsby-theme-blog는 style에 영향을 미치기 때문에 그대로 채용하지 않습니다.
src/components/ 및 src/gatsby-theme-blog-core/components 에 필요한 코드를 이식합니다.

상당히 번거롭지만 소스 코드를 읽고 잘 부탁드립니다.

기타 플러그인

기본 CSS에서는 힘들어지기 때문에 SCSS를 채용.

글꼴을 청소하는 것이 좋기 때문에 gatsby-google-fonts를 채택 (단, 무거워진다)

gatsby-plugin-sitemap은 우선 채용

실운용하면 여러가지 부족이 있다고 생각합니다만, 일단은 이것으로.

scss 적용

src/
  assets/
    scss/
  components/
    gatsby-theme-blog-core/

이번은 상기 디렉토리 구성으로.
어디서나 사용하는 scss는 src/assets/scss/내에 배치하고 init.scss에서 일괄 호출할 수 있도록 변경.
각 컴포넌트의 scss는 모듈로 각 js 파일과 함께 배치됩니다.

샘플 페이지 만들기

다양한 HTML 태그가 나오는 md 파일을 만들고 실제로 시도해보십시오.



글쎄, 이런가?

공개

github에 push하고 리포지토리를 공개 상태로 하면 끝입니다.

실제로 사용할 수 있는지 시도해 봅시다.

gatsby new project-name https://github.com/aimof/gatsby-starter-hinoiri

demo 페이지 만들 정도의 가치가 이 starter에 아직 없는 느낌이었기 때문에, 데모는 없다.
제대로 된 starter를 만들면 공식적으로 소개받을 가능성도 있는 것 같습니다.

요약

gatsby 만져 보았습니다만, 프런트 재미있습니다.
디자인에 대해서는 병렬로 학습 중입니다.

왠지 gatsby의 지명도가 일본에서는 약간 낮은 느낌이 들기 때문에 분위기가 가는 것이 좋다.