blueimp fileupload, dropZone 수정하기

blueimp fileupload, dropZone 수정하기

dropZone은 사용자가 임의로 영역을 설정해 줄 수 있습니다.

#dropZone{
  height: 180px;
  position : relative;
  opacity : 0.3;
  border : dashed 1px #000;
}

.fade{
  opacity : 0;
  -webkit-transition : opacity .15s linear;
  -o-transition : opacity .15s linear;
  transition : opacity .15s linear;
 }
  
 .fade.in{
    opacity : 1
 }
  
  #dropzone.in {
    background-color : #44b683;
    border-color : #fff;
    color : #fff;
    opacity : 1;
  }
<div id="dropZone" class="fade well">
  <div class="txt">Drap &amp; Drop</div>
</div>
$('#dropZone').bind('dragover', function(e){
  var dropZone = $('#dropzone'),
      timeout = window.dropZoneTimeout;
  e.preventDefault();
  
  if(timeout){
    clearTimeout(timeout);
  }else{
    dropZone.addClass('in');
  }
  var hoverDropZone = $(e.target).closest(dropZone);
  dropZone.toggleClass('hover',hoveredDropZone.length);
  window.dropZoneTimeout = setTimeout(function(){
    window.dropZoneTimeout = null;
    dropZone.removeClass('in hover');
  }, 100);
});

blueimp fileupload 라이브러리

blueimp fileupload 라이브러리 수정하기

오늘은 fileupload.js 라이브러리를 받으면 많이 수정하는 부분들에 대해 알아보려 합니다.

우선 jQuery File Upload Plugin을 다운로드 해주세요!
다운로드 경로 : https://github.com/blueimp/jQuery-File-Upload

업로드할 수 있는 파일의 확장자는 acceptFileTypes를 수정해주면 됩니다.

acceptFileTypes : /(\.|\/)(gif|jpe?g|png|pdf|doc|docx)$/i

로 수정하면 gif, jpg, jpeg, png, pdf, doc, docx 확장자를 가진 파일만 업로드할 수 있습니다.

파일 크기 제한은 maxFIleSize, 멀티업로드의 경우 파일 갯수 제한은 maxNumberOfFiles 각각 우너하는 옵션으로 수정해주면 됩니다.

그래서 blueimp 라이브러리를 받아 jsp 페이지에 import시키고 파일 업로드시 변경할 옵션을 추가하려면 아래 정도로 수정할 수 있겠네요

$('#fileupload').fileupload(
  'option', {
      url : '~~.do',
      formData : {
        newParam : 'A'
      },
       disableImageResize : false,
       previewMaxWidth : 28,
       previewMaxHeight : 28,
       accpetFileTypes : /(\.|\/)(gif|jpe?g|png|pdf|doc|docx)$/i,
       maxFileSize : '5000000',
       maxNumberOfFiles : 10,
       dropZone : $("#dropZone')
       }
      );

url에는 파일을 전송할 경로,
dropZone은 파일을 드래그 앤 드롭으로 선택했을 때 어느영역에 한해서 업로드 목록에 추가시킬지를 말하는 것입니다!

좀 더 구체적인 부분들은 다음 포스팅으로 찾아올께요!

JEKYLL 블로그 구글 검색엔진 등록하기

GITHUB 블로그 만들기 STEP 7

열심히 만든 블로그 혼자만 알고 있긴 아쉽겠죠!
오늘은 블로그를 구글검색엔진에 등록시켜보겠습니다 :)

우선은 구글 계정이 있어야해요! 혹시 없는 분들은 계정을 만들고 시작해주세요.

1. Google Search Console 등록하기

Google Search Console.를 클릭해 Google Search Console에 접속해주세요.

자신의 깃허브 블로그 주소를 복사해 아래처럼 붙여넣기 해줍니다. _config.yml OPEN


계속 버튼을 누르면 아래처럼 팝업이 뜹니다.
팝업의 인증서 파일을 다운받아, 루트경로에 붙여넣어주세요! _config.yml OPEN


붙여넣고 조금 기다리면, 소유권을 인증받을 수 있습니다. _config.yml OPEN



인증이 완료되면, 아래같은 화면에 접속할 수 있습니다.
URL 등록을 조금 빨리 하고 싶다면, URL검사 창을 눌러보세요.
_config.yml OPEN

