GitHub 블로그 빠르게 시작하기!

 GitHub를 통한 블로그를 시작하려고 합니다. 몇달을 방치하고 있다가 드디어 적용해보았습니다.

 우선 GitHub를 통한 개인페이지 구성하기는 아래 글을 참고해주세요.

   http://thdev.net/644

 GitHub를 통해서 블로그를 하려면 우선 Page를 생성해야 하였습니다. 그래서 지난 포스팅때 이런 내용을 다루었습니다.

 다만 한페이지를 관리할때는 이런 방식으로 접근하여도 큰 문제가 없습니다.

 그래서 찾은게 Jekyll을 이용한 방법입니다. 이것만 있다고 블로그가 되는건 아닙니다.

 - Jekyll의 Markdown을 활용하여 코등을 쉽게 하기

 Markdown을 활용하여 블로그를 한다면 쉽게 블로그를 할 수 있습니다. 굳이 HTML & CSS를 알지 못하여도 블로그를 할 수 있죠.

 그래서 Jekyll을 적용해야 합니다.

 

 문제는 아직 해본적 없고... 어려울것 같습니다. 그래서 가장 쉬운 방법으로 오늘 소개하려고 합니다. 이미 만들어진 블로그를 복사해서 하는 방법이겠습니다.

 

가장 빠르게 블로그 만들기

 가장 빠르게 하려고 해도 필요한것은 있겠죠.

 - GitHub 아이디

   GitHub에 아이디는 당연히 필요합니다.

 - 파일 구성을 알수 있어야 합니다.

   이 부분은 아래에서 설명하겠습니다.

GitHub 아이디를 생성하셨고, 로그인 가능하시다면 아래 방법을 쭈욱 따라주시면 되겠습니다.

 저는 Barry Clark이 만들어 놓은 jekyll-now 라는 repository을 이용하여 블로그를 만들었습니다.

 간단하게 알아야 할 용어

 - fork : 남이 만들어둔 소스코드를 내 폴더에 복사하여 소스코드를 수정할 수 있게 합니다.(간단히 복사/붙여넣기)

 - commit : 웹에서만 작업하시는 분이라면 이것만 알면됩니다. 내가 작성한 코드를 GitHub에 올립니다.

 

 그외 GitHub를 내 PC에 가져와서 작업하여 올릴 수도 있습니다.

  - 이 경우는 초보자가 하기엔 어려우니... 나중에 다루어 보겠습니다.

우선 아래 페이지로 접근합니다.

 Jekyll github : https://github.com/barryclark/jekyll-now

 

 접속하시면 아래와 같은 화면을 볼 수 있습니다. * 너무 커서 흐리긴 하네요...

 오른쪽 상단의 Fork 라는 메뉴를 확인할 수 있습니다.

 살짝 눌러줍니다.

 관리하는 repository 가 많을 경우에는 아래와 같은 화면을 볼 수 있습니다.

 자신의 아이디를 눌러주시면 되겠습니다.

 저는 @taehwandev 가 되겠습니다.

 복사가 진행 중인데 아래와 같은 화면을 볼 수 있습니다.

잠시후 아래와 같이 변경됩니다.

보시는 것과 같이 forked from barryclark/jekyll-now 라고 표시되면 Fork 가 완료된것입니다.

이제부터 설정을 변경하겠습니다. 아직 Page로 접근할 수 있는 방법은 없습니다.

접근할 수 있도록 설정을 진행합니다.

아래 화면에서 Settings를 눌러줍니다.

접속하시면 Repository name이

 "Jekyll-now" 로 표시됩니다.

이를 아래와 같이 변경하고 Rename을 눌러줍니다.

자신의 아이디(저는 taehwandev).github.io

고유이름이지만 taehwandev.github.io 로 하게 되면 외부에서 해당 repository로 바로 접근할 수 있는 URL 이 됩니다.

Published가 되는데 1분 이상 걸리니 좀 기다리셨다가 좀전에 입력한 주소로 접근하시면 됩니다

아래 화면은 조금 전 설정 화면에서 아래로 내리면 GitHub Pages 라는 메뉴에 아래와 같음을 확인할 수 있습니다.

 

 간혹 많은 시간이 허비되어 접속이 되기도 합니다.

 우선 샘플 페이지는 아래와 같습니다.

 _config.yml 을 수정하여 제목/설명/이미지를 변경하고, 샘플페이지 생성 방법도 살펴보겠습니다.

이제 블로그를 활용하기 위해서 어디에 어떤 페이지를 넣어야 할지를 설명하겠습니다.

