Gatsby로 정적사이트 만들기 테스트중

개츠비

개츠비는 리액트로 정적 웹사이트를 만드는 웹 프레임워크이다.
https://www.gatsbyjs.org/

리액트를 조금씩 공부하고 있었고 웹사이트를 만들고 싶은 생각도 있어서 연습 겸, 간단한 사이트를 만들어서 github page로 배포하는것을 해보고 있다.

튜토리얼(https://www.gatsbyjs.org/tutorial/)를 보면서 기본적인 것들을 다 해보고있다.

• css적용하기 - 몇 가지 방법이있다.(style={ }, css={ }, className={ }과 module.css파일 활용하기, global css파일 활용하기)

• 레이아웃 적용하기(react 컴포넌트로 만들어서)

• graphql 쿼리 활용하기

• 파일시스템을 활용하여, 파일 목록 만들기

• md파일을 인식하고, 화면에 frontmatter(파일 상단에 메타데이터같은것을 기입하는것)를 표시하기

css 모듈이 활용된 리액트 컴포넌트

파일 시스템을 GraphQL로 받아서 표로 구현(코드)

파일 시스템을 GraphQL로 받아서 표로 구현

md파일의 frontmatter정보를 목록으로 나타냄

잘안되던것들

1. css 적용이 의도한대로 되지 않는 문제가 종종있다.

처음에는 따옴표와 브라켓 사용이 헷갈려서 그럴때도 있었고, 여러 효과를 중첩해서 적용하면 어떤것은 효과가 없다. (일관성있게 적용하면 좋겠는데 지금은 실습 겸 만들다 보니 중구남방이다)
특정 메뉴의 text-align:center 적용이 잘 안되고 link에 밑줄 없애는게 아무리 해도 안없어지는데 !important를 사용해서 해결했다. 그리고 레이아웃 적용도 잘안되는데, 이것은 내가 레이아웃 사용법을 잘 숙지했기 못했기 때문이었다.

2. markdownRemark 관련된 플러그린

튜토리얼대로 설치를 했는데 잘안되는게 있었는데 markdownRemark 관련된 플러그린이었다.

플러그인 중에 설치가 잘 안되는것들이있는데 -g --save --save-dev 같은 옵션을 바꾸어서 설치했을때 해결이 되었다.
옵션을 다르게 할때, 일어나는 일들의 정확한 차이점을 모르니까 해결을 하고도 해결한것같지가 않아서 패키지 설치와 npm, nvm에 대해서 좀더 구체적으로 알아봐야겠다.

pathPrefix 항목(gatsby-config.js )

gatsby-config.js 

앞으로 할것

• gatsby파일 구조 이해하기
• github page가 deploy되는 방식 이해하기
• md파일로 목록을 나타내는 페이지에 개별 페이지를 만들어서 연결하기 (현재 목록을 구현하는것, 그리고 graphql에서 html을 요청해서 받는것은 가능하다)
• 완성된 사이트 만들어서 배포하기

현재는 github로 배포하는것에서 조금 막힌 상황이다.

이전에 내가 알고 있던 것은 [계정이름].github.io 라는 repository를 만들고, 여기다가 파일을 넣으면 url로 접속할수가 있다는 것이다. 또 폴더를 만들고 그안에 index.html을 넣으면, 예를들어 fliklab이라는 계정이고 home이라는 폴더에 index.html을 넣으면 fliklab.github.io/home으로 접속이 가능했다.

근데 지금은 좀 다르다. 원래 있던 fliklab.github.io로도 접속이 되게 하려고 시도했으나 이건 안되고있다.
그런데 blog라는 repository를 만들고, deploy를 하면 fliklab.github.io/blog 로 접속이 된다. 아직 이해가 잘 안되는상황.
repository의 이름을 바꾸면 또다시 접속이 안되는데, 이때는 gatsby-config,js의 pathPrefix를 새로 바꿔서 다시 deploy하면된다.
계속 해보기도 하고 공식문서를 찬찬히 읽어보면 알게되는것도 있어서 진행중이다.

그러다가 새로 알게된것은 fliklab.github.io레파지토리의 public폴더가 있는데 이곳에 index.html이 있다.
fliklab.github.io/public으로 접속하면 페이지가 뜨긴 뜬다. 마찬가지로 public/about 처럼 다른 페이지도 접속이 가능하다.
근데 blog레파지토리에는 index.html이 루트디렉토리에 없는데 된다는게 다르니 좀더 알아볼게 필요하다.

이 글은 현재 하고 있는 일에 대한 최소한의 기록용도로 쓰여졌음.