나의 첫 Github 블로그

 

개발 공부를 시작하면서 개발자는 꼭 블로깅을 해야 한다는 말을 많이 들었다. 무엇이든 사진으로 기록하는 것을 좋아해 사실 글을 쓰는 것 자체가 낯설어 블로그는 예전에도 시작했다가 몇 번 접었던 기억이 있는데, 이번에 다시 한 번 시작해야 겠다는 생각이 들었고 그래서 만든 것이 바로 이 티스토리다. 사실 대부분의 개발자분들의 블로그를 찾다보면 Github를 이용해서 블로그를 만든 경우가 많다. (물론 티스토리나 네이버 블로그로도 훌륭한 개발 블로그들이 많다. ) 그래서 Github로 블로그를 만들려고 알아보다보니 개발에 대해 아무것도 모른 그 때는 어렵다고 생각해 일단 이 티스토리로 블로그를 시작했다. 그렇게 이 곳에는 일상 글, 후기 등을 올리고 대부분의 배운 내용, 즉 TIL은 Github에 올리고 있었는데 막상 자주 업로드하고, 보게 되는 TIL이 예쁘지 않다보니 계속해서 TIL을 페이지로 만들고 싶다는 생각을 하게 됐고, 결국은 만들었다. Github 블로그. 블로그 자체를 Github 블로그로 만들고 싶다기 보다는, TIL만 따로 페이지로 만들고 싶었다. 솔직히 이왕 자주 올리는만큼 Github에 잔디를 심고싶은 마음이 컸기 때문에!

 

delivan 님의 Gatsby + Netlify로 편-하게 블로깅하기 글을 통해 성공적으로 Gatsby 블로그를 만들고 배포할 수 있었다. 감사합니다! 이렇게 좋은 포스팅이 있음에도 불구하고 비슷한 내용의 포스팅을 하는 이유는 결국 미래의 내가 이 정보를 잊고 고생할 것이 보여서이다.

 

 

 

Gatsby

 

Github 블로그를 만들 수 있는 하나의 방법이다. 보통은 Jekyll, Hexo를 많이 이용하고 Hugo로 만드는 사람들도 있다. 그렇다면 나는 왜 Gatsby를 선택했는가. 일단 Hexo는 개발자가 대만인이라서 중국어로된 자료가 많았고, 템플릿의 경우에도 나의 취향과 거리가 멀었다. Hugo는 Jekyll, Hexo에 비해 늦게 나와서 아직 한국 레퍼런스가 많지 않다. 보통은 Jekyll은 루비 기반, Hexo는 자바스크립트(Node.js)기반, Hugo는 Golang 기반이라는 점에서 자신이 편한 언어로 선택하는 경우가 많지만, 나는 아직 이 중에서는 편한 언어가 없어서 나에게는 결정하는데 도움이 되지 않았다. 결국 첫 결정은 가장 많이 쓰는 걸로 하자! 라는 뜻에서 Jekyll 블로그를 만들었다. Jekyll 블로그를 만들기 위해 ruby, jekyll을 맥에서 설치하느라 한참 걸렸는데 무슨 이유인지 모르겠지만 만들었던 블로그가 [Page build faiure] 오류가 났고 그렇게 이틀이 지나고 지쳤다. 그래서 다시 선택한 것이 Gatsby였다.

 

 

Gatsby를 설치하고 테마를 고르자

 

먼저 터미널을 실행해서 Gatsby CLC를 설치해야 한다.

npm install -g gatsby -cli

Gatsby CLC를 설치했다면 Gatsby 테마를 Starter에서 확인할 수 있다. 원하는 테마를 골랐다면 그 테마에서 제공하는 소스 코드를 이용해 설치해야 한다. 나는 JaeYeopHan님의 gatsby-starter-bee 를 이용했다.

gatsby new gatsby-starter-bee https://github.com/JaeYeopHan/gatsby-starter-bee

나는 소스코드를 이용해서 설치하지 않고, 그 테마를 만든 개발자분의 github 레포지토리를 클론해서 사용했다. fork해서 이용해도 되는데, fork할 경우 커밋했을 때 잔디가 심어지지 않는다는 정보를 본 것 같기도 하고, 무엇보다 branch나 필요없는 정보가 많아 깔끔하지 않아서 클론이나 소스 코드를 다운을 받아서 이용했다.

 