파일명의 .md, .html, .yml

 .md : Markdown 으로 작성된 코드가 담깁니다.(about.md(페이지 설명을 담는 페이지입니다.)

.html : html 코드를 이용하여 작성됩니다. 여기에서는 index.html을 빼면 아마 생성될일 없을것 같습니다.

.yml : 설정 정보를 가집니다.

폴더 구성

_includes : 페이지 트래킹 등을 위한 Includes 파일을 담습니다. (직접 수정할일이 많지는 않을겁니다.

_layouts : 홈페이지 디자인 정보를 가집니다.(직접 수정할일이 많지는 않을겁니다.

_posts : 여기에 포스팅할 파일을 담습니다. 대략 년-월-일-파일명.md 로 작성합니다.

             만약 오늘의 포스팅을 담는다면 : 2016-03-27-Hello-World.md 로 파일을 작성해주시면 됩니다.

_sass : 이 Pages에서 사용할 아이콘에 대한 정의 정보가 담깁니다.(직접 수정할일이 많지는 않을겁니다.

images : GitHub blog에서 사용하게될 이미지를 올립니다. 이미지는 미리 올려두고 RAW 링크를 통해 접근해야 합니다.

파일 구성

404.md : 설정정보가 잘못되었을 경우에 이 페이지로 접근합니다.

README.md : GitHub 내에 설명이 필요할 경우 해당 파일을 수정하시면 됩니다.(Fork 해왔기에 기존 개발자가 작성해둔 내용이 담겨져 있습니다. 들어가셔서 지우시면 됩니다.)

_config.yml : 블로그 설정정보가 담겨져있습니다. 이 파일을 수정해야 웹이 표시되니 아래에서 수정해보겠습니다.

about.md : 웹사이트의 정보페이지입니다.

index.html : 유일하게 하나 있는 html 입니다. 이 html은 수정하실일은 없습니다.

style.scss : 스타일 정보를 담는데 역시나 수정할일은 없습니다.

_config.yml 수정하기

 _config.yml파일을 눌러줍니다. 그리고 아래의 화면에서 오른쪽 연필 모양을 눌러줍니다.(편집모드 진입)

(저 버튼은 이후 모든 페이지에서 동일하게 사용됩니다.)

	# Name of your site (displayed in the header) name: Your Name (수정)
	# Short bio or description (displayed in the header)
	description: Web Developer from Somewhere (수정)
	# URL of your avatar or profile pic (you could use your GitHub profile pic)
	avatar: https://raw.githubusercontent.com/barryclark/jekyll-now/master/images/jekyll-logo.png (이미지를 올린 다음 수정(이미지 올리는 법은 아래 설명))
	#
	# Flags below are optional
	#
	# Includes an icon in the footer for each username you enter (아래는 주요 링크입니다.)
	footer-links:
	dribbble:
	email:
	facebook:
	flickr:
	github: barryclark/jekyll-now
	instagram:
	linkedin:
	pinterest:
	rss: # just type anything here for a working RSS icon
	twitter: jekyllrb
	stackoverflow: # your stackoverflow profile, e.g. "users/50476/bart-kiers"
	youtube: # channel/<your_long_string> or user/<user-name>
	googleplus: # anything in your profile username that comes after plus.google.com/
	(구글 analytics 를 통해 트래킹을 원하면 코드만 적으면 됩니다.)
	# Enter your Google Analytics web tracking code (e.g. UA-2110908-2) to activate tracking
	google_analytics:

위의 파일을 수정하고 하단의 commit change 아이콘을 눌러 저장합니다.

별도 로그를 남기고 싶으시면 로그 제목/내용을 함께 추가해주시면 됩니다.

이미지 링크 따는 방법

images 로 이동합니다. 그리고 Upload files를 눌러 이미지를 올려줍니다.

Upload가 확인되면(초기화면으로 이동하니 다시 images를 눌러 이동하시면 됩니다.)

Raw 를 눌러서 URL을 복사하시면 외부에서 접근할 수 있는 이미지 URL 이 됩니다.

* 이미지 링크를 직접 따야할 경우에는 이렇게 작업하면 되지만 Markdown을 이용하려면 아래 Markdown을 참고해주세요.

_config.yml이 수정이 완료되면 아래와 같은 페이지를 확인할 수 있습니다.

Post 추가하기

 Post를 추가해보겠습니다.

 현재 기본으로 제공하는 Post는 위와 같이 You're up and running!

 이라는 이름으로 포스팅 되어 있습니다.

 _posts 로 이동하여 new 아이콘을 눌러줍니다.

 그리고 상단에 Name your file... 부분에 대략 이런식으로 넣어줍니다.

 년-월-일-파일이름.md

 예) 2016-3-27-Hello-World.md

 와 같은 식으로 넣어줍니다.

새로운 md 파일을 만들때에는 아래 코드를 빼먹으면 안됩니다.

아래 코드가 있어야 layout을 지정되며, 연속적으로 사용이 가능해집니다.

---

layout: post

title: Hello World

---

그러면 아래와 같이 포스팅이 완료됩니다.

Markdown 사용법 간단하게 알아보기

<html>은 이런식으로 시작하지면 Markdown은 이런것 없이 진행합니다.

### 타이틀(###에 따라서 글시 크기가 다릅니다.)

** 소제목 강조(bold)

```java

```

java 코드를 저기 사이에 넣으면 위와 같이 언어를 표시하게 됩니다.

링크는 [링크 이름](주소)로 합니다.

[꿈 많은 개발자가 되자! Tae-hwan](http://thdev.net) 으로 하면 링크가 걸리게됩니다.

이미지 링크


링크와 비슷하게 생겼습니다. images/ 뒷 부분의 파일 이름만 수정해주시면 됩니다.

메일 링크

[메일 이름](mailto:메일주소)

메일역시 위와같이 작업합니다.

더 많은 설명은 아래 페이질르 참고해주세요.

https://daringfireball.net/projects/markdown/syntax

마무리

 개발과 관련된 내용은 앞으로 GitHub Blog에서 진행하려고 합니다.

 http://taehwandev.github.io/

 가능하면... 분리를 하여서 처리하려고 합니다.

 다음 글에서는 블로그 포스팅을 Local에서도 하는 방법도 설명하려고 합니다.

 소스트리를 이용하여 커밋/푸쉬등을 쉽게 하고 편집툴로 관리하려고 합니다.

감사합니다.