[Gatsby] 블로그 제작기-0

bsu1209·2021년 8월 31일
0

BLOG

목록 보기
1/1
post-thumbnail

Gatsby, Netlify, Reactjs 를 이용하여 나만의 블로그를 만들어보는 과정을 저만의 방식으로 풀어적어보는 글입니다 ...

.
.
.

0. 이게 뭐야

먼저 뭘 해야 할까 ..

근데 Gatsby가 뭔지를 알아야 쓰지

Gatsby는 블로그 제작에 많이 사용된 정적 사이트 생성기.
JavaScript가 실행되면 빈 HTML 페이지 안에 마크업을 추가해주는 SPA(Single Page Application)와 다르게, 개발 후 Build 과정에서 마크업이 생성됩니다.

정적 사이트 생성기라는 말이 보인다
정적의 반대면 동적일테고 .. 뭐가 다른 걸까?

정적 사이트 생성기

~~쓱(SSG : Static Site Generator)이라고 불린다~~

정적 사이트 생성기(Static Site Generator) 는 말 그대로 정적인 웹사이트를 생성해주는 툴인데 일반적으로 마크다운 파일을 읽어 HTML을 생성하는 기능을 가진다. 워드프레스와 같은 툴은 서버와 데이터베이스를 이용해 사용자가 페이지를 방문할 때마다 동적으로 웹페이지를 생성한다면 정적 생성기는 미리 HTML을 생성해 서버에서는 해당 파일을 제공하기만 하면 되도록 한다.

다른 자료들을 다 찾아봤지만 위 글에서 필자는 가장 잘 이해한 것 같았다
음 .. 이제 Gatsby가 어떤 녀석인지는 알았다

React

에 대해 간략히 설명하자면 .. 그렇다

Netlify

쉽게 말하자면, 우리가 어찌어찌 개발해낸 웹페이지를 무료로 호스팅해주는 서비스이다
호스팅하지않으면 ... 나혼자만 간직하게 되는 .. 웹페이지 입장에선 조금 슬플지도

1. 시작

이제는 뭐 시작을 위한 형식적인 준비는 끝났고, 일단 드가보자 ! 우리가 제일 기대하던 것 아닌가 ㅎ

먼저 Gatsby 튜토리얼 페이지를 펼쳐서, 따라가보자 !

part 0.

필요한 배경지식들에 대해 설명하고 있고,
좀 필요해보이는 명령어가 보인다.

npm install -g gatsby-cli

위 명령어로 gatsby-cli를 install하고, 버전은 v3이상은 되어야 하는 것 같다

그리고 Gatsby Cloud 계정을 등록하라고 하는데, 필자는 Netlify를 이용하여 호스팅할 예정이기에 무시하도록 한다

part 1.

그림이 아주 이해가 잘 되도록 그려져 있어 가져와봤다
우리는 아직 호스팅은 무슨 코드 하나도 안 만들었으니, 그림에서 Gatsby Cloud에 해당하는 Netlify는 생각치말자

여기서 잠깐 ...
https://www.gatsbyjs.com/starters
위 링크를 통해 Gatsby에서 제공하는 스타터 라이브러리에서 원하는 블로그 테마를 고를 수 있다.

원하는 스타터를 고르고

npx gatsby new my-gatsby-project https://github.com/gatsbyjs/gatsby-starter-blog

위 명령어를 이용해서 Page Name을 정하고 생성해보자

gatsby new

혹 위 명령어로 처음부터 블로그를 제작하려고 할때

처음이라고 여러 질문들을 하는데 공식 홈페이지를 참조하면,

In the future, you can use these options to tell gatsby new what features you want to add to your site, and gatsby new will automatically configure them for you. It’s a much quicker way to set up new projects.

라고 한다
아마 나중에 해줘도 되는 듯하다

정상적으로 완료하였다면 이제 vscode를 켜서 gatsby develop

http://localhost:8000/ 에 접속하면 위와 같은 블로그 화면이 뜬다
이제부터는 이 블로그를 뜯어고쳐서 내 것으로 만들어 버릴 것이다

이제는 Github에 Repository를 만들어서 역사적인 Initial Commit을 한번 해보자

그 다음은 netlify를 이용한 배포이다

New site from Git 이라는 버튼을 누르면 원하는 repository를 선택해서 배포할 수 있다

Github에서 생성한 SeongukBaek/Blog 레포지토리를 선택하여 배포해보겠다

잠시 기다리면 위 사진과 같이 Your site is deployed라고 뜬다

필자는 Site settings에서 랜덤으로 때려박아놓은 듯한 알파벳의 Site 이름을 변경했다

왼쪽 아래의 Production deploys에서 배포중인 Site의 정보를 확인할 수 있다

배포한 Git repositorymain branch의 코드를 기준으로 Netlify가 자동으로 빌드하고 이에 대한 Log가 아래에 존재한다
따라서 문제점이 생긴다면 아래의 Log에서 확인 가능할 것이다

이제는 하나하나 구현해보도록 하자 !

📕 참고

  • Gatsby Tutorial : https://www.gatsbyjs.com/docs/tutorial
  • https://blog.banksalad.com/tech/build-a-website-with-gatsby
  • https://iamsang.com/blog/2020/10/10/custom-static-site-generator
  • https://delivan.dev/web/start-gatsby-blog
  • https://ha-young.github.io/blog?category=gatsby
profile
배우고 정리하고 공유하기

0개의 댓글