무료로 개츠비(Gatsby) 블로그 만들기

돈이 들지 않고 무료로 개츠비(Gatsby) 블로그를 만드는 방법을 알아봅시다. 최근 티스토리 광고 송출 대란을 경험하면서 새로운 블로그에 정착 중입니다. 이 블로그는 개츠비(Gatsby)라는 아주 쉽게는 HTML 사이트 생성기이자 IT 개발적으로 보면 웹 프레임워크이며 웹 사이트 개발 툴로 만들어졌습니다. 뭔 소리인가 싶긴 한데 공짜로 블로그를 만들어서 사용하면서도 구글이나 티스토리, 네이버 같은 곳에 얽매이지 않고 블로그를 만들 수 있습니다.

1. 개츠비(Gatsby) 블로그 설명.

개츠비 블로그는 마크다운으로 글을 작성합니다. 마크다운은 일반 텍스트 기반으로 글을 작성합니다. 말이 이렇기는 한데 어차피 마크다운도 다른 블로그들이 글을 작성하는 방법과 거의 동일하게 작성할 수 있습니다. 위지윅 에디터 기능도 있는 기능도 사용 가능하구요. 제가 사용하는 마크다운 에디터도 이렇게 동일하게 기능을 제공하고 있습니다.

그러니까 개츠비 블로그는 어렵다고 생각할 필요가 없습니다. 처음 설정하는 과정만 잘 따라해준다면 어렵지 않게 입문 할 수 있어요. 그리고 사이트 속도가 매우 빨라요. 정적인 HTML 파일을 만들어서 보여주는 구조이기 때문에 우리가 브라우저로 접속 할때마다 많은 연산을 필요로 하는 구글, 티스토리, 네이버 블로그 방식처럼 느리지 않습니다.

거기다 왠만큼 블로그가 성장하기 전까지는 무료로 운영할 수 있습니다. 그 왠만큼이라는 기준이 월 트래픽 100GB 기준이니까요. 상당한 기준이죠.

대신 내 입맛에 맞게 수정하려면 인터넷을 이리저리 뒤지면서 이 개츠비 블로그에 사용된 기술들을 공부해야 할수도 있어요. 리액트와 html, css, javascript 같은 것들을 말이죠. 그래서 수정이 별로 필요없는 완성된 테마를 선택하면 공부가 필요하지 않고요. 테마를 보니까 현재 이정도 기능이면 나는 별로 추가 안하고 만족하고 사용 할 것 같다? 또 이런 기술들을 공부하거나 인터넷을 뒤져가며 내가 필요로 하는 기능들을 추가해보겠다? 한다면 이 개츠비 블로그는 좋은 선택이 되는 것이죠.

2. 개츠비 블로그 만들기 전 준비할 것.

• 깃허브(Github) 사이트 가입
• Netlify 사이트 가입

 

깃허브는 내 블로그 환경을 구성하는 파일들과 포스팅을 저장하는 인터넷 저장소가 되어줄 사이트입니다.

Netlify는 이 저장소 내용들을 받아와서 블로그를 생성해서 웹 사이트를 띄워줄 사이트구요.

둘다 무료 플랜을 제공하고 그 무료 플랜 자체가 블로그로 이용하기엔 충분하고도 남을거구요. 블로그가 아주 성장한다면 유료 플랜을 고민해도 되지만 같은 가격대에 호스팅 사이트들보다 훨씬 저렴하기 때문에 이곳을 이용해도 전혀 문제가 없습니다.

깃허브를 가입한 다음 Netlify 사이트를 깃허브 계정으로 가입하면 됩니다.

회원 가입은 어렵지가 않습니다. 우리가 이용하는 네이버나 카카오처럼 진행하면 됩니다. 영어가 어렵다면 번역을 해놓고 하시면 됩니다. 둘다 가입하셨나요?

2.1 블로그 테마 선택

그 다음은 pc에 블로그를 생성해주는 NodeJS라는 언어 엔진과 글을 작성하고 등록할 수 있는 vscode라는 개발도구를 설치해주세요. NodeJS 같은 경우는 노드제이에스라고 하면 되는데 자바스크립트 언어를 실행하는 프로그램 엔진이라고 할 수 있어요. vscode는 최신으로 설치하면 되는데 nodejs는 내가 이용하고자 하는 블로그 테마에 따라서 다른 버전을 설치해야 해요. 여기서는 가장 손을 안대고 사용할 수 있을 만한 **gatsby-starter-bee **를 추천할게요.

