[macOS] GatsbyJS + Netlify 환경 구축 (+ 가비아 도메인)

icymunchhhiip·2021년 9월 12일
0
post-thumbnail

포트폴리오용으로 반응형 사이트가 필요해서 예전에 봐둔 글(Minji Lee님의 포트폴리오 프로젝트)에서 사용한 프레임워크(GatsbyJS+Netlify)로 환경을 구축하고 멋진 포트폴리오 사이트를 만드는 것이 목표다.

개발 환경

  • macOS Big Sur v11.5.2
  • 1.4GHz Quad-Core Intel Core i5
  • 16GB RAM
  • Intel Iris Plus Graphics 645 1536MB

들어가기 전

가비아?

  • 통합적인 인프라 서비스 제공
  • 클라우드
  • 그룹웨어
  • 보안
  • 도메인
  • 호스팅

도메인 구매를 위해 이용한 사이트다. 필자는 부가세 포함 1년동안만 2090원으로 할인하는 도메인이 있길래 바로 회원가입해서 구매했다. 1년마다 도메인 유목민할 예정이다.

이 외에도 도메인 구매 사이트로는 닷홈, 호스팅케이알, 카페24, 닷네임, 우비 등이 있다.

GatsbyJS?

  • 정적 페이지 생성기
  • React
  • +GraphicGL
  • +webpack
  • +react-router
  • +기타 front-end 도구들...
  • 무료
  • 오픈소스

단순히 HTML+CSS+Bootstrap만 사용하거나 깃허브 블로그용으로 남들이 만든 Jekyll을 fork해서 조금 수정하는 정도로만 사용한 적은 있었다.

처음부터 직접 프레임워크를 이용해 만들어보는 건 첫 시도이다.

Netlify?

  • 정적 웹사이트 호스팅 제공
  • 서버가 필요없는 백엔드 서비스 제공
  • 클라우드 컴퓨팅 기반
  • 무료 및 유료 플랜

기존에 프로젝트용으로 cafe24에서 웹호스팅받아서 사용했다가 연장이 만료되었는데 다시 이용할 때는 이용 안 한 기간에도 돈을 내야한다는 걸 처음 알았다.

얼마 안하는 돈일지 몰라도 불합리하다고 느꼈고 Netlify는 무료플랜이지만 개인 블로그용으로는 사용할만하다고 해서 선택했다.

오늘의 목표

  1. 가비아에서 도메인을 받아온다.
  2. GatsbyJS로 정적 웹사이트를 만든다
  3. Github에 업로드한다.
  4. Github에 올린 것을 Netlify에 연결하고 호스팅한다.
  5. 도메인을 연결한다.

환경 구축

도메인 결제


위 캡쳐에서 아래의 칸에 원하는 도메인을 입력하고 검색을 누른다.


부가세 미포함 가격이고 견적서 출력해도 마찬가지로 부가세 미포함 가격이다. 필자는 캡쳐에서 알 수 있듯 할인 중인 .site를 구매했고 부가세까지하면 1900원->2090원이었다.

결제화면에서 기간이 많이 잡혀있어서 기간 할인 중인건 요금 폭탄될 수 있으니 기간 꼭 확인!

가비아에서는 인증번호가 카카오톡으로 오고 구매 후 도메인이 등록되면 문자로 알려준다.

웹사이트 만들기

Node.js, GatsbyJS, Visual Studio Code(이하 VSCode) 등을 설치 혹은 업데이트 한다.

VSCode는 코드 작성을 편하게 해주는 에디터이다. atom, notepad 등 다른 에디터를 써도 된다. 하지만 VSCode가 여러모로 편리하고 많이 쓰이니까 권장하는 바이다. GatsbyJS 공식 문서는 VSCode 기준으로 작성하였다.

우선, Terminal을 열자.

homebrew 설치

macOS에서 Terminal을 이용해 프로그램을 설치할 때는 homebrew로 주로 설치한다. 설치를 편리하게 해주는 도구라고 생각하면 될 것 같다. 설치가 안되어있다면 아래 명령어를 입력한다.

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Xcode 설치

