개발 블로그 시작하기 #3. 블로그 플랫폼 추천 (2) GitHub 깃허브

인사말

안녕하세요! 오늘은 두 번째로 추천해 드릴 블로그 플랫폼, GitHub에 대해 설명드리려고 합니다. GitHub는 블로그를 운영하지 않더라도 알아두면 유용한데요. 이미 GitHub를 사용하고 있고, 블로그를 만들 예정이라면 기존의 GitHub에 블로그를 만드는 것도 좋을 듯합니다.

 

어떤 언어도 다루지 못해도 운영이 가능했던 Tistory와 달리 GitHub는 시작하기 전에 알고 있어야 하는 부분이 비교적 많습니다. 하지만, 어렵지 않고 금방 익힐 수 있는 부분이고, 블로그를 운영하지 않더라도 알아 두면 좋은 부분이라 GitHub에 대해 알아보고자 합니다.

---

0. GitHub란?

GitHub를 알아보기에 앞서, Git에 대해 알아보려고 하는데요. Git이란 분산 버전 관리 프로그램으로, 여기서 버전 관리란 수정되는 버전을 전부 저장하는 것이 아니라 이전 변경사항만 저장하는 것을 의미합니다. GitHub는 Git 기반의 저장소를 제공하는 서비스 중 하나입니다.

 

GitHub에서 블로그를 운영하려면 Git에 대해 알고 있어야 하고, Git Bash 기초 명령어를 사용할 줄 알고, GitHub 사용법을 알아야 합니다. 블로그를 만들기 전, 이 부분에 대해 먼저 학습하시길 추천드립니다! 아래 추천 강의 하나를 남겨두겠습니다.

 

▶ YouTube 동빈나 - Git으로 시작하는 협업 및 오픈소스 프로젝트

https://www.youtube.com/watch?v=rhP5pseOJc0&list=PLRx0vPvlEmdD5FLIdwTM4mKBgyjv4no81&index=1 

 

블로그를 운영하지 않더라도, 알고 계신다면 협업 시 도움이 많이 되리라 생각합니다. 저도 지금 개인적으로 진행 중인 프로젝트에 GitHub를 활용하고 있는데, 익혀두니 정말 편하게 잘 사용하고 있어요! 알고리즘 문제 풀이 사이트에서 푼 문제의 코드를 자동으로 올려주는 기능도 있어요.

---

1. 블로그 만들기

GitHub: Where the world builds software

우선, 아직 GitHub 계정이 없다면 회원가입을 진행해 주세요. https://github.com/에 접속하셔서 오른쪽 위에 위치한 `Sign Up` 버튼을 누르시면 회원가입 페이지로 가실 수 있습니다. 회원가입 후에 로그인을 하신 뒤 `Your Profile`에 접속하시면 내 프로필과 저장소들을 보실 수 있습니다.

 

이후 아래 페이지에서 원하시는 테마를 선택해 주세요. 데모 페이지에서 테마가 어떻게 구성돼 있는지 구체적으로 확인하실 수 있습니다. 테마가 있는 GitHub에 접속하시면 설치 및 설정 방법을 보실 수 있습니다. 설명 예시로는 `Clean Blog Jekyll theme`를 사용할 예정입니다.

 

1. jekyllthemes.org

Jekyll Themes

2. jekyllthemes.io

Free Jekyll Themes

 

Repository를 만들어 코드를 저장하고 관리하기 위해 GitHub를 사용하게 되는데요. GitHub에서 블로그를 만든다면, 블로그 웹페이지를 구성하는 코드를 Repository에 저장하고 사이트 생성 도구와 연동해 만들게 됩니다.

 

웹페이지를 구성하는 코드를 넣을 새로운 Repository를 생성해 주세요. 생성한 Repository Name이 사용자 이름.github.io일 경우, 블로그 주소가 이와 동일하게 설정되고, 다른 이름(ex. myblog)일 경우 사용자 이름.github.io/myblog가 블로그 주소가 됩니다.

 

▶ Clean Blog theme의 GitHub https://github.com/StartBootstrap/startbootstrap-clean-blog-jekyll

 

선택하신 테마의 GitHub에 접속하시면 예시 화면과 설치 방법이 안내돼 있습니다. 저는 두 번째 설치 방법인 `Using Core Files`를 선택한 뒤, 파일을 다운로드했습니다. 이후 설명에 따라 _config.yml 파일에서 baseurl, url, title, email, description, author 등을 설정했습니다.

 

새로 생성해둔 Repository를 Clone하시고, 다운로드했던 테마 파일을 넣어주세요. 마지막으로 `bundle exec jekyll serve`로 jekyll을 설치해 주시고, Repository를 Push 하신 뒤, 앞서 설명드린 URL에 접속해 보시면 블로그가 생성된 것을 확인하실 수 있습니다.

---

2. 글쓰기