구글에서 본인의 블로그가 나오려면 ‘크롤링’이라는 작업이 필요합니다.
‘크롤링’은, 검색엔진이 깃허브 블로그에 들어있는 내용을 읽어가는 작업정도로 이해하시면 됩니다.
저처럼 구글이 조금이라도 빨리 크롤링 작업을 완료했으면 하는 분들은
‘URL검사 창’의 ‘색인 생성 요청’버튼을 눌러주세요! _config.yml OPEN

이제 크롤링이 완료될 떄까지, 몇일 여유를 두고 기다려주면 됩니다!

2. Sitemap.xml 과 Robots.txt 작성하기

Sitemap 작성전에 우선 Sitemap이 뭔지 간단히 설명하고 시작할꼐요.

Sitemap이란
웹 크롤링을 위해 필요한, 웹사이트 내에 접속 가능한 페이지 목록을 말합니다.
쉽게 어느 링크들이 유효한지 검색 엔진이 쉽게 알아 들을 수 있도록 제출하는 파일입니다.

작성은 2가지 방법이 있습니다.

1. jekyll-sitemap 플러그인 사용
2. 직접 Sitemap 작성하기

1.번 방법은 ‘_config.yml’ 에 jekyll-sitemap 플러그인을 추가하는 소스를 적어주면 됩니다.
plugins에 ‘jekyll-sitemap’을 추가해주세요.
_config.yml OPEN
2.번 방법은 가장 상위 경로에 ‘sitemap.xml’ 파일을 만들고 아래 소스를 통째로 복붙해 넣어주세요.


---
layout: null
---
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd" xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  {% for post in site.posts %}
    <url>
      <loc>{{ site.url }}{{ post.url }}</loc>
      {% if post.lastmod == null %}
        <lastmod>{{ post.date | date_to_xmlschema }}</lastmod>
      {% else %}
        <lastmod>{{ post.lastmod | date_to_xmlschema }}</lastmod>
      {% endif %}

      {% if post.sitemap.changefreq == null %}
        <changefreq>weekly</changefreq>
      {% else %}
        <changefreq>{{ post.sitemap.changefreq }}</changefreq>
      {% endif %}

      {% if post.sitemap.priority == null %}
          <priority>0.5</priority>
      {% else %}
        <priority>{{ post.sitemap.priority }}</priority>
      {% endif %}

    </url>
  {% endfor %}
</urlset>

WINDOW에서 GITHUB 블로그 만들기 STEP 6 [ 탭 이미지 변경, favicon ]

GITHUB 블로그 만들기 STEP 6

오늘은 사이트 상단의 favicon을 수정해보려 합니다.
조금 꼼꼼한 편이어서 그런지 별게 다 신경쓰여서 수정하게 되었습니다.. :)

현재 블로그 탭은 아래와 같이 보여지고 있습니다.
저는 빨간 부분을 수정해보려 합니다.
favicon


우선 _includes\head\links.html 파일을 열어 내용을 확인해주세요.
그 중 ‘/assets/icons/favicon.ico’와 ‘/assets/icons/icon.png’로 인해 위와 같은 아이콘이 뜨는 것 입니다.
favicon


그럼 사용할 favicon이미지를 고른 후, format에 맞게 사이즈와 확장자를 수정해 봅시다.
저는 프로필 이미지로 수정할 예정입니다.

/assets/icons/profile/profile.jpg를 그냥 사용해도 favicon이 정상적으로 수정되긴합니다. 귀찮으신 분들은 확장자나 크키 상관없이 그냥 경로만 수정해주세요.





1. ico 변환 [favicon.ico]

‘/assets/icons/favicon.ico’는 32X32(px) 사이즈에 확장자가 ico입니다.
[ICO 변환 사이트] 에 접속해 이미지를 새로 저장해주세요.
저는 원형 아이콘을 사용하고 싶어서, Step 3. Apply styles( optional ) 옵션을 선택했습니다.
favicon

사이즈 [Custom Size-(32x32)] 지정 후 [Convert ICO] 버튼을 클릭해 이미지를 저장해주세요.
다운로드는 Download your icon(s) 을 누르면 됩니다.


png 변환 [icon.png]

