분류 Gatsbyjs

정적사이트 블로그 개발을 위한 도구 설치하기

컨텐츠 정보

본문



1. 들어가며 


이제 본격적으로 블로그 수정 및 개발을 할 시간입니다.


nodejs, yarn, gatsby-cli를 설치할 예정입니다.



2. nodejs 설치하기


https://nodejs.org/en/download/


위 링크에서 자신의 컴퓨터 환경에 맞는 프로그램을 다운 받습니다.


LTS 버전을 다운 받으면 됩니다. 현재 LTS버전은 12.18.2입니다.


그리고 설치합니다.


이제 Git bash에서 node, npm 명령어를 내릴 수 있습니다.



3. yarn 설치하기


yarn은 npm과 비슷한 패키지 매니저입니다.


같이 깔아두면 좋습니다.


https://classic.yarnpkg.com/en/docs/install


위 링크에서 다운 받고, 설치합니다.



4. gatsby-cli 설치하기


이제 Git bash를 열고


npm install -g gatsby-cli

위 명령어를 내립니다.


그러면 엄청 열심히 설치할 것입니다. 컴퓨터 사양에 따라 다르겠지만 5~10분까지도 걸릴 수 있습니다.


설치가 끝나면 Git bash에서 gatsby 명령어를 내릴 수 있습니다.



5. 설치된 버전 확인하기


Git Bash를 열고 버전을 확인해봅니다.


(1) nodejs 버전 확인하기


node -v

위 명령어를 내리면 아래와 같은 결과가 나올 것입니다.


v12.18.0


(2) npm 버전 확인하기


npm -v

위 명령어를 내리면 아래와 같은 결과가 나올 것입니다.


6.14.4


(3) yarn 버전 확인하기


yarn -v

위 명령어를 내리면 아래와 같은 결과가 나올 것입니다.


1.22.4



(4) gatsby-cli 버전 확인하기


gatsby -v

위 명령어를 내리면 아래와 같은 결과가 나올 것입니다.


Gatsby CLI version: 2.12.46



6. 코드 에디터 프로그램 설치하기


(1) 설치하기


Gatsby에서는 VS Code를 설치하는 것을 추천합니다.


개인 사용은 물론, 기업에서도 무료로 사용할 수 있기 때문입니다.


https://code.visualstudio.com/#alt-downloads


위 링크에서 자신의 컴퓨터에 맞는 프로그램을 다운 받고 설치할 수 있습니다.


(2) Prettier 플러그인 설치하기


코드를 파싱하고 최대 줄 길이를 고려하여 필요한 경우 코드를 래핑하는 자체 규칙으로 다시 인쇄하여 일관된 스타일을 적용합니다.


Gatsby 공식 사이트에서 설치하는 것을 추천합니다.


설치 방법은 VS Code를 설치 후 왼쪽에 확장 버튼을 누른 후 검색창에 Prettier를 넣으면 제일 위에 나오는 Install을 누르면 됩니다.




위 스샷을 참조하세요.


(3) 한글 인코딩 자동 인식시키기


한글이 들어간 파일을 수정할 때, 한글이 깨질 경우가 있습니다


VS Code가 한글을 인식하지 못하는 경우인데요.


이때 자동으로 설정해주는 방법이 있습니다. 저는 이것까지 추천드립니다.




VS Code 실행 후 위에 File -> Preferences -> Settings에 들어갑니다.




Text Editor -> Files -> 제일 위에 있는 Auto Guess Encoding에 체크를 하면 바로 저장됩니다.



이제 기본 준비는 끝났습니다.


다음에는 실제로 자신의 컴퓨터에서 블로그를 띄우고 바로 수정하는 방법에 대해 알려드리겠습니다.



참조사이트


https://www.gatsbyjs.org/tutorial/part-zero/ 

관련자료

  • 서명
    우성군의 NAS를 운영하고 있습니다.

    저의 즐거움이 여러분의 즐거움이면 좋겠습니다.

댓글 5개 / 1페이지
Total 7 / 1 Page
RSS
정적사이트 생성기 Gatsby를 Nginx 웹서버로 직접 배포하기 댓글 6

Gatsbyjs 1. 들어가며정적사이트 생성기를 이용하면 DB 및 PHP가 필요없기 때문에 대부분 배포 서비스를 이용할 것입니다.특히 nextjs를 개발하고 있…

정적사이트를 내 컴퓨터에 띄우고 글 작성 후 배포하기 댓글 4

Gatsbyjs 1. 들어가며이때까지 따라오셨다면(1) 깃허브 계정과 Vercel과 연결되어 자동으로 배포되어 있고,(2) 내 컴퓨터와 깃허브 계정이 연동되어 …

정적사이트 블로그 개발을 위한 도구 설치하기 댓글 5

Gatsbyjs 1. 들어가며이제 본격적으로 블로그 수정 및 개발을 할 시간입니다.nodejs, yarn, gatsby-cli를 설치할 예정입니다.2. node…

내 컴퓨터에서 정적사이트를 수정 후 Vercel에 배포하기 댓글 3

Github 1. 들어가며이제 홈페이지(정적사이트) 파일을 깃허브에서 다운 받았습니다.깃허브와 Vercel은 정확하게 연동이 되었지만, 내 컴퓨터와 깃허브는…

Vercel에서 정적사이트 도메인 변경 및 Git 시작하기

Gatsbyjs 1. 도메인 변경하기지난 글에서 우리는 이미 홈페이지를 가지게 되었습니다.그런데 대시보드에서 자신의 프로젝트를 클릭하면, 위와 같이 주소가 엄청…

Gatsby 테마 선택 후 Vercel로 홈페이지를 배포하기

Gatsbyjs 1. 들어가며제가 여러가지 방법으로 테마를 선택 후 배포(호스팅)을 해봤는데, 이 방법이 가장 빠르고 편하며, 관리하기 좋다고 생각합니다.2. …

최근글


새댓글