내 블로그처럼 custom하기

 

Gatsby Starter를 이용하면 쉽게 마음에 드는 블로그를 만들 수 있다. 하지만 아직 정보가 개발자가 임의로 지정해 놓은 정보이니 이를 자신의 정보로 custom해야 한다. Gatsby Starter는 gatsby-meta-config.js 파일에서 기본적인 데이터를 관리할 수 있다. 이 곳에서 tile, author 등 필요한 정보는 바꾸고, 필요없는 정보는 빈칸으로 두면 된다.

module.exports = {
  title: `Bee starter`,
  description: `Blog posted about ...`,
  author: `[Your Name]`,
  introduction: `I explain with words and code. I explain with words and code. I explain with words and code.`,
  siteUrl: `https://gatsby-starter-bee.netlify.com`, // Your blog site url
  social: {
    twitter: ``, // Your Twitter account
    github: ``, // Your GitHub account
    medium: ``, // Your Medium account
    facebook: ``, // Your Facebook account
  },
  icon: `content/assets/felog.png`, // Add your favicon
  keywords: [`blog`],
  comment: {
    disqusShortName: '', // Your disqus-short-name. check disqus.com.
    utterances: '', // Your repository for archive comment
  },
  configs: {
    countOfInitialPost: 10, // Config your initial count of post
  },
  sponsor: {
    buyMeACoffeeId: 'jbee',
  },
  share: {
    facebookAppId: '', // Add facebookAppId for using facebook share feature v3.2
  },
  ga: '', // Add your google analytics tranking ID
};
개인적으로 social 링크에 tistory 링크도 추가하고 싶은데, 아직 추가하는 방법을 몰라서인지 추가하면 자꾸 에러가 난다. 나중에 찾아서 추가해야지.

 

 

Netlify로 배포하기

 

Netlify로 배포하기 위해서는 Github에 아까 원하는 테마를 다운받았던 그 코드들이 있는 레포지토리가 필요하다. 클론이나 fork를 했다면 당연히 존재할 것이다. 다운을 받아서 블로그를 만들었다면 레포지토리를 만들어서 소스 파일들을 업로드하자. Netlify에서 Github로 로그인을 하고, 레포지토리를 연결해서 Save & Deploy 버튼을 누르면 배포가 시작된다. 사이트의 주소는 Netlify가 임의로 지정했기 때문에, Site settings 에서 직접 설정할 수 있다. 아래의 Production deploys 섹션의 상태가 published 라면 내 사이트가 제대로 배포하는데 성공했다!!

 

 

블로그에 글 작성하기

 

블로그에 글을 작성하는 법은 Gatsby Starter의 테마마다 다를 수 있으니 꼭 Gatsby Starter 테마 개발자의 README 파일을 참고하기를 바란다. 나는 앞에서 말했듯이 나는 JaeYeopHan님의 gatsby-starter-bee를 이용했고, 이 Gatsby Starter에서는 gatsby-post-gen CLI 도구 를 사용한다. gatsby-post-gen CLI 도구를 사용하기 위해서는 먼저 터미널을 통해 gatsby-post-gen을 설치해야 한다.

npm install -D gatsby-post-gen

그리고 package.json 파일에 아래 코드가 없다면 추가해야 한다.

"scripts": {
  "create": "gatsby-post-gen",
}

마지막으로 아래 코드를 실행하면 블로그 포스트를 생성할 카테고리를 고를 수 있고, 포스트의 이름까지 정하고 나면 content 폴더의 blog 폴더에서 아까 선택한 카테고리 폴더 안에 포스트이름.md 파일이 생성된 것을 확인할 수 있다.

npm run create

이제 마크다운 문법을 이용해 글을 적으면 끝!

(다시 한번 말하지만, 나는 JaeYeopHan님의 gatsby-starter-bee 를 이용했고, 포스트를 작성하는 방법은 꼭 개발자의 README 파일을 읽어보기를 바란다.)

 

 

참조

 

티스토리툴바