‘/assets/icons/icon.png’는 192X192(px) 사이즈에 확장자가 png입니다.
[https://fotoram.io/editor/#round] 이 사이트에서 이미지 radius와 확장자, 사이즈를 수정해 저장할 수 있습니다.
[봉잡스의 블로그] 해당 블로그에 설명이 잘 나와있으니 참조하셔도 좋을 것 같습니다.

여기까지 이미지를 새로 만들었다면, 이제 /assets/icons/ 경로에 파일을 옮기고, 수정한 경로대로 _includes\head\links.html 내용을 편집해주세요. favicon

그런 다음 반영을 완료하면 아래처럼 favicon 이미지가 변경되었음을 확인할 수 있습니다. favicon

WINDOW에서 GITHUB 블로그 만들기 STEP 5 [ 게시글 경로 수정 ]

GITHUB 블로그 만들기 STEP 5

지금까지 작성한 게시글은 모두, [블로그주소]/hydejack 경로에 작성되었습니다.
오늘은 이 게시글의 경로를 바꿔보려 합니다.

/develop 이라는 경로를 생성해, 개발 관련 포스트를 이곳에 작성할 예정입니다.

우선 루트 경로의 _featured_tags폴더로 이동해 develop.md 파일을 생성해주세요.

---
layout: list
title: Develop
slug: develop
menu: true
order: 1
description: >
  개발일기
---

layout : 게시글 display 형태 [_layouts 폴더 참조]
title : 경로 제목 [브라우저 탭에 표시할 타이틀]
slug : url
menu : true order : 왼쪽 사이드 바에서 보여질 메뉴 순서입니다.
description : 해당 경로에 포스팅 될 게시글에 대한 설명

새 md 파일을 작성하지 않고, hydejack.md 파일을 수정해 사용하셔도 무관합니다. 대신 파일 명까지 함께 변경해주세요.


다음은 _config.yml 파일의 menu 정보를 수정해야 합니다.
_config.yml 파일을 열어, 새로 사용할 메뉴 이름과 경로를 수정해주세요 _config.yml OPEN

- title:             Develop
  url:               /develop/  

이제 /develop 경로에 작성할 md 파일들이 있을 경로를 생성해주어야 합니다.
기존 hydejack/_posts를 develop/_posts로 수정해주세요.

hydejack 경로를 추후 재사용할 예정이라면, 삭제하지 말고 hydejack폴더를 통째로 복사한 후
develop이라는 이름으로 rename 시켜주면 됩니다.


여기까지 수정했다면 이제 git bash를 통해 수정한 파일들을 모두 커밋해주세요.
하위 경로의 모든 파일과 폴더를 한번에 add 하려면, 해당 경로로 이동 한 후 아래 명령어를 사용하면 됩니다.

git add .

저 같은 경우는 develop 폴더가 새로 추가 됬으니, develop경로로 이동한 후
git add . 명령어를 사용하면 해당 경로의 파일이 모두 추가됩니다.



반영이 완료된 후 다시 블로그에 접속하면,
아래 표시한 부분들이 모두 정상적으로 수정되었음을 확인 할 수 있습니다. _config.yml OPEN

WINDOW에서 GITHUB 블로그 만들기 STEP 4 [ _config.yml 수정하기 ]

GITHUB 블로그 만들기 STEP 4

오늘은 _config.yml 을 일부 수정해보려고 합니다 :)

hydejack 테마의 _config.yml 은 주석이 잘 달려있어, 수정하시는데 큰 어려움 없을것이라고
생각되지만 정리를 위해 포스트 작성합니다.

1. _ config.yml

_config.yml 은 디렉토리의 가장 상위 단계에 존재합니다.
아래처럼 파일을 찾아 열어주세요. _config.yml OPEN



파일이 정상적으로 열렸다면, 아래 노란색으로 표시된 부분들을 수정해줍니다. _config.yml OPEN

url : 본인의 GITHUB 블로그 주소  
baseurl : 본인의 GITHUB블로그 주소 뒤에 붙는 / 경로가 있다면 적어주세요.  
title : 블로그 제목  
description : 블로그 설명 ( 150 char )  
tagline : sidebar에 들어갈 짧은 설명 글  

저는 description은 딱히 수정하지 않았습니다. 본인의 블로그니 수정하시는 분들은 모두 본인에게 맞게 수정하시면 됩니다.
위처럼 수정한 후 서버에 반영해보겠습니다.