생성하신 블로그에 접속하시면 예시 테마에서는 HOME, ABOUT, POSTS, CONTACT 메뉴를 보실 수 있습니다. 저는 여기서 ABOUT과 POSTS에 글을 올리는 방법을 말씀드리려고 합니다. 이 두 가지를 구분해 사용할 필요는 없지만, 약간 다른 점이 있어서 구분해 설명드리고자 합니다.

 

1. Docs (category ABOUT)

블로그 Repository를 보시면 가장 바깥에 about.html이란 파일을 보실 수 있습니다. 이 파일이 Docs를 작성하는 페이지인데요. 아래와 같이 글 위에 간단한 설정을 작성하시고, 그 아래 글 내용을 작성해 주시면 됩니다. 또한, 새폴더를 생성해 그 안에 Docs를 작성한다면 참조를 폴더명/파일명으로 해 접근하시면 됩니다.

 

---
layout: page <!-- layout은 page로 설정 -->
title: About Me <!-- 제목 -->
description: This is what I do. <!-- 글 요약 설명 -->
background: '/img/bg-about.jpg' <!-- 글 상단에 제목, 요약 뒤에 나타날 배경 사진 -->
---

 

여기서는 딱 한 페이지로만 보여줬지만, 이 페이지에서 여러 글을 참조해 다른 글들도 볼 수 있게 구성을 바꿀 수도 있습니다. Markdown 또는 Html 파일로 다양한 구성을 만들어서 사용하신다면 더욱 풍성한 블로그를 만들 수 있으리라 생각합니다.

 

2. Blog (category POSTS)

Repository에 _posts라는 폴더를 확인하실 수 있는데요. 제가 예시로 든 테마가 아니더라고 Blog 형식으로 글을 쓸 수 있는 곳이 존재하는 테마라면 같은 폴더를 보실 수 있을 겁니다. 해당 폴더에 보시면 POSTS 메뉴에서 볼 수 있는 글들이 나열돼 있는데요.

 

파일명이 YYYY-MM-DD-TITLE의 형식으로 돼 있을 것입니다. 작성 날짜 - 제목으로 파일명을 작성해 주시면 됩니다. 그리고 글의 상단에는 아래와 같은 설정을 넣어주시면 되는데요. 각 글에 맞춰 항목을 수정해 넣어주시면 됩니다.

 

---
layout: post <!-- layout는 post로 선택 -->
title: "The dreams" <!-- 글의 제목  -->
date: 2020-01-27 23:45:13 -0400 <!-- 글 작성 날짜 -->
background: '/img/posts/02.jpg' <!-- 글 제목 뒤에 나타날 배경 사진 -->
---

---

3. TIP

1. Markdown 미리 보기 Tool 사용하기

Markdown 또는 HTML로 글을 작성하실 때 글이 어떻게 나타날지 바로 확인할 수 없다는 불편함이 있는데요. 미리 보기 기능이 있는 Tool을 사용하시면 작성한 글이 어떻게 나타나는지 확인 가능해 함께 사용하시면 좋을 듯합니다.

 

저는 주로 VSCode에서 블로그 수정 작업을 하며 `Markdown Preview Enhanced`라는 확장 프로그램을 이용하고 있습니다. 파일을 수정하고 저장할 때마다 바로 옆에서 수정된 모습을 볼 수 있어 유용하게 사용 중입니다.

 

2. 이모지 사용하기

저희가 자주 사용하는 이모지들도 블로그에서 사용할 수 있는데요. 이모지를 적절히 활용하면 글의 가독성을 높이고, 시각적인 효과를 줄 수 있다는 장점이 있습니다. Gemfile과 _config.yml에 간단한 설정 2가지만 해주시면 사용 가능합니다.

 

(1) Gemfile 수정

group :jekyll_plugins do
	gem "jemoji"

 

(2) _config.yml 수정

plugins:
	- jemoji

 

위의 설정을 완료하신 뒤 Markdown에 이모지를 넣어주세요! 아래 링크는 Markdown에서 이모지를 정리해둔 GitHub입니다. 참고하셔서 이모지를 넣으신 뒤 실행하시면 이모지가 잘 나타나는 것을 확인하실 수 있습니다.

깃허브 마크다운 Emoji 모음

---

마무리

 

지금까지 GitHub 블로그에 대해 설명드렸는데요. 블로그 생성부터 글쓰기까지 성공하신 분도 계실 테고, 중간에 오류를 만나 진행을 못하고 있는 분도 계시리라 생각합니다. 저도 처음 블로그를 만들 때 블로그 글이 올라가지 않아 헤맸던 기억이 있네요.

 

긴 글 읽어주셔서 감사합니다 :)

 

👉 이전 기획 기사 #2 블로그 플랫폼 추천 TISTORY         

개발 블로그 시작하기 #2. 블로그 플랫폼 추천 (1) TISTORY 티스토리