이것을 사용하려면 NodeJS 14 버전을 설치해야 해요. gatsby 버전은 2버전이라 가장 낮은 버전으로 세팅이 되어있긴 하지만 가장 많은 기능이 들어있어서 거의 손을 대지 않고 바로 운영하면 될것 같아요. 국내 개발자분인 @JaeYeopHan 님이 만든 테마이며 깃허브 별도 653개나 받은 좋은 테마에요. 저도 이 버전을 이용하고 있고 자체적으로 gatsby 버전을 5로 올리고 여러가지 제게 필요한 기능들을 커스텀하면서 이용하고 있어요.

이 테마를 이용하려면 아래 node 14 버전을 다운로드해서 설치해주세요.

node-v14.21.3-x64.msi     

• PC에 NodeJS, vscode , git 설치

위 링크에서 vscode와 git도 설치해주세요. 다 다운로드해서 설치만 하면 되기 때문에 설명은 따로 안하겠습니다.

3. 개츠비 블로그 저장소 생성.

깃허브 웹 영역에 저장소를 생성해야 합니다. 생성하는 방법은 간단합니다. 깃허브에 접속하면 좌측에 New 라는 버튼이 있을텐데 그걸 눌러서 저장소를 만들수 있거든요.

• New를 누른 뒤에 Repository name 부분에 적당히 영문으로 저장소 이름을 지정해주세요.
• Public과 Private 중에 Private를 선택하세요.
• Create repository 를 선택해서 생성해주세요.

public으로 하게 되면 저장소를 모두에게 공개하게 되는 셈인데 그렇게 되면 누구나 내 블로그 글을 편하게 통째로 가져갈 수 있게 되는 셈입니다. 그러니 프라이빗으로 해줍시다. 저는 임시로 temp-gatsby2로 만들었는데 이런 아래 화면이 나오면 저장소는 생성이 된 상태인거에요.

여기 사이트는 닫지 말고 그대로 띄워진 상태로 두세요.

4. vscode로 블로그 환경 구성

vscode는 개발툴이지만 이번 포스팅에서는 블로그 생성 및 작성도구가 되는셈이에요. vscode를 켜줍니다. 그리고 블로그 환경을 저장할 폴더를 구성해주세요. 개개인 입맛대로 구성하겠지만 저는 c:/ 밑에 workspace 를 만들고 거기에 블로그 명으로 다시 폴더를 만들었어요.

C:\workspace\[블로그명]

C:\workspace\temp-gatsby2

vscode에서 File → Add folder to workspace 를 선택해서 방금 폴더를 vscode에 작업공간으로 추가해주세요. 그리고 Terminal 메뉴에서 New Terminal 을 선택해주세요. 이 Terminal은 윈도우에서 ‘cmd’를 실행한것과 같은 터미널을 열어줍니다.

여기까지 따라왔으면 이런 터미널이 열리게 되는데 여기서 nodejs가 잘 설치되어있는지 확인해보세요.

C:\workspace\temp-gatsby2>node -v v14.21.3

git도 설치가 잘 되어있는지 확인해보세요. 버전은 별로 상관없습니다.

C:\workspace\temp-gatsby2>git —version git version 2.33.1.windows.1

여기까지 잘 되어있으면 먼저 gatsby 도구를 설치할거에요. npm 은 nodejs를 설치하면 사용할 수 있는 일종에 nodejs 패키지 관리 도구에요. 미리 만들어진 여러가지 nodejs를 활용해서 만들어진 도구들을 설치할 수 있는 툴이라고 생각하면 됩니다.

C:\workspace\temp-gatsby2>npm install -g gatsby

C:\workspace\temp-gatsby2>gatsby new . https://github.com/JaeYeopHan/gatsby-starter-bee

info Creating new site from git: https://github.com/JaeYeopHan/gatsby-starter-bee.git

