github pages 블로그 시작하기

github을 활용하여 블로그를 구성하는 것은 독립적으로 원하는 디자인을 적용하면서도 빠른 블로그를 서버 비용 없이 사용할 수 있다는 장점이 있어요. 다만 알아야 하는 내용들이 많다고 느껴질 있는데 그만큼 알아두면 정말 많이 써먹을 수 있는 부분이 많아요. 개발자들이 많이 사용하는 서비스지만 개발자들만 이렇게 좋은 것을 이용하고 있었나 하는 생각이 들 정도로 유용한 부분이 많아요. github을 이용해서 블로그를 만들 수 있는 방법이 많은데 그중에서 더 쉽게 느껴지는 gatsby를 이용한 블로그 만들기를 해보겠습니다. 

gatsby 설치

오늘은 일단 PC에 설치하는 과정으로 진행하겠습니다. 나중에서 본인 PC에 아무것도 설치하지 않아도 가능한 방법으로 해보겠습니다. 그래도 명령어에 익숙한 개발자 지망생 또는 입문자 이상이라면 명령어로 하는 것이 더 편하게 느껴질 것입니다. npm 명령어를 이용해서 설치하세요. 혹시 nvm 명령어 없다면 nvm 먼저 설치해야 합니다.

npm install -g gatsby-cli

설치가 끝나고 나면 템플릿을 이용해서 블로그를 설치합니다. Gatsby 템플릿이 많아요. 이 템플릿들을 이용해서 포트폴리오 사이트 혹은 자신만의 홈페이지를 만들 수도 있어요. https://www.gatsbyjs.com/starters/ 저는 개츠비 스타터 블로그 테마를 선택했어요. 테마를 구경하다보면 데모 사이트가 있는 경우가 많으니 한번 살펴보고 고르는 것도 좋습니다. 저는 테마 고르다가 시간이 너무 많이 흘러가 가장 기본 테마를 골랐어요. 아래는 gatsby-starter-blog를 이용하는 경우 명령어입니다. 이 명령어를 이용하면 blog라는 폴더를 생성하니 blog라는 이름의 폴더가 없어야 꼬이지 않습니다.

gatsby new "blog" "https://github.com/gatsbyjs/gatsby-starter-blog"

개츠비 gatsby 블로그 실행

인터넷이 아니라 PC에서 블로그를 실행해볼 수 있어요. 본인만의 블로그를 실행 할 수 있는 것입니다. 아무도 접속할 수 없는 블로그를 만들어서 일기처럼 사용할 수도 있는 것인데요. 사실 혼자 사용하기 위해서 쓰는 경우는 잘 없고 기능적으로 잘 실행되는지 혹은 테마를 확인해보기 위해서 PC에서 실행해볼 수 있어요.

cd blog
gatsby develop

gatsb 블로그 설정

적용한 테마에 따라서 설정 파일 이름이 다를 수 있어요. 파일이름에 config라는 부분이 있을 겁니다. 저는 gatsby-config.js 파일 이름을 열어서 수정했어요. 가장 처음에 있는 siteMetadata 부분을 수정하여 블로그 정보를 넣을 수 있어요. 하나씩 바꿔보면서 어떤 부분이 바뀌는지 알아가 보면 좋습니다. 아래는 예제 화면입니다.

module.exports = {
  siteMetadata: {
    title: `액션 플랜으로 완성한 블로그`,
    author: {
      name: `프즈`,
      summary: `기록하며 성장하는 블로그 주인장`,
    },
    description: `기록하며 성장하는 블로그`,
    siteUrl: `https://gatsbystarterblogsource.gatsbyjs.io/`,
    social: {
      // twitter: `kylemathews`,
    },
  },
...

블로그 글쓰기

content 폴더 안에 샘플 글이 있어요. 파일을 확인해보고 어떤 식으로 작성해야 하는지 미리 확인해볼 수 있어요. 기본적으로 content 폴더 안에 새로 만드는 폴더 이름으로 인터넷 주소가 됩니다. 그 안에 index.md 파일을 만들면 글이 됩니다.

github 연동하기

일단 github에 가입하세요. 이메일로 간단하게 가입 할 수 있습니다. 그리고 레파지토리를 생성하세요. 기본적으로는 github 아이디 기반으로 만들면 블로그가 됩니다. 레파지토리 이름을 아무 이름이 아니라 아이디.github.io.git 로 해야 합니다. 아이디부분만 본인의 github 아이디로 변경해야 하세요. 가입하고 레파지토리 생성 이후 블로그 소스 있는 곳에서 명령어를 입력하세요.

git remote add origin https://github.com/아이디/아이디.github.io.git

브랜치를 두 가지 만들어야 합니다. 편집용으로 보관도 하고 전체 소스가 있는 main 하고 배포용도 deploy 브랜치도 생성하세요.

git branch main
git add *
git commit -m "Gatsby"
git push origin main
git branch deploy
npm i gh-pages

github pages 설정

github 레파지토리 설정 Settings 화면에서 왼쪽 메뉴 Pages를 눌러 들어가세요. Source 부분에 Deploy from a branch로 설정해야 합니다. 

블로그 글 적용

package.json 파일에서 scripts 부분에 deploy 부분을 추가하세요.

  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"",
    "start": "gatsby develop",
    "serve": "gatsby serve",
    "clean": "gatsby clean",
    "deploy": "gatsby build && gh-pages -d public -b deploy",
    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
  }

마지막 명령어를 통해서 배포하여 적용 할 수 있어요.

npm run deploy

---

한번 이렇게 설정해두면 나중에는 글 쓰고 배포만 하면 됩니다. 직접 테마도 수정해보고 바꿔보면서 블로그 만들어가 보세요.