github

깃허브로 다른컴퓨터에서 hexo블로그 수정하기

깃허브로 다른컴퓨터에서 hexo블로그 수정하고싶다!

그렇다 별것도 아닌데 이거 이해하는데 왜 이렇게 많은 시간이 걸렸는지 모르겠다.
이걸 자세히 설명해준 포스트도 정말 하나도 없었다!!!
나같이 두대의 컴퓨터에서 작업해야하는 사람을 위해서 지금까지의 방법을 포스팅 해보려한다.

첫번째 컴퓨터에서 해야할 사항

먼저 첫번째 컴퓨터에 폴더를 보자.
hexo 블로그를 생성해주는 파일 전체를 담고있는 폴더가 있다.
예를 들면 나의 상황에서는 myblog폴더가 그러하다.

(사담주의)
myblog폴더 안에서 git bash를 실행하고 $hexo g -d (generate+deploy) 해서 깃허브에 바로 정적파일들을 생성하며 올려왔었더랬다. (모르신다면 아무나 깃허브 페이지 만들기를 참고)

이 당시…!
나는 myblog의 hexo deployer를 비롯한 모든 파일이 내 깃허브로 올라가는 줄 알았다.
그래서 레포지토리를 두개 만들어야된다는 설명을 지인에게 들었는데도 당췌 이해가 가지 않았더랬다.
‘왜 두개여야하지? 이미 내 파일들을 내 주소로 되어있는 레포지토리에 올리지 않았던가?’ 하며 의아해했었다.
그런데 내 깃허브페이지를 잘 보니 public폴더 안의 내용만 올라가있지 않은가?

결국 $hexo generate로 public폴더안에 정적파일을 생성한것이고
$hexo deploy로는 그 정적파일들을 깃에 올리기 위해 ‘.deploy_git’폴더에 복사하고 이곳에 있는 것만 나의 깃허브페이지에 올리겠다는 의미로 사용하고 있었던 거다 ㅠㅠ
이걸 깨닫는데 5일이 소요되다니 ;ㅁ; 세상억울
(사담끝)

myblog 사진

myblog 폴더를 다시보자

public 사진

깃허브 사진

myblog 전체가 아닌 myblog/public폴더만 깃허브에 올라가 있는 것을 확인할 수 있다.