Cloning into ’.’… remote: Enumerating objects: 173, done. remote: Counting objects: 100% (173/173), done. Receiving objects: 100% (173/173), 6.45 MiB | 10.21 MiB/s, done. Resolving deltas: 100% (5/5), done.5/148)R remote: Compressing objects: 100% (148/148), done. remote: Total 173 (delta 5), reused 139 (delta 5), pack-reused 0 success Created starter directory layout info Installing packages…

…

이런식으로 패키지가 설치가 될거에요. 지켜봅시다. 시간이 좀 걸립니다. 설치가 끝나면 바로 블로그를 pc에서 띄워볼 수 있어요.

C:\workspace\temp-gatsby2>npm start

gatsby-starter-bee@0.1.0 start C:\workspace\temp-gatsby2 npm run develop

gatsby-starter-bee@0.1.0 develop C:\workspace\temp-gatsby2 gatsby develop

success open and validate gatsby-configs - 0.317s success load plugins - 17.036s success onPreInit - 0.168s success initialize cache - 0.066s success copy gatsby files - 0.673s warn gatsby-plugin-feed was initialized in gatsby-config.js without a feeds option. This means that the plugin will use the internal RSS feed creation, which may not match your use case. This behavior will be removed in the next major release of gatsby-plugin-feed. For more info, check out: https://gatsby.dev/adding-rss-feed success onPreBootstrap - 0.052s success createSchemaCustomization - 1.955s success source and transform nodes - 0.673s success building schema - 0.896s success createPages - 0.134s success createPagesStatefully - 0.314s success onPreExtractQueries - 0.012s success update schema - 0.092s success extract queries from components - 1.690s success write out requires - 0.642s success write out redirect data - 0.136s success Build manifest and related icons - 0.236s success onPostBootstrap - 0.390s ⠀ info bootstrap finished - 54.064 s ⠀ warn unable to find prism language ‘sh’ for highlighting. applying generic code block success run queries - 1.998s - 24/24 12.01/s warn Browserslist: caniuse-lite is outdated. Please run the following command: npx browserslist --update-db success Generating image thumbnails - 15.488s - 8/8 0.52/s ⠀ You can now view gatsby-starter-bee in the browser. ⠀ http://localhost:8000/ ⠀ View GraphiQL, an in-browser IDE, to explore your site’s data and schema ⠀ http://localhost:8000/___graphql ⠀ Note that the development build is not optimized. To create a production build, use gatsby build ⠀ success Building development bundle - 24.629s

이렇게 나오면 블로그가 PC상으로 생성이 되어서 띄워진거에요. 브라우저에서 http://localhost:8000/ 로 접속해봅시다.

이렇게 나오면 일단 성공입니다. 기본적으로 생성되어있는 글들이 보이는거고 제 블로그로 바꾸려면 얘들을 다 지워야겠죠?

글을 수정해보기 전에 typora 라는 vscode에 있는 마크다운 글 작성 도구를 설치해볼거에요. vscode 좌측에 Extensions( Ctrl + Shift + X)를 선택해주세요.

typora를 검색해서 설치해줍시다. 다시 좌측에 Explorer(Ctrl + Shift + E )를 선택 한 다음 EXPLORER 에서 content/blog/ 영역이 글이 저장되어있는 공간입니다. category2 에 있는 test2.md를 본문 영역을 수정한 다음 Ctrl + S 로 저장해봅시다.

그리고 브라우저를 봐보세요.

수정한 내용이 바로 바로 브라우저에서 확인이 되죠. 이렇게 블로그 폴더 밑에 폴더를 나누어놓고 마크다운으로 글을 작성하게 되면 자동으로 인식해서 글이 만들어지는 구조입니다.

이렇게 작성한 파일들을 아까 만든 깃허브 저장소인 temp-gatsby2에 업로드해봅시다. 터미널에서 Ctrl + C를 입력하면 현재 띄워놓은 블로그 서버를 끌 수 있어요. 업로드를 위해서 잠깐 끕시다.

일괄 작업을 끝내시겠습니까 (Y/N)? Y

C:\workspace\temp-gatsby2>

C:\workspace\temp-gatsby2>del /F /S /Q /A .git

C:\workspace\temp-gatsby2>git init

C:\workspace\temp-gatsby2>git branch -M main

C:\workspace\temp-gatsby2>git remote add origin https://github.com/nhj7/temp-gatsby2.git