GIT BASH를 실행시킨 후, 전 포스트에서 사용했던 명령어를 사용해주세요.

cd C:/GIT/easydevd.github.io (본인 작업 경로로 이동)  
git add '_config.yml'  
git commit -m 'edit url, title, tagline'  
git push  

위 명령어까지 수행하고, 조금 기다린 후 블로그에 접속하면 아래와 같이 수정된 것을 확인할 수 있습니다.
다른 포스트에 _config.yml 은 수정 후, 서버에 재반영하는 명령어를 추가로 수행해줘야 한다고 작성했었는데 굳이 실행시키지 않아도 반영되네요..
하지만 혹시라도 저 위 명령어 만으로 반영 안되시는 분이 계시다면, 전 포스트에 작성한 명령어 추가로 수행해 보시길 바랍니다.
_config.yml OPEN



스크롤을 내려 아래부분을 더 수정해볼께요. _config.yml OPEN

logo : sidebar에 있는 로고 이미지  
author : 본인 기준으로 이름, 이메일 등을 수정  
menu : 블로그 메뉴 정보  

로고에 프로필 이미지를 사용할 수도 있지만, 당장은 생각이 없어서 저는 #을 사용해 주석을 걸었습니다.
_author에 대한 더 자세한 내용은, data/authors.yml 을 수정해야 합니다.
해당 부분은 아래에서 다뤄볼께요.
menu는 말 그대로 좌측에 보이는 메뉴에 대한 정보를 말합니다.
본인이 작성하고 싶은 글 위주로 카테고리를 만들어 수정하시면 됩니다.



여기까지 수정한 뒤 반영하면, 아래처럼 로고 이미지가 없어진 모습을 확인할 수 있습니다.
메뉴 정보를 바꾸셨다면, 아래 메뉴 목록도 같이 수정됬을거라 생각되네요.

_config.yml OPEN



이제는 sidebar에 있는 이미지를 지우고, 메인 컬러를 변경해보려 합니다.
_config.yml OPEN

permalink : 접속 경로  
paginate : 한 페이지에 보여줄 게시글 수  
paginate_path : 페이징할 경로 (위 기준으로, 1p는 path를 붙일 필요 없고, '/page-2/'.. 등을 붙이면 pagination 된다.)
accent_image : sidebar 배경 이미지  
accent_color : hydejack 기본 테마 기준, 청색  
theme_color : sidebar의 기본색  

저는 accent_image는 사용하고 싶지 않아, none 옵션을 주어 이미지가 더 이상 뜨지 않게 수정했습니다.
이미지가 제거되면, 아래처럼 보이겠네요.
theme_color는 rgb(25,55,71)로 수정 후, 개발자 도구에서 background-color를 잡으면 rgb(25,55,71)로 보입니다.
_config.yml OPEN

accent_color는 저처럼 수정하시면, 아래처럼 css가 잡히게 됩니다.
왼쪽이 수정 전, 오른쪽이 수정 후 입니다.
_config.yml OPEN



여기까지 수정하면, 정말 기본적인 _config.yml 을 수정했다고 볼 수 있겠네요.

2. authors.xml

마크다운을 사용해 포스트를 작성하고 들어가면, 글 하단 부분에 아래와 같은 부분을 찾을 수 있습니다.
노란색으로 표시되어 있는 “_data/authors.xml” 을 수정해봅시다.
authors.xml



_data/authors.xml 파일을 열고 아래처럼 수정해주세요.
단, 위에서 수정한, _config.yml의 author과 동일하게 작성해야 합니다 authors.xml

그 다음 About과 이미지경로를 수정해줍니다.
authors.xml

이미지도 본인이 사용하고 싶은걸로 변경해주세요.
아래는 제가 수정한 ABOUT 내용입니다.

You Can Send me Email <본인 이메일>  
Thank U for Inviting


authors.xml

social 부분도 수정해주세요.
자신이 추가하고 싶은 SNS게정을 등록하시면 됩니다.
저는 github와 email계정만 등록했어요.



여기까지 한 후 반영하면 아래처럼 변경됩니다.
authors.xml

WINDOW에서 GITHUB 블로그 만들기 STEP 3 [ GIT BASH 연결, 블로그 첫글 쓰기 ]

GITHUB 블로그 만들기 STEP 3