정리하면, hexo로 블로그를 만들었을 경우 myblog안의 public에 해당하는 부분만 .deploy.git에 복사되어 깃허브페이지 레포지토리(https://github.io/username/username.github.io.git)에 올라간다.
그렇기때문에 다른 컴퓨터에서 같은 환경으로 작업하기 위해서는 hexo와 deployer를 모두 담고있는 myblog자체를 새로운 레포지토리로 생성해서 올려야 하는 것이다.
설명이 이해가 간다면 이제 새로운 레포지토리를 만들어보자.

새 레포지토리생성

위와 같이 호스팅될 레포지토리(기존에 만들어놓았던 깃허브 주소의 레포지토리 “bomee88.github.io”)와 헥소자체를 올릴 레포지토리(hexoBlog)를 각각 만들었다면, 이제 hexoBlog에 내 로컬상의 myBlog를 push 해야한다.
방법은 맨 아래의 기본 github명령어들을 활용하면되고 아주 간단하다.

위를 참고하여 활용하면 로컬와 원격저장소를 먼저 연결해야한다.
myBlog 폴더안에서 우클릭하여 gitbash를 실행하고 일단 연동상태부터 확인해보자.
연동상태가 당연히 기존의 레포지토리로 설정되어 있을 것이다. 이제 이걸 새로운 hexoBlog주소로 변경해놓는다.

gitbash_연동/푸쉬하기
1
2
3
4
5
$ git remote -v //현재 연동상태 확인
$ git remote add origin https://github.com/bomee88/hexoBlog.git //헥소원본 레포지와 연동으로 변경
$ git add . //전체를 깃에 올린다고 알림
$ git commit -m "add all hexo file" //커밋작성
$ git push origin master

위와 같은 방식으로 푸시한다.
일단 우리의 모든 헥소파일은 웹서버에 올라갔고 이제 다른 피씨에서 클론해서 수정하는 건 상대의 몫이다.
불쌍하니.. 상대의 몫도 해결해보도록하자.

두번째 컴퓨터에서 해야할 사항

자 이제 다른 컴퓨터로 넘어왔다.
그게 내 노트북이 될 수도있고, 다른 작업자가 될 수도 있겠다. 여하간 그 컴퓨터에도 깃허브와 헥소를 할 수 있는 환경인지, 그렇지 않다면 처음부터 셋팅을 해줘야한다.
깃에서 git bash를 받는 방법과 hexo를 위한 node.js를 받아 깃을 사용할수 있는 환경을 만들고 아무폴더에서나 우클릭으로 일단 gitbash를 실행한다. 그리고 우리의 hexoBlog를 클론해보도록 하자.

gitbash_다운로드(클론)
1
2
3
4
5
6
7
8
9
10
11
12
$ git config --global user.name  //깃에게 내 아이디 알려주기
$ git config --global user.email  //깃에게 내 이메일 알려주기
$ git clone [주소입력]		//다운받고 싶은 곳을 클론하기
$ cd [주소파일]		    	//주소파일생성된 곳으로 들어가기
$ touch Readme.txt 	    	//시험용 리드미 파일 생성
$ git status		    	//새로 생성된 파일 상태 확인
$ git add Readme.txt 		//추가할 파일 깃에게 알리기(권장)
$ git add . 	        	//추가된 전체를 깃에게 알리기
$ git commit -m "add Readme.txt"   //커밋작성하기
$ git remote add origin https://github.com/username/myproject.git //로컬과 원격 저장소를 연결 
$ git remote -v 			//연동상태 확인하기
$ git push origin master	//깃허브로 푸쉬하기


gitbash_git기본명령어
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/* git 파일 및 폴더 다운로드-업로드 */

$ git clone [주소입력]		//다운받고 싶은 곳을 클론하기
$ cd [주소파일]		    	//주소파일생성된 곳으로 들어가기
$ touch Readme.txt 	    	//시험용 리드미 파일 생성
$ git status		    	//새로 생성된 파일 상태 확인
$ git add Readme.txt 		//추가할 파일 깃에게 알리기(권장)
$ git add . 	        	//추가된 전체를 깃에게 알리기
$ git commit -m "add Readme.txt"   //커밋작성하기
$ git remote add origin https://github.com/username/myproject.git //로컬과 원격 저장소를 연결 
$ git remote -v 			//연동상태 확인하기
$ git push origin master	//깃허브로 푸쉬하기

/*git 파일 및 폴더 삭제*/

$ git rm -r [파일 혹은 폴더] //로컬, 웹 둘다 삭제
$ git rm -r --cached [파일 혹은 폴더] //웹만 삭제
$ git commit -m "수정사항"
$ git push origin master


웹 퍼블리싱의 이해

웹 퍼블리싱의 이해 - 1.웹표준, 웹접근성, 반응형웹이란?

웹 퍼블리싱의 이해

에 들어가기 앞서..
이 포스팅은 작년에 사내에서 웹디자이너 대상으로 코딩교육을 해달란 부탁을 받고 만들었던 ppt를 기반으로 작성했다. 대상이 웹디자이너였으며, 웹퍼블리싱에 대해 이해를 돕는 정도로만 간략하게 작성 되었다는 것을 참고하시길 바란다.
그리하여.. 이 포스팅의 독자는 웹에 대한 지식이 전무하신 분, 혹은 디자이너, 혹은 웹이 아닌 다른 분야의 개발자인데 웹에 대해 알고싶으신 분이면 적합하겠다.
목차는 다음과 같으며, 포스팅을 완료하는 시점에 ppt도 같이 업로드 하겠다.


웹퍼블리싱의 이해 목차


1. 웹 표준

웹에서 표준적으로 사용되는 기술이나 규칙.

특정 브라우저에서만 사용되는 비 표준화된 기술은 배제하고, 모든 브라우저에 동일하게 적용될 수 있도록 W3C(World Wide Web Consortium)의 토론을 통해 나온 권고안을 사용하는 것을 말한다. 웹 문서의 구조와 표현, 그리고 동작을 구분해서 사용하는 것을 뜻한다.


2. 웹 접근성

신체적 제한조건을 가진 고령자나 장애인들도 이용하기에 편리하도록 웹을 구성, 디자인 하는 것.

  • 인지성(Perceivable)
    정보와 사용자 인터페이스 요소는 그들이 인지할 수 있도록 사용자에게 표시될 수 있어야 한다.
    모든 텍스트가 아닌 콘텐츠에 대체 텍스트를 사람들이 원하는 인쇄, 점자, 음성, 기호 또는 간단 언어 등과 같은 형태로 제공해야 한다.
    시간을 바탕으로 한 미디어에 대한 대안을 제공해야 한다.
    정보와 구조의 손실 없이 콘텐츠를 다른 방식(예를 들면 더욱 간단한 형태로)들로 표현할 수 있어야 한다.
    사용자들이 보다 쉽게 보고 들을 수 있는 전경에서 배경을 분리한 콘텐츠를 만들어야 한다.

  • 운용성(Operable)
    사용자 인터페이스 요소와 탐색은 운용 가능해야 한다.
    키보드로 모든 기능을 사용할 수 있도록 해야 한다.
    읽기 및 콘텐츠를 사용하는 사용자에게 충분한 시간을 제공해야 한다.
    알려진 방법으로 발작을 일으킬 수 있는 콘텐츠를 디자인하지 않아야 한다.
    사용자가 탐색하고, 콘텐츠를 찾고 그들이 어디에 위치하고 있는지를 알 수 있도록 도와주는 방법을 제공해야 한다.

  • 이해성(Understandable)
    정보와 사용자 인터페이스 운용은 이해할 수 있어야 한다.
    텍스트 콘텐츠를 판독하고 이해할 수 있도록 만들어야 한다.
    웹 페이지의 탑재와 운용을 예측 가능한 방법으로 제작해야 한다.
    사용자의 실수를 방지하고 수정할 수 있도록 도와야 한다.

  • 내구성(Robust)
    콘텐츠는 보조 기술을 포함한 넓고 다양한 사용자 에이전트에 의존하여 해석될 수 있도록 충분히 내구성을 가져야 한다.
    보조 기술을 포함한 현재 및 미래의 사용자 에이전트의 호환성을 극대화해야 한다.



3. 반응형 웹

다양한 디스플레이에 맞춰 반응하도록 구성, 디자인 된 웹 페이지.

다양한 해상도에 대응하기 위하여 디바이스의 종류에 따라 웹 페이지 크기가 자동적으로 재조정 되는 것을 말한다. 어떤 환경에서도 그에 맞게 사이즈가 변화되어 사용자가 보기 편리하게 만드는 웹이다. ‘모바일웹+PC웹’과의 차이점은 하나의 HTML만으로도 특정장치에서 최적화 된 환경을 제공한다는 것이다.
반응형웹의 구축에 대한 자세한 설명은 아래 링크를 대신한다.

· Deview 반응형웹 구축기 (정찬명님)
목차_
반응형 웹의 필요성
반응형 웹은 무엇인가?
반응형 웹 고려사항
반응형 웹 성능
웹 폰트 적용
이미지 파일 병합
CSS 파일 병합
JS 파일 병합
JS 지연 로딩
모바일 뷰 포트 설정
미디어쿼리 이해
미디어쿼리 활용 범위
미디어쿼리와 낡은 모바일 브라우저
미디어쿼리와 낡은 데스크톱 브라우저
가변폭 그리드 레이아웃
모바일 내비게이션 패턴
가변폭 이미지와 동영상
해상도에 따른 이미지 분기
해상력에 따른 이미지 분기
HTML5 적용
HTML5와 IE 6~8
모바일 먼저? 데스크톱 먼저?
새로 구현? 리펙토링?
반응형 웹 프레임웍

hexo

Hexo 테마 커스터마이징

Hexo 테마를 커스터마이징하다.

그렇다. 내 맘에 들지 않았다. 이 테마 저 테마 깔아봐도 몇프로 부족했다.
내 맘대로 해보고싶었지만 generate하면 public에 수정했던 css들이 날라가버려 적용이 안되더라.
답답한 맘에 hexo theme를 구조를 뜯어보고 고치기로 했다.
이 또한 웹개발자에겐 넘나리 쉽고 간편한 일일진 모르지만, 내 나름 힘든 과정이었음으로
누군가에게 도움이 되고자 포스팅 해보려한다.


1. hexo의 clean-blog테마를 먼저 깔아보자.

hexo를 깔면 기본으로 landscape라는 테마가 깔려있다.

landscape theme 화면 뷰

음~ 너무나 맘에 들지 않는다. 나름 반응형까지 지원하는 테마지만 우리가 원하는
깔끔하고 시원한 테마는 아닌것 같다. 그래서 커스터마이징하기 수월하게끔 깨끗한 clean-blog를 일단 깔아보았다.

방법은 너무나도 친절하게 정리해주신 아래 블로거님의 스텝을 따라하도록한다.

Hexo와 Github page로 만든 블로그에 Hexo 테마 적용하기 -Dev DY님

clean-blog 테마 화면 뷰

위와 같은 모습으로 설치된다.
그치만 나는 사이드메뉴도 넣고 싶었고 추후 프로필 페이지도 따로 멋있게 만들고 싶었다.
그러기 위해선 hexo의 구조부터 알아야 했다.


2. hexo 구조를 파악하자.

헥소 구조

일단 hexo를 설치한 깃허브페이지의 최상단의 폴더를 보면 위와 같다. 여기서 눈여겨 봐야할 폴더와 파일은..

  1. public : 이 폴더는 다른 폴더안에 있는 theme와 source 및 congif파일들이 generate 된 뒤 생성되는 정적파일들이 모이는 곳이다.
  2. source : 우리가 작성할 post가 들어가는 폴더이다. post안에 작성한 tags, categorise 등이 source안에 구분되어 데이터로 쌓인다.
  3. theme : 내가 다운로드한 테마가 담겨있는 폴더이다. 기본테마인 landscape와 clean-blog가 담겨 있을 것이다.
  4. ＿config.yml : github page의 초기 설정값들이 담겨있다. 여기에 작성한 것들을 함수화해서 generate시 각 파일에 흩뿌려 public을 생성한다.

제가 이해한대로 작성했습니다. 틀린 것이나 오류가 있다면 댓글부탁드립니다.

public은 아무리 수정해대도 결국 generate하면 다 날라가 버린다.
그렇다면 theme안의 어떤 것들이 정적파일로 생성되어 public에 들어간단 의민데
그럼 theme는 어떤 구조를 띄고 있는지 살펴봐보자.

헥소 테마 구조

languages는 config에서 언어를 뭘로 설정하느냐에따라 보여질 문구가 들어있는 것 같다. 한글은 없으므로 config의 언어설정은 그냥 en하면 된다. README에는 이 테마의 config를 작성하는 방법 및 포스트시 추가 가능한 내용들이 나와있다.

  1. layout : 홈페이지의 각 부분을 따로따로 떼어논 .ejs(html형식) 파일들이 있다.
  2. source : css와 img가 있는데, css는 stylus라는 프리프로세서를 통해 작성해놨다. 이또한 해당 부분에 따라 나눠져있다. img는 해당 (배경)이미지들이 존재한다.
  3. ＿config.yml : 아까 상위에 있던 config와는 또 다른 config파일이다. 테마 안의 좀더 상세한 초기설정들을 할 수 있다. (작성법은 README를 참고.)


3. 커스터마이징에 필요한 환경을 구성하자.

위와 같은 구조이라고 했을 때, 나(혹은 퍼블리셔)의 기본 작업방식으로 작업하려면 먼저 html을 작성하고 css를 입히는 것 처럼 layout을 먼저 손봐야 한다.
(이 작업의 사전 지식이 되는 ‘웹의 기본 구조 및 형식’은 추후 포스팅 한 뒤 링크를 달아 놓겠다.)
나는 메뉴바 부분을 제일 먼저 수정하고 싶었으므로 menu가 들어있는 html의 조각을 찾아갔다.
찾는 방법은 아래와 같다.
먼저 html의 head와 body를 비롯한 모든 껍데기를 감싸고 있는 ‘myBlog/themes/clean-blog/layout/layout.ejs’를 연다.

layout.ejs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html <% if(config.language) { %>lang="<%= config.language %>"<% } else { %>lang="en"<% }%>>

<!-- Head tag -->
<%- partial('_partial/head') %>

<body>

    <!-- Menu -->
    <%- partial('_partial/menu') %>

    <!-- Main Content -->
    <%- body %>

    <!-- Footer -->
    <%- partial('_partial/footer') %>

    <!-- After footer scripts -->
    <%- partial('_partial/after-footer') %>

</body>

</html>

웹의 구조를 간단히 설명하자면 html(현재 표준은 html5)이라는 법칙안에 머리(head)와 몸(body)으로 구성 되어있다. 머리(head) 안에는 그 정신/생각이라 할 수 있는 meta tag들이 담겨있고 이것들은 눈(web 화면상)에 보이지는 않으나 이 웹페이지를 정의하고, 선언하는 역할을 한다.
몸은 눈에 보여지는 부분이고 여기에 입력하는 모든 것은 웹 화면상에 나타난다. css란 이 몸에 옷을 입히는 일을 말하고 javascript/j-query등은 옷을 입힌 몸에 동력을 불어 넣는 일을 한다.

보다시피 전체 html구조가 나온다. 해당하는 부분이 각 ejs파일들로 인클루드 처리되어 있는 것 같다.
내가 고치려고 하는 menu의 경로도 확인 가능하다.
‘myBlog/themes/clean-blog/layout/＿partial/menu.ejs’를 열어보자.

menu

menu.ejs_원본
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!-- Navigation -->
<nav class="navbar navbar-default navbar-custom navbar-fixed-top">
	<div class="container-fluid">
		<!-- Brand and toggle get grouped for better mobile display -->
		<div class="navbar-header page-scroll">
			<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
				<span class="sr-only">Toggle navigation</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<a class="navbar-brand" href="<%- config.root %>"><%- theme.menu_title || config.title || "" %></a>
		</div>
		<!-- Collect the nav links, forms, and other content for toggling -->
		<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
			<ul class="nav navbar-nav navbar-right">
				<% for (var i in theme.menu){ %>
					<li>
						<a href="<%- theme.menu[i].url ? url_for(theme.menu[i].url) : url_for(theme.menu[i]) %>">
							<% if (theme.menu[i].icon) { %>
								<i class="fa fa-<%= theme.menu[i].icon %> fa-stack-2x"></i>
							<% } else { %>
								<%= i %>
							<% } %>
						</a>
					</li>
				<% } %>
			</ul>
		</div>
		<!-- /.navbar-collapse -->
	</div>
	<!-- /.container -->
</nav>

위와 같은 코딩을 볼 수 있다.
<% %> 에 해당하는 내용은 EJS* 언어임으로 건드리지 않는게 좋다.

EJS : EJS는 원래 JavaScriptMVC의 일부였던 클라이언트 측 템플릿 언어이며 현재 DoneJS로 대체되었다고 한다.

일부 코딩을 바꿔 아래와 같이 수정해봤다.

menu.ejs_수정
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!-- Navigation -->
<div class="custom-nav">
	<div class="menu-icon">
		<button>
			<span class="bar"></span>
			<span class="bar"></span>
			<span class="bar"></span>			
		</button>
	</div>
	<a class="logo" href="<%- config.root %>"><%- theme.menu_title || config.title || "" %></a>

</div>	

<div class="left-side" id="bs-example-navbar-collapse-1">
	<button class="close">
		<span class="bar"></span>
		<span class="bar"></span>
	</button>
	<div class="intro">
		<img src="/img/profile.jpg" alt="내사진">
		<p><a href="mailto:bomee88@naver.com"><strong>@봉치</strong></a>Front-end개발, 웹기획, 웹디자인까지 호기심많은 UI개발자입니다.</p>
	</div>
	<ul>
		<% for (var i in theme.menu){ %>
			<li>
				<a href="<%- theme.menu[i].url ? url_for(theme.menu[i].url) : url_for(theme.menu[i]) %>">
					<% if (theme.menu[i].icon) { %>
						<i class="fa fa-<%= theme.menu[i].icon %> fa-stack-2x"></i>
					<% } else { %>
						<%= i %>
					<% } %>
				</a>
			</li>
		<% } %>
	</ul>
</div>

기존의 navbar, navbar-default, navbar-custom, navbar-fixed-top 등의 클래스명은 부트스트랩의 일환이므로 css 중복을 방지하기 위해 과감히 삭제하고
새로운 클래스명 ‘custom-nav’를 사용해 내가 원하는 css와 js를 입힐 것이다.
그럼 이제 css와 js를 커스터마이징해보자.

‘myblog/public’으로 들어가보면 css와 js폴더가 존재한다.

거기에 각각의 customizing.css, customizing.js를 만들어 넣자.


이제 우리가 만든 customizing파일들을 html에 링크를 연결해야한다.
아까 껍데기 부분이었던 ‘myBlog/themes/clean-blog/layout/layout.ejs’를 다시 확인해보자.

layout.ejs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html <% if(config.language) { %>lang="<%= config.language %>"<% } else { %>lang="en"<% }%>>

<!-- Head tag -->
<%- partial('_partial/head') %>

<body>

    <!-- Menu -->
    <%- partial('_partial/menu') %>

    <!-- Main Content -->
    <%- body %>

    <!-- Footer -->
    <%- partial('_partial/footer') %>

    <!-- After footer scripts -->
    <%- partial('_partial/after-footer') %>

</body>

</html>

css는 html의 head부분에 존재한다.
그렇다면 partial의 Head tag라고 표기된 부분의 ‘＿partial/head.ejs’파일을 열면 되겠다.

다른 메타태그부분들이 즐비하지만 우리가 눈여겨 봐야 할 곳은 빨간 사각형인 custom css부분이다.
위의 사진과 같이 customizing.css 를 link해준다.

그 다음은 js다. js는 보통 head에 위치하기도 하지만, html이 모두 로드된 뒤에 자연스럽게 js가 돌아가도록 하기위해 body제일 아랫부분에 위치하기도 한다. head에 js가 없었으니 body의 아랫부분인 after-footer.ejs를 확인해보자.

역시나 존재하는구나!
우리의 customizing.js를 삽입해주고 저장하고 닫는다.

이제 드디어 커스터마이징 할 수 있는 모든 환경을 만들어 놓았다.
위의 예시는 menu뿐이었지만 그 외에 여러분이 원하는 어떤 영역이든 layout에서 확인 한 뒤
html(.ejs)를 고치고 customizing.css에서 css를 입히고 customizing.js에서 동작을 만들어주면 된다.
css와 js를 다룰 줄 아는 사람이라면 누구든지 hexo를 커스터마이징 할 수 있을 것이다.

여기까지로 hexo customizing 포스팅은 마치고..
다음 포스팅 부터는 필자의 주된 영역인 웹표준, 반응형 웹, html, css, j-query 등에 대해서 다뤄보도록 하겠다.

github

아무나 깃허브 페이지 만들기

깃허브페이지를 만들다.

깃허브페이지로 블로그 만들기가 정말 쉽지않았다.
커맨드라인이 생소해서 깃허브 데스트탑을 다운받아 이용해봤는데 구글링 자료들이 많지 않아 결국엔 깃을 설치하게 됐다. Git, Node.js, hexo까지.. 쉽지않았지만 기나긴 구글링 끝에 성공했다. hexo 테마가 마음에 들지않아 커스터마이징하기 위해 또 hexo구조까지 뜯어가며 공부한 결과 그나마 지금의 구색을 갖추게 되었다.

부랴부랴 만들고나니 웹에 대한 지식이 전무한 사람도 이해할 수 있을만한 포스팅이 있었으면 좋겠다고 생각했다.

좀 어설프긴 하지만 그래도 내가 밟아간 과정을 남겨보려한다.


필수요소 설치

아래는 깃허브페이지를 만들기 위해 필요한 것들을 우리가 알아야할 부분만 요약해봤다.

  1. git : 간단히 말해 버전관리앱이라고 한다. 더 많은 설명은 구글링을 대신하고 우리는 여기서 git bash를 통해 까만창에 명령어들을 써댈것이다.
  2. git hub : 깃허브는 우리가 접속할 웹계정을 생성할 공간이다. 로컬에서 프로젝트를 작성하고 나의 깃허브웹에 업로드해 누구나 볼 수 있게 한다.
  3. node.js : 자바스트립트 런타임이라고 한다. 간단히 큰 오픈 소스 라이브러리라고 보면 될 것 같다. 일단 노드도 설치해야한다. 이걸 통해 hexo라는 깃허브페이지 테마를 설치 할 것이다.
  4. hexo : 빠르고 간단하고 강력한 블로그 프레임워크라고 사이트에 자기소개하고있다. 지킬기반의 블로그 테마라고 보면 될 것 같다.


1. 깃허브 가입 및 레포지토리 생성하기

깃허브에 가입한다.

깃허브 가입하기

빨간부분의 내용을 잘 입력하여 가입하면 된다. 메일주소는 나중에 인증해야 하기 때문에 유효한 것으로 적어야 한다.


레포지토리 생성하기

가입한 뒤에 빨간 표시 부분의 New repository를 클릭해서 새로운 레포지토리를 만든다.


레포지토리 생성하기2

위 그림과 같이 레포지토리 이름은 “사용자아이디”.github.io 로 생성하고,
공개여부는 Public으로 선택한 뒤 아래 초록버튼 Create repository 버튼을 누른다.


2. 깃 설치하기

이 곳을 눌러 깃을 설치한다.

깃 설치하기1

위 링크로 들어가 자신의 PC에 맞는 OS를 클릭하면 자동으로 다운로드 된다.


깃 설치하기2

다운로드 후 실행시켜 Next를 열심히 눌러 설치한다.


3. 로컬과 깃허브 연결하고 hexo설치하기

자 이제 내 PC와 깃허브 저장소를 연결해보자. 아까 열심히 설치한 git에서 git bash를 실행한다.

깃바쉬 열기

탐색기에서 git bash를 검색해서 열면 된다.

그 뒤 아래와 같이 입력하면 된다.
이 작업은 

1
$ git config --global user.name "Your Name Here"

“$”는 창에 달려있으므로 따로 안써줘도 되고 그 뒤부터 써내려가면 된다. your name에 내아이디를 넣는다.

깃바쉬 열기

위와 같이 작성하면 된다. 근데 이게 잘 알아들은건지 뭔지 기분나쁘게 또 입력하라는 창만 나오고 반응이 없어? 싶을때는 아래와 같이 써볼수도 있다.

1
$ git config --global user.name

사실 아직도 git과 github를 완전히 이해하진 못하겠다.
넘나 생소하고 먼 그대들이기에
그 이후의 과정은 아래 블로그로 대체한다.

완전 초보자를 위한 깃허브

헥소 설치과정은 아래 블로그로 대체한다.

Github Page와 Hexo를 통해 30분만에 기술 블로그 만들기

위 블로그 외에도

hexo 소개 페이지
만 읽어도 충분히 설치 가능하다. 왜냐면 한글판이기때문에^^..

hexo를 설치하고 로컬과 깃허브를 연결했다면 그 위치에서 깃바쉬를 바로 열 수 있다.
로컬에서 깃바쉬열기

그런 뒤 아래와 같이 입력하면 로컬서버에서 바로 웹화면의 모습을 미리 볼 수있다.

1
$ hexo server

http://localhost:4000
브라우저에 위와 같이 입력해보자. 웹서버에 올렸을 모습을 바로 확인가능하다.
로컬에서 모든 수정작업을 마친 뒤 generate하여 정적파일들을 생성한다. 

1
$ hexo g

가늠컨데 이 작업을 통해 각각 분산되어있던 config.yml, .md(마크다운), .ejs, .styl(스타일러스) 파일들이 public폴더 안에 정적 파일들로 생성되는 것 같다.

그리고 나서 로컬서버 주소로 다시 확인해본다.
더이상 변동할 내용이 없을 경우 웹사이트에 deploy한다.

1
$ hexo -d

deploy후 서버에 반영되는 시간이 몇분 걸리긴 한다. 1~2분 지나도 적용이 안되거나 스타일이 깨져보이는 경우가 생기면 웹에 저장되어있는 기존 캐시때문임으로 브라우저 설정에서 캐시를 삭제하도록한다. (크롬브라우저 기준 단축키 ‘Ctrl+Shift+R’)


4. 포스트 작성하기

포스트를 작성할때도 기본적인 html 상식정도는 알아야 가능하다.
h1, h2, h3, div, a태그 등 이런거 뭔지 하나도 모르겠다 하시는 분들은 네이버나 브런치 등 에디터 달려있는 블로그를 이용하심이 좋을 것 같다.

3번의 링크들을 통해 순서대로 설치하고 폴더 구조를 보면 아래와 같이 되어있다.

1
2
3
4
5
6
7
8
.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

여기서 source에 posts 폴더로 들어가면 제일먼저 만나게 되는 것이 .md(마크다운)파일이다.
마크다운은 우리가 아는 기존의 마크업 방식보다 좀더 유연하고 편리하다.
아래의 링크를 들어가면 작성하는 방법이 나와있다.
마크다운 파일이라고 마크다운만 작성법만 사용가능한가 했더니 기존의 마크업방식도 반영되고, hexo 안의 hexo-writing방법도 사용가능하더라.

포스트 작성 문법

  1. html 기본문법(마크업)
  2. 마크다운
  3. Hexo Writing(hexo설치 시)

html 기본문법은 우리가 흔히 보는 마크업이기때문에 생략하고,
마크다운과 hexo-writing사용법은 각 이름에 걸어둔 링크를 참조하도록 한다.
나는 세가지 방법중 마크업과 마크다운을 섞어서 사용하는 중이다.
마크업보다 훨씬 편한거같다.

아! 나는 에디터로 Sublime Text 3를 사용하고 있는터라 아래와 같은 모습으로 편리하게 편집이 가능한데.. 혹여 에디터 없이 편집하시는 분들이 계실지도 몰라 편집화면 모습을 공유해본다. (링크 눌러 다운로드 가능하다.)
서브라임텍스트 사용화면

Package Control의 Install Package를 사용해서 다운로드하면 각종 파일형식이 다 지원이 된다.

서브라임만 4년째 이용중인데 ‘이렇게만 되면 편할텐데~’ 라고 생각한 것들을 구글링 해보면 모든 패키지가 이미 다 나와있을 정도로 빠르고 편리하다. 자세한건 나중에 기회가 되면 포스팅하도록 하겠다.

다음에는 hexo테마를 좀더 분석해보고 어떻게 내가 원하는대로 커스터마이징 할 수 있는지 정리해서 올려보려한다.
포스팅 정말 쉬운게 아니구나.
그럼 이만~