여기까지 하면 temp-gatsby2 안에 있는 파일들이 업로드할 수 있게 됩니다. vscode에 단축키를 이용해서 업로드해봅시다. Ctrl + Shift + P 를 입력하고

commit all 을 입력해서 선택합니다.

앞으로도 글을 작성할때 이렇게 업로드를 해야하니까 익숙해지도록 합시다. 업로드 이력을 입력할 수 있습니다. “블로그 환경 첫 업로드”로 입력하고 Ctrl + S로 저장한 뒤 해당 창을 닫아줍시다. Ctrl + W로 닫으면 편합니다.

그리고 다시 Ctrl + Shift + P 를 띄운 다음에 push를 입력합시다. git push to 를 선택 하고 저장소를 선택하면 push를 하게 됩니다. 첫 저장소 업로드를 할 때 vscode에서 깃허브 저장소 연동을 하게 되는데 저는 이미 되어있어서 나오질 않지만 아이디와 패스워드를 입력해서 토큰 인증을 하게 되면 됩니다. 구글에 많이 나오니까 어려우면 검색해보시면 금방 해결 될거에요. “vscode github 인증” 같은 식으로 검색하면 편합니다.

이렇게 푸시가 성공하면 깃허브 저장소에 파일들이 저장된 것을 볼 수 있습니다.

5. Netlify 에 사이트 올리기

이제 저장소까지 저장은 되어있고 사이트에 올리기만 하면 됩니다. Netlify에 접속하고 로그인을 해줍시다.

• 접속하고 Sites에서 Add new site를 선택해주세요.
• Import an existing project 선택
• Deploy with GitHub 선택
• 내 블로그 저장소가 안보이면? 하단에 작은 글씨로 있는 Can’t see your repo here? Configure the Netlify app on GitHub를 선택
• Install Netlify 페이지에서 Configure 선택
• 스크롤을 쭉 내리면 Repository Access 나오는데 All repositories 선택 → save 선택!
• Netlify 사이트에서 Let’s deploy your project. 페이지로 이동된다.
• 블로그 저장소 temp-gatsby2 선택

여러가지 어려워보이는 메뉴들이 보이는데 건드리지 않고 가장 하단으로 스크롤 해서 Deploy temp-gatsby2를 선택합니다.

그럼 첫 디플로이가 진행되는데 이 과정이 내 pc에서 npm start를 했던 과정을 netlify 에서 한다고 생각하면 됩니다.

netlify 사이트에서 좌측 메뉴 Deploys를 선택하면 현재 Building 중인게 나오는데 선택해서 보면 오류가 발생합니다. 저런~ NODEJS 버전을 변경해주어야 합니다.

 

NETLIFY NODE 버전 변경하기

site configuration을 선택한 다음에 Environment variables를 선택 → Add a variable 선택 → Key 에 NODE_VERSION 입력 , Values에 14 입력 → Create variable

Netlify → Deploys → 중간에 Failed 실패한 이력 선택 → Retry → Clear cache and retry with lastest branch commit 선택

모든 과정이 성공하면 이렇게 각 과정에 Complete가 나옵니다.

해당 Deploys 페이지에서 Open production deploy를 선택해도 사이트가 띄워지고 site overview 를 보게 되면 사이트 링크가 표시 되기도 합니다.

저길 선택하면 사이트가 보이게 되고 블로그는 나오게 됩니다. 앞으로 글을 새롭게 작성하고 vscode에서 commit과 push를 하게 되면 자동으로 저 사이트에 반영이 되게 됩니다.

주소가 너무 길죠?

site configuration 메뉴에서 주소를 변경할 수 있습니다. site details 에 보면 Change site name으로 변경할 수 있습니다.

처음엔 좀 힘들지만 시간을 갖고 여유있게 진행하면 충분히 할 수 있습니다. 이렇게 한번 설정해놓으면 앞으로는 마크다운으로 블로그 글을 작성하고 올리기만 하면 되니까요. 몇시간 투자해서 설정을 해볼만 합니다.

---

https://pixelpoint.io/blog/gatsby-to-slash-or-not-to-slash/

 

---

[참고자료]

Gatsby를 설명하는 Gatsby