오늘은 로컬PC에 GIT 프로젝트를 다운받은 후, 블로그에 첫번째 post를 작성해보겠습니다.

1. GIT CLONE

git 프로젝트를 다운받기에 앞서, 앞으로 프로젝트를 작업할 workspace 경로를 하나 지정해주세요.
저는 C:/GIT 폴더에서 작업할 예정입니다.

파일 탐색기에서 GIT 폴더를 만들어도 되고, BASH 에서 mkdir명령어를 사용해 폴더를 생성해도 됩니다.


아래는 C 드라이브로 이동 후 GIT 폴더를 만드는 명령어입니다.

cd C:/
mkdir GIT(작업할 폴더 이름)
명령어내용
cdChange Directory 경로 이동
mkdirMake Directory 폴더 생성


여기까지 따라해 본인의 워크스페이스 경로를 만들었다면, 이제 github에서 프로젝트 소스를 다운받아 볼께요.

그러려면
순서 1. 작업할 폴더 경로로 이동한 후,
순서 2. git clone 명령어를 사용해 프로젝트를 다운로드
하면 됩니다.


Bash 창에 아래와 같은 명령어를 입력해주세요.

cd GIT(작업할 폴더 이름)
git clone "GITHUB 프로젝트 URL"

“GITHUB 프로젝트 URL” 은 전 포스팅에서 fork한 Repository URL 을 작성해주시면 됩니다.
보통 “https://github.com/[GITHUB아이디]/[GITHUB아이디].github.io” 일거라고 생각 되네요.


저의 경우는 https://github.com/easydevd/easydevd.github.io 였습니다.
그래도 이해가 안가시는 분들은
GITHUB BASH 위 URL을 복붙해주세요.


명령어를 모두 실행하면, 아래와 같이 파일이 모두 다운로드 되었음을 확인할 수 있습니다. GITHUB BASH

명령어내용
lsLIST 현재 디렉토리 모든 파일, 폴더 조회

2. ATOM 설치

이제 위에서 다운로드 받은 파일들을 수정할 편집기가 필요합니다.
본인에게 편한 편집기라면 어느것이든 상관없어요. (Ex. Brackets…)
저는 ATOM을 설치해 보겠습니다.

ATOM 사이트에 접속해 [DOWNLOAD]버튼을 눌러 설치를 진행해주세요.

ATOM

ATOM을 다 설치헀다면 아톰 실행 후 [ CTRL + SHIFT + O ] 를 눌러 아까 다운받은 프로젝트를 열어주세요.
또는 왼쪽 상단 [ FILE - Open Folder… ] 을 누르시면 됩니다.

저의 경우는, “C:/GIT/easydevd.github.io”가 열리며 아래와 같은 창이 떴습니다. ATOM

3. 블로그 첫 글 쓰기

블로그에 글을 포스팅하기 전에 먼저 알아야 할 기본적인 개념들이 몇가지 있습니다.

웹페이지는 보통 HTML, JS, CSS, NODEJS… 등과 같은 언어로 개발이 되는데, JEKYLL에서는 조금 생소한 확장자 파일을 보실 수 있습니다.

바로 .md (MarkDown) 언어입니다.
JEKYLL는 게시글 작성을 위해 MARKDOWN 언어를 사용해 .md 파일을 개발해야합니다.
그리고, 그 밖의 환경설정 등과 같은 제어는 .yml파일에서 수정하시면 됩니다.

그 중에서도 특히 기억해야할건, _config.yml 파일은 JEKYLL 동작에 대한 설정 제어를 다루고 있습니다.
앞으로 글을 포스팅할 _posts 경로의 md 파일들은 수정이나 추가해도 서버에 자동으로 반영되지만,
_config.yml 파일은 수정했다면 반드시 재빌드를 해줘야 합니다.
_config.yml 은 여러 환경 설정과 변수들을 제어하고 있는데, 사이트가 빌드 될때 한번만 읽어들이기 때문입니다.

그러니 만약 개발 중 _config.yml 파일을 수정했다면,
현재 실행 중인 지킬 서비스를 중단하고, 아래 명령어를 입력해주세요!

bundle exec jekyll serve
확장자내용
.mdMarkdown을 사용해 작성한 게시글 파일
_config.ymlJekyll 블로그에 대한 설정값을 제어하는 파일