Xcode도 설치가 안되어있다면 아래 명령어 혹은 앱스토어에서 다운로드 받는다.

xcode-select --install

나머지 설치

나머지 프레임워크 설치를 위해 명령어를 입력한다. 설치나 업데이트나 명령어는 같다. -v는 버전을 확인하는 옵션이다. 명령어에서 "" 혹은 []는 제거하고 본인에 맞게 입력한다.

brew update
sudo npm cache clean -f
brew upgrade node
npm install -g n
sudo n stable
node -v
npm -v
sudo npm install -g npm
npm -v

brew install git
git config --global user.name "username"
git config --global user.name
git config --global user.email "example@example.com"
git config --global user.email

npm install -g gatsby-cli
gatsby --version

cd [이동할경로] 명령어를 이용해 생성할 디렉토리로 이동한 후 아래 명령어를 입력한다.

npx gatsby new [project-name] https://github.com/gatsbyjs/gatsby-starter-hello-world

gatsby develop

gatsby develop 안되면 npm run develop를 입력해본다.

Terminal을 유지한 상태로 웹브라우저를 열고 http://localhost:8000/로 이동하면 Hello world! 글자가 보인다.

Github에 업로드하기

아직 Gatsby를 실행중이라면 Contol+c로 실행을 멈추고 아래를 따라하거나 터미널을 새로 열어서 생성한 Gatsby 디렉토리 안으로 이동한다.

Github에 들어가서 Repository를 생성한다.

github 의 기본 브랜치명인 master가 노예제를 연상시킨다는 이유로 main 으로 변경되었다.
Github 사이트 오른쪽 상단 프로필>Settings>왼쪽 메뉴 중 Repositories에서 변경가능하다.

이미 만들어둔 경우에는 아래 캡처처럼 변경할 저장소>Settings>Branches로 들어가서 변경한다.

로컬 저장소에는 아래 명령어를 입력한다.

git branch -m master main
git fetch origin
git branch -u origin/main main
git remote set-head origin -a
git init
git add .
git commit -m "gatsby project setup"
git remote add origin [본인 repo url]
git push origin main

keychain password 입력하라는 작은 창이 뜨면 자신의 macOS 비밀번호를 입력한다. 항상 허용으로 해두는게 편하다.

호스팅하기

Netlify 홈페이지로 이동하여 Github 계정으로 로그인하고 이 버튼을 누른다.

그리고 Github를 선택한 후 자신의 깃허브 계정 프로필을 누르고 만들어둔 Repository를 선택한다.

그 다음 화면에서는 git에 성공적으로 올라왔다면 입력 칸에 자동으로 입력이 되어있을 것이기 때문에(main, public 등) 별다른 추가 입력없이 Deploy Site을 누른다

도메인 연결하기

연결된 repo를 선택한다.

필자는 이미 연결해두었다. Domain settings를 누른다.

아래 캡쳐를 보자.

Default subdomain으로 설정된 것의 Options>Edit site name 누르면 netlify에서 제공하는 기본 도메인명을 바꿀 수 있다. 물론 뒷부분은 못 바꾼다.

캡처에서는 Add domain alias인 버튼이 처음에는 Add custom domain일 것인데 이걸 클릭해서 구매한 도메인 그대로 입력한다. www가 붙은 건 자동으로 함께 추가된다. 필자는 혹시 몰라서 Add domain alias로 www~주소를 한 번 더 입력해두었다.

그러면 Netlify DNS가 아니라 노란 공사장 아이콘이 나오는데 몇 분 기다렸다가 누르면 네임 서버 네 개를 보여준다.

그러면 가비아에 들어가서 오른쪽 위에 My가비아 버튼을 누르면 아래 화면에서 오른쪽에 도메인 통합 관리툴을 누른다.

왼쪽에 도메인 정보 변경을 누르고 도메인명을 체크 후, 네임서버를 눌러서 Netlify에서 제공하는 네임서버 네 개를 모두 입력한다.

몇 분 기다리면 등록한 도메인으로 접속할 수 있다.

macOS safari에서만 www~로 입력하면 안되던데 아시는 분?

출처

profile
🐣 behance.net/5c533018

0개의 댓글