코딩, 독서, 여행, 영화, 맛집

0%

[Steem Project] 개츠비(gatsby)로 스팀잇 블로그 만들기

작성일 Edited on In , Views: Disqus:

스팀잇 블로그 서비스는 티스토리나 워드프레스처럼 내가 원하는 테마로 UI를 바꿀수가 없습니다. 그리고 카테고리 분류도 안 됩니다. 구글 통계/구글 광고도 사용할 수 없습니다. 그래서 아쉬운 점이 많아요.

이번에도 스팀잇 글로 깃허브 페이지 블로그를 만들었습니다. 블로그 UI(테마)는 오픈소스에서 찾아서 적용하고, 카테고리는 스팀잇에 글 제목이 [카테고리] 제목 형태면 분류하도록 했습니다. 참고로, 이전 글 [Hexo Steem 개인 블로그 만들기]에서도 깃허브 페이지(GitHub Pages)로 블로그 만들기 포스팅을 한번 했었습니다.

깃허브 페이지(GitHub Pages)는 무료입니다. 그래서 개인 블로그에 많이 사용됩니다. 깃허브 페이지에 블로그 배포하는 방법은 Jekyll, Hexo, Gatsby 등이 있습니다. 대표적으로 [카카오 기술 블로그]가 깃허브 페이지로 운영되고 있습니다.

이번에는 Gatsby를 사용하여 깃허브 페이지에 블로그를 만들어 보겠습니다. Gatsby는 빌드 속도가 매우 빠릅니다. 그리고 React와 GraphQL을 사용하기 때문에 사이트가 가볍고 빠릅니다.

참고로 Hexo와 Gatsby는 둘 다 정적(HTML) 사이트 생성기입니다. Hexo는 모든 페이지(HTML)을 생성하는 반면, Gatsby는 React와 GraphQL를 사용하여 사이트를 SPA로 만듭니다.


Gatsby를 이용하여 만든 블로그는 아래 URL로 접속하면 볼 수 있습니다.


아래부터는 스팀잇을 Gatsby 블로그로 생성하고, 깃허브 페이지에 배포하는 과정을 기록한 글입니다. Gatsby 사용 방법을 더 자세히 알고 싶으면 Gatsby 공식 튜토리얼을 참고하기 바랍니다. 그리고 블로그 소스는 깃허브(https://github.com/anpigon/blog)에 모두 공개되어있습니다.


* * *

개츠비(Gatsby) 사이트 생성하기


먼저 Gatsby CLI를 설치한다. 나는 주로 yarn을 사용한다. 그래서 yarn과 npm 두 가지 방법을 모두 기술하였다.

1
2
3
4
$ yarn global add gatsby-cli

#또는
$ npm i -g gatsby-cli

사이트 생성은 gatsby new <프로젝트명> 명령으로 한다. gatsby는 “스타터”(기본 구성이 있는 일부만 구성된 사이트)를 사용하여 사이트를 생성할 수도 있다. 나는 lumen 테마를 사용하기 위해 gatsby-starter-lumen 스타터를 사용하여 사이트를 생성했다.

https://github.com/alxshelepenok/gatsby-starter-lumen


사이트를 생성하려면, 아래 명령어를 차례대로 입력한다.

1
2
3
$ gatsby new blog https://github.com/alxshelepenok/gatsby-starter-lumen
$ cd blog
$ yarn develop #또는 npm run develop

develop가 성공하고 나서, 브라우저에서 http://localhost:8000 를 접속하면 확인 할 수 있다.

보이는 페이지는 샘플 블로그 사이트다.



개츠비(Gatsby) 스팀잇 플러그인


혹시 hexo처럼 gatsby도 스팀잇 플러그인이 있지 않을까? 해서 찾아봤다. 역시 있었다.

https://github.com/Sekhmet/gatsby-source-steem


gatsby-source-steem 플러그인을 설치한다.

1
2
3
4
yarn add gatsby-source-steem

#또는
$ npm i -save gatsby-source-steem


그리고 gatsby-config.js 파일에 gatsby-source-steem 플러그인 설정을 추가한다.

1
2
3
4
5
6
7
8
9
10
11
module.exports = ｛
  plugins: [
    ｛
      resolve: 'gatsby-source-steem',
      options: ｛
        tag: 'sekhmet', // 스팀잇 아이디 입력
        sortBy: 'blog',
      ｝,
    ｝
  ],
｝;


그런데 원하는데로 동작하지 않았다. 그래서 해당 프로젝트를 내 깃허브로 포크(Fork)하고 코드를 수정했다.


수정된 gatsby-source-steem 플러그인 사용하기


내가 수정한 gatsby-source-steem 플러그인을 사용하려면 다음과 같이 설치한다.

1
2
3
4
$ yarn add git+https://github.com/anpigon/gatsby-source-steem.git

#또는
$ npm i -save git+https://github.com/anpigon/gatsby-source-steem.git


그리고 gatsby-config.js 파일은 아래와 같이 설정한다.

1
2
3
4
5
6
7
8
9
10
plugins: [
    ｛
    resolve: 'gatsby-source-steem',
    options: ｛
      path: `$｛__dirname｝/src/pages/articles`, // posts.md 파일 생성 경로
      tag: 'anpigon', // 스팀잇 아이디
      sortBy: 'blog',
    ｝,
  ｝,
]



로컬에서 테스트하기


develop를 실행하여 로컬에서 확인해보자.

1
$ gatsby develop


브라우저에서 http://localhost:8000를 접속하면 아래와 비슷한 화면을 볼 수 있다. 내가 스팀잇에서 작성한 글들이다.



깃허브 페이지에 블로그 배포하기


깃허브에 저장소를 생성한다. 그리고 package.json 파일을 열어 repository의 url를 수정한다. 그리고 homepage를 추가한다. homepage는 https://<유저명>.github.io/<프로젝트명>형태이다.

1
2
3
4
｛
  "repository": "git+https://github.com/anpigon/blog.git",
  "homepage": "https://anpigon.github.io/blog",
｝


마지막으로 deploy명령을 실행한다. 생성된 블로그를 깃허브 페이지에 업로드하는 제일 중요한 과정이다.

1
2
3
4
$ yarn deploy

#또는
$ npm run deploy


여기까지 블로그 생성하고 배포하기 끝.


* * *

사실 저는 Travis-ci 에서 블로그를 자동 배포하는 과정까지 하고 싶었습니다. 그런데 Travis-ci에서는 빌드하는 과정 중에 sharp 모듈 오류가 발생합니다. 그래서 빌드가 안되네요. ㅠㅠ

Travis-ci에는 sharp 모듈 컴파일에 필요한 라이브러리가 누락되어 있어서, 오류가 나는 게 아닐까 생각하고 있습니다. 혹시 이 오류 해결 방법을 아시는 분은 알려주세요. ㅎㅎ


요즘은 개인 블로그 호스팅에 Netlify 서비스도 많이 이용하고 있는 것 같습니다. 이 서비스는 자동 빌드/배포/호스팅 기능을 제공한다고 해요. 그래서 다음번에는 Netlify를 사용한 스팀잇 블로그 자동 배포를 해볼 거예요. ㅎㅎ

참고: Hugo와 Netlify로 ‘스매싱’ 웹사이트 만들기

여기까지 읽어주셔서 감사합니다.