위의 표 내용 정도로 이해하시면 될 것 같습니다.


여기까지 이해가 되셨다면, 이제 _posts 경로로 이동해 게시글을 써봅시다.

제가 다운받은 hydejack 테마는 이미 게시글이 여러개 작성되어 있네요.
우선 저는 https://easydevd.github.io/hydejack/ 경로에 md파일을 작성해보겠습니다.


ATOM을 실행시킨 후, 위에서 열어둔 프로젝트 안의 hydejack/_posts 폴더를 열어주세요.
그러면 아래처럼 이미 작성되어 있는 .md 파일이 여러개 보일 것입니다.
hydejack/_posts

해당 경로에서 [ Ctrl + N ] 또는 좌측 상단의 [ File - New File ] 을 눌러 새창을 열어주세요.


그런 다음 아래 내용을 복사해 붙여넣고, 오늘날자-test.md 로 저장해줍니다.
저는 ‘2020-01-10-test.md’로 저장했습니다.

---
layout: post
title: GITHUB 블로그 시작
description: GITHUB 블로그 시작했습니다 :)
excerpt_separator: 

WINDOW에서 GITHUB 블로그 만들기 STEP 2 [ GIT설치, JEKYLL THEME ]

GITHUB 블로그 만들기 STEP 2

오늘은 저번 시간에 이어, GIT 을 설치하고 JEKYLL 테마를 적용해볼거에요.
우선 GIT BASH를 설치합니다.

1. GIT BASH 설치 [ For Window ]

GIT BASH는 윈도우에서 GIT을 사용하기 위해 필요합니다.
아래 주소에서 GIT을 다운로드 해주세요.

저는 윈도우용을 다운로드 했습니다.
GIT BASH 다운로드
GIT BASH

위 Winodows를 클릭하면 알아서 설치파일이 다운로드 됩니다.



혹시 다운로드가 안되면, 아래 파일들 중 본인 PC에 맞는 파일을 눌러 다시 다운로드 해주세요.
GIT BASH DOWNLOAD

보통 64-bit Git for Windows Setup. 을 다운로드 받으실 것 같은데, 이 파일은 실행파일이고,
아래 64-bit Git for Windows Portable. 은 무설치 버전 파일입니다.


쉽게, 아래 Portable을 다운로드 받으면 흔히 아는 exe파일이 아닌 7z 압축파일이 다운로드 됩니다. 저는 exe파일로 설치 진행했습니다.



다운로드가 완료되면, 설치파일을 실행시켜 주세요. GIT BASH_STEP1 NEXT 버튼을 누릅니다.



GIT BASH_STEP2

OPTIONEXPLAIN
Additional Icons - On the Desktop바탕화면에 바로가기 아이콘 추가
Windows Explorer Integration마우스 오른쪽 버튼 클릭 시, GIT 연결 옵션 추가
Git LFS (Large File Support)용량이 큰 파일 지원
Associate .git* configuration files with the default text editor.gif* 구성파일을 기본 텍스트 편집기와 연결
Associate .sh files to be run with Bash.sh 파일 Bash에서 실행 가능하게 하기
Use a TrueType font in all console windows윈도우 콘솔에서 트루타입 폰트를 사용
Check daily for Git for Windows updates매일 업데이트 유무 확인하기

저는 그냥 기본 체크되어 있는대로 설치 진행했습니다.



GIT BASH_STEP3 GIT 명령어를 실행할 편집기를 골라주세요.
Git에서는 VIM을 권장 하고 있습니다.



GIT BASH_STEP4

OPTIONEXPLAIN
Use Git from Git Bash onlyGit Bash에서만 Git 사용가능
Use Git from the Windows Command PromptCMD에서도 Git사용 가능
Use Git and optional Unix tools from the Windows Command Prompt윈도우 CMD 에서 GIT과 일부 유닉스 툴 사용가능

마지막 옵션은 유닉스와 윈도우 명령이 충돌 나는 등의 문제가 발생할 수 있습니다.
잘 아시는 분만 선택해주세요.
저는 추천되어 있는 [Use Git from the Windows Command Prompt]옵션을 선택했습니다.



GIT BASH_STEP5 Next 클릭



GIT BASH_STEP6 Next 클릭



GIT BASH_STEP7

