github blog

이전에 슬쩍 만들어둔 깃헙 블로그를 쓰지 않고 방치하고 있었는데, 쉬는 동안 블로그 스킨도 바꿔보고 어떻게 사용하는 건지 찬찬히 살펴보려 한다.

create repository

먼저 깃헙 블로그를 위해 레포지토리를 생성했다. 레포지토리명은 아이디를 사용하여 만들면 블로그주소로 사용할 수 있게 된다.
repository name : 깃헙아이디.github.io를 입력하여 생성하자.

gatsby 설치

gatsby는 React & GraphQL 기반 정적페이지생성기란다. 리액트는 좀 쓸줄 아니 jekyll이나 다른 생성기 말고 gatsby를 통해 블로그를 생성하도록 하자.
gatsby install tutorial site에서 자세한 과정을 볼 수 있다.

개발환경 설정 (mac OS 기준)
1. homebrew 설치
2. nodejs 설치 : brew install node
3. git 설치
4. 전역에 게츠비 설치 : npm install -g gatsby-cli

new gatsby site

gatsby를 설치 한 뒤 본격 블로그를 생성해 보자.
gatsby new <폴더명> <스타터코드-깃레포지토리경로>

• gatsby new : 뉴~ 명령어는 말그대로 게츠비 프로젝트생성을 위한 명령어
• 폴더명 : 에는 내컴퓨터 디렉토리명을 지정한다. 나는 my-site라고 지정했다
• 스타터코드-깃레포지토리경로 : 에는 게츠비 기초세팅이 있는 깃헙레포지토리경로를 작성한다.

gatsby new로 프로젝트를 생성하기 전, 터미널을 해당 디렉토리 경로로 이동한뒤 프로젝트를 생성하자!

$ cd  project/
$ gatsby new my-site https://github.com/gatsbyjs/gatsby-starter-hello-world
$ cd my-site

package.json

gatsby를 설치한 뒤 확인한 package.json의 모숩~

# gatsby develop 또는 npm run develop 또는 아래 yarn 명령
$ yarn develop

프로젝트를 생성하였고, yarn develop 명령으로 개발자모드로 서버를 실행 할 수 있으며 http://localhost:8000으로 접속하여 현재 사이트 상태를 확인 할 수 있다.

위와 같이 보인다면 성공!

vscode에서 프로젝트 확인

폴더 구조

• node_modules : 이 프로젝트가 의존하는 모듈이 담긴다
• public
• src/page : 앞으로 작성할 페이지들은 여기에!
• static
• .gitignore : 깃에서 버전관리하지 않는 파일,폴더 지정
• .prettierignore : 프리티어 적용안되도록 관리
• .prettierrc : 프리티어 구성파일, .eslintrc, .markdownrc 들도 만들수 있다.
• gatsby-config.js : 게츠비 사이트 기본구성파일, 사이트의 기본정보(메타정보), 플러그인등 설정가능
• LICENSE : 라이센스~ 기본 MIT
• pakage-lock.json : 건들지 않는 파일
• pakage.json : 이 프로젝트의 정보, 의존패키지 목록이 저장됨 ~ 중요중요!
• README.md : 프로젝트의 참조정보가 포함된 텍스트~ 깃헙레포의 첫페이지가 되기도함!
• yarn.lock
• 그밖에 gatsby-ssr.js, gatsby-node.hs 와 같이 서버사이드렌더링, 노드 설정을 수정 할 수 있다~

초기세팅된 폴더구조의 모습이다. 여기서 자동코드 완성을 위한 eslint, prettier설정을 좀더 하고 프로젝트를 시작하도록 하자

eslint & prettier

eslint와 prettier를 통합하여 포메팅 오류나 서로 충돌할때 해결 할 수 있다.
gatsby의 eslint 설정 가이드 에서 확인해도 좋다.

npm i -D prettier eslint eslint-config-prettier eslint-plugin-prettier babel-eslint eslint-plugin-react

• prettier : 통합설정을 위해 prettier 별도 설치필요
• eslint
• eslint-config-prettier : eslint와 prettier의 format 관련 설정이 충돌할 경우 eslint 설정을 비활성화해준다.
• eslint-plugin-prettier : prettier를 eslint의 plugin으로 추가해주는 모듈
• eslint-plugin-react : eslint가 react 문법을 허용하도록 하는 모듈
• babel-eslint : babel관련.. 모듈

// .eslintrc : 설정은 개인취향대로 해도되고, 또는 에어비앤비의 코딩컨벤션을 따르기도한다.
{
  "parser": "babel-eslint",
  "rules": {
    // 내 gatsby blog에 prop-types을 사용하지 않아 이 부분을 비활성화 했다.
    // 참고로 0은 off, 1은 warn, 2는 error를 의마한다.
    // "react/prop-types": 0,
    // "strict": 0
  },
  "extends": ["eslint:recommended", "plugin:react/recommended"],
}

Airbnb eslint 설정

npm i -D eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react

// .eslintrc
{
  "extends" : "airbnb" 
}

markdown

lint

eslint와 같이 마크다운도 문법확인을 할수 있다.
역시 프로젝트루트 경로에 .markdownrc.json 파일을 만들어 내용을 작성하자!

preview

vscode에서 마크다운문법을 사용한다면 듀얼모드로 문법작성과 동식에 실화면을 띄워줘 편하게 작업 할 수 있다. (벨로그처럼!) 벨로그 쓰다 깃헙블로그로 옮기기 고민되는 이유중 하나였는데 프리뷰 모드로 조금은 해결 될 수 있겠다!

markdown-preview-enhanced : vscode extension 필요할때 쓰도록 하자~