OPTIONEXPLAIN
Checkout Windows-style, commit Unix-style line endingsCheckout시 윈도우 스타일, Commit시 유닉스 스타일 적용
Checkout as-is, commit Unix-style line endingsCheckout시 스타일 변환 없음, Commit시 유닉스 스타일 적용
Checkout as-is, commit as-isCheckout, Commit 둘다 스타일 변환 없음



GIT BASH_STEP8 어떤 터미널 에뮬레이터를 사용할건지 선택해주세요.
|OPTION|EXPLAIN|
|—|—|
| Use MinTTY(the default terminal of MSYS2) | MinTTY terminal emulator 사용 |
| Use Windows’ default console window | Windows 기본 콘솔 사용 |



GIT BASH_STEP10 추가 옵션 확인 후, Next버튼을 눌러주세요.
[ Enable file system caching, Enable Git Credential Manager ] 은 기본 선택되어 있습니다.



GIT BASH_STEP11 저는 특별히 추가하지 않았습니다.
Next 클릭



GIT BASH_STEP12 Install을 눌러 설치를 시작해주세요.

그냥 Next만 계속 눌러도 설치는 정상적으로 되지만, 이해를 돕기 위해 조금 더 자세히 적어뒀습니다.

2. JEKYLL 테마

GIT 설치가 끝났다면 이제 GITHUB 블로그에서 사용할 JEKYLL 테마를 골라봅시다.
JEKYLL THEME 사이트
JEKYLL THEME



저는 Hydejack 테마를 사용했습니다.
같은 테마를 사용하실 분은 Hydejack 테마 를 참조해 주세요. GIT BASH_STEP11

단, Hydejack 은 아래 보시다시피 GPL-3.0 라이센스이니 이 점 참고 하시기 바랍니다.
되도록이면 MIT LICENSE를 사용하는게 좋아요.
라이센스 관련 설명은 아래 블로그 링크 들어가서 읽어보시면 도움될것 같습니다 :)
LICENSE 정리



사용하고 싶은 테마를 골랐다면, 다운로드 버튼을 눌러 개인PC에 파일을 받은 후, GITHUB에 올리는 방법이 있고, 아니면 GITHUB에서 프로젝트를 옮긴 후 개인 PC로 다운로드 받는 방법이 있습니다.
저는 후자의 방법을 이용해 볼게요.



우선 Hydejack 를 복사해야 합니다.
Hydejack GITHUB 에 접속해 Fork를 눌러 주세요.
FORK PROJECT

누르면 아래와 같은 화면이 나오며 프로젝트가 복사됩니다.
복사가 완료될때까지 조금 기다려주세요. FORK PROJECT



복사가 완료되면, RENAME REPOSITORY [Settings] 탭의 [Repository name]을 변경해 줍니다.


RENAME REPOSITORY 위처럼 자신의 GITHUB 아이디.github.io 로 변경한 후 [Rename]버튼을 클릭해주세요.
저는 easydevd가 아이디이기 때문에 easydevd.github.io 로 Rename했습니다.



여기까지 따라하면, 위의 도메인으로 접속했을때 아래같은 블로그를 볼 수 있습니다 :) GITHUB BLOG

3. GIT BASH, GIT 과 연결하기

github 사이트에서도 파일을 수정하거나 코딩하는 등의 작업을 충분히 할 수 있지만, commit작업만 가능합니다.
파일을 만들면 무조건 커밋해야 하기 때문에 저는 github사이트에서 직접 작업하지 않고, ATOM에서 작업한 후 Git Bash를 통해 Commit하는 방식으로 개발할 예정입니다.

위에서 설치한 Git Bash에 제 github 계정정보를 연결시켜 보겠습니다.


우선 GIT BASH를 실행시켜주세요.
GITHUB BASH

실행 후 console 에 아래 명령어를 입력해줍니다.

git config --global user.name "유저네임"
git config --global user.email "유저이메일"   

“유저 네임”과 “유저 이메일”에는 본인이 github가입할 때 작성한 내용으로 수정하시면 됩니다.

예를 들면, 저같은 경우에는 git config –global user.name “easydevd” 로 할 수 있겠네요.




다음 포스트에서는, 연결된 GIT BASH를 통해 easydevd.github.io 레파지토리를 로컬 PC에 다운받아 _config.yml 파일을 일부 수정해보겠습니다.

Pagination