계속 버튼을 누르면 아래처럼 팝업이 뜹니다. 팝업의 인증서 파일을 다운받아, 루트경로에 붙여넣어주세요!
붙여넣고 조금 기다리면, 소유권을 인증받을 수 있습니다.
인증이 완료되면, 아래같은 화면에 접속할 수 있습니다. URL 등록을 조금 빨리 하고 싶다면, URL검사 창을 눌러보세요.
구글에서 본인의 블로그가 나오려면 ‘크롤링’이라는 작업이 필요합니다. ‘크롤링’은, 검색엔진이 깃허브 블로그에 들어있는 내용을 읽어가는 작업정도로 이해하시면 됩니다. 저처럼 구글이 조금이라도 빨리 크롤링 작업을 완료했으면 하는 분들은 ‘URL검사 창’의 ‘색인 생성 요청’버튼을 눌러주세요!
이제 크롤링이 완료될 떄까지, 몇일 여유를 두고 기다려주면 됩니다!
2. Sitemap.xml 과 Robots.txt 작성하기
Sitemap 작성전에 우선 Sitemap이 뭔지 간단히 설명하고 시작할꼐요.
Sitemap이란 웹 크롤링을 위해 필요한, 웹사이트 내에 접속 가능한 페이지 목록을 말합니다. 쉽게 어느 링크들이 유효한지 검색 엔진이 쉽게 알아 들을 수 있도록 제출하는 파일입니다.
작성은 2가지 방법이 있습니다.
1. jekyll-sitemap 플러그인 사용 2. 직접 Sitemap 작성하기
1.번 방법은 ‘_config.yml’ 에 jekyll-sitemap 플러그인을 추가하는 소스를 적어주면 됩니다. plugins에 ‘jekyll-sitemap’을 추가해주세요. 2.번 방법은 가장 상위 경로에 ‘sitemap.xml’ 파일을 만들고 아래 소스를 통째로 복붙해 넣어주세요.
오늘은 사이트 상단의 favicon을 수정해보려 합니다. 조금 꼼꼼한 편이어서 그런지 별게 다 신경쓰여서 수정하게 되었습니다.. :)
현재 블로그 탭은 아래와 같이 보여지고 있습니다. 저는 빨간 부분을 수정해보려 합니다.
우선 _includes\head\links.html 파일을 열어 내용을 확인해주세요. 그 중 ‘/assets/icons/favicon.ico’와 ‘/assets/icons/icon.png’로 인해 위와 같은 아이콘이 뜨는 것 입니다.
그럼 사용할 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 ) 옵션을 선택했습니다.
사이즈 [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 이미지가 변경되었음을 확인할 수 있습니다.
layout : 게시글 display 형태 [_layouts 폴더 참조] title : 경로 제목 [브라우저 탭에 표시할 타이틀] slug : url menu : true order : 왼쪽 사이드 바에서 보여질 메뉴 순서입니다. description : 해당 경로에 포스팅 될 게시글에 대한 설명
새 md 파일을 작성하지 않고, hydejack.md 파일을 수정해 사용하셔도 무관합니다. 대신 파일 명까지 함께 변경해주세요.
다음은 _config.yml 파일의 menu 정보를 수정해야 합니다. _config.yml 파일을 열어, 새로 사용할 메뉴 이름과 경로를 수정해주세요
- title: Develop
url: /develop/
이제 /develop 경로에 작성할 md 파일들이 있을 경로를 생성해주어야 합니다. 기존 hydejack/_posts를 develop/_posts로 수정해주세요.
hydejack 경로를 추후 재사용할 예정이라면, 삭제하지 말고 hydejack폴더를 통째로 복사한 후 develop이라는 이름으로 rename 시켜주면 됩니다.
여기까지 수정했다면 이제 git bash를 통해 수정한 파일들을 모두 커밋해주세요. 하위 경로의 모든 파일과 폴더를 한번에 add 하려면, 해당 경로로 이동 한 후 아래 명령어를 사용하면 됩니다.
git add .
저 같은 경우는 develop 폴더가 새로 추가 됬으니, develop경로로 이동한 후 git add . 명령어를 사용하면 해당 경로의 파일이 모두 추가됩니다.
반영이 완료된 후 다시 블로그에 접속하면, 아래 표시한 부분들이 모두 정상적으로 수정되었음을 확인 할 수 있습니다.
hydejack 테마의 _config.yml 은 주석이 잘 달려있어, 수정하시는데 큰 어려움 없을것이라고 생각되지만 정리를 위해 포스트 작성합니다.
1. _ config.yml
_config.yml 은 디렉토리의 가장 상위 단계에 존재합니다. 아래처럼 파일을 찾아 열어주세요.
파일이 정상적으로 열렸다면, 아래 노란색으로 표시된 부분들을 수정해줍니다.
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 은 수정 후, 서버에 재반영하는 명령어를 추가로 수행해줘야 한다고 작성했었는데 굳이 실행시키지 않아도 반영되네요.. 하지만 혹시라도 저 위 명령어 만으로 반영 안되시는 분이 계시다면, 전 포스트에 작성한 명령어 추가로 수행해 보시길 바랍니다.
스크롤을 내려 아래부분을 더 수정해볼께요.
logo : sidebar에 있는 로고 이미지
author : 본인 기준으로 이름, 이메일 등을 수정
menu : 블로그 메뉴 정보
로고에 프로필 이미지를 사용할 수도 있지만, 당장은 생각이 없어서 저는 #을 사용해 주석을 걸었습니다. _author에 대한 더 자세한 내용은, data/authors.yml 을 수정해야 합니다. 해당 부분은 아래에서 다뤄볼께요. menu는 말 그대로 좌측에 보이는 메뉴에 대한 정보를 말합니다. 본인이 작성하고 싶은 글 위주로 카테고리를 만들어 수정하시면 됩니다.
여기까지 수정한 뒤 반영하면, 아래처럼 로고 이미지가 없어진 모습을 확인할 수 있습니다. 메뉴 정보를 바꾸셨다면, 아래 메뉴 목록도 같이 수정됬을거라 생각되네요.
이제는 sidebar에 있는 이미지를 지우고, 메인 컬러를 변경해보려 합니다.
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)로 보입니다.
accent_color는 저처럼 수정하시면, 아래처럼 css가 잡히게 됩니다. 왼쪽이 수정 전, 오른쪽이 수정 후 입니다.
여기까지 수정하면, 정말 기본적인 _config.yml 을 수정했다고 볼 수 있겠네요.
2. authors.xml
마크다운을 사용해 포스트를 작성하고 들어가면, 글 하단 부분에 아래와 같은 부분을 찾을 수 있습니다. 노란색으로 표시되어 있는 “_data/authors.xml” 을 수정해봅시다.
_data/authors.xml 파일을 열고 아래처럼 수정해주세요. 단, 위에서 수정한, _config.yml의 author과 동일하게 작성해야 합니다
그 다음 About과 이미지경로를 수정해줍니다.
이미지도 본인이 사용하고 싶은걸로 변경해주세요. 아래는 제가 수정한 ABOUT 내용입니다.
You Can Send me Email <본인 이메일>
Thank U for Inviting
social 부분도 수정해주세요. 자신이 추가하고 싶은 SNS게정을 등록하시면 됩니다. 저는 github와 email계정만 등록했어요.
ATOM을 다 설치헀다면 아톰 실행 후 [ CTRL + SHIFT + O ] 를 눌러 아까 다운받은 프로젝트를 열어주세요. 또는 왼쪽 상단 [ FILE - Open Folder… ] 을 누르시면 됩니다.
저의 경우는, “C:/GIT/easydevd.github.io”가 열리며 아래와 같은 창이 떴습니다.
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
확장자
내용
.md
Markdown을 사용해 작성한 게시글 파일
_config.yml
Jekyll 블로그에 대한 설정값을 제어하는 파일
위의 표 내용 정도로 이해하시면 될 것 같습니다.
여기까지 이해가 되셨다면, 이제 _posts 경로로 이동해 게시글을 써봅시다.
제가 다운받은 hydejack 테마는 이미 게시글이 여러개 작성되어 있네요. 우선 저는 https://easydevd.github.io/hydejack/ 경로에 md파일을 작성해보겠습니다.
ATOM을 실행시킨 후, 위에서 열어둔 프로젝트 안의 hydejack/_posts 폴더를 열어주세요. 그러면 아래처럼 이미 작성되어 있는 .md 파일이 여러개 보일 것입니다.
해당 경로에서 [ Ctrl + N ] 또는 좌측 상단의 [ File - New File ] 을 눌러 새창을 열어주세요.
그런 다음 아래 내용을 복사해 붙여넣고, 오늘날자-test.md 로 저장해줍니다. 저는 ‘2020-01-10-test.md’로 저장했습니다.
---
layout: post
title: GITHUB 블로그 시작
description: GITHUB 블로그 시작했습니다 :)
excerpt_separator:
혹시 다운로드가 안되면, 아래 파일들 중 본인 PC에 맞는 파일을 눌러 다시 다운로드 해주세요.
보통 64-bit Git for Windows Setup. 을 다운로드 받으실 것 같은데, 이 파일은 실행파일이고, 아래 64-bit Git for Windows Portable. 은 무설치 버전 파일입니다.
쉽게, 아래 Portable을 다운로드 받으면 흔히 아는 exe파일이 아닌 7z 압축파일이 다운로드 됩니다. 저는 exe파일로 설치 진행했습니다.
다운로드가 완료되면, 설치파일을 실행시켜 주세요. NEXT 버튼을 누릅니다.
OPTION
EXPLAIN
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 명령어를 실행할 편집기를 골라주세요. Git에서는 VIM을 권장 하고 있습니다.
OPTION
EXPLAIN
Use Git from Git Bash only
Git Bash에서만 Git 사용가능
Use Git from the Windows Command Prompt
CMD에서도 Git사용 가능
Use Git and optional Unix tools from the Windows Command Prompt
윈도우 CMD 에서 GIT과 일부 유닉스 툴 사용가능
마지막 옵션은 유닉스와 윈도우 명령이 충돌 나는 등의 문제가 발생할 수 있습니다. 잘 아시는 분만 선택해주세요. 저는 추천되어 있는 [Use Git from the Windows Command Prompt]옵션을 선택했습니다.
Next 클릭
Next 클릭
OPTION
EXPLAIN
Checkout Windows-style, commit Unix-style line endings
Checkout시 윈도우 스타일, Commit시 유닉스 스타일 적용
Checkout as-is, commit Unix-style line endings
Checkout시 스타일 변환 없음, Commit시 유닉스 스타일 적용
Checkout as-is, commit as-is
Checkout, Commit 둘다 스타일 변환 없음
어떤 터미널 에뮬레이터를 사용할건지 선택해주세요. |OPTION|EXPLAIN| |—|—| | Use MinTTY(the default terminal of MSYS2) | MinTTY terminal emulator 사용 | | Use Windows’ default console window | Windows 기본 콘솔 사용 |
추가 옵션 확인 후, Next버튼을 눌러주세요. [ Enable file system caching, Enable Git Credential Manager ] 은 기본 선택되어 있습니다.
저는 특별히 추가하지 않았습니다. Next 클릭
Install을 눌러 설치를 시작해주세요.
그냥 Next만 계속 눌러도 설치는 정상적으로 되지만, 이해를 돕기 위해 조금 더 자세히 적어뒀습니다.
2. JEKYLL 테마
GIT 설치가 끝났다면 이제 GITHUB 블로그에서 사용할 JEKYLL 테마를 골라봅시다. JEKYLL THEME 사이트
저는 Hydejack 테마를 사용했습니다. 같은 테마를 사용하실 분은 Hydejack 테마 를 참조해 주세요.
단, Hydejack 은 아래 보시다시피 GPL-3.0 라이센스이니 이 점 참고 하시기 바랍니다. 되도록이면 MIT LICENSE를 사용하는게 좋아요. 라이센스 관련 설명은 아래 블로그 링크 들어가서 읽어보시면 도움될것 같습니다 :) LICENSE 정리
사용하고 싶은 테마를 골랐다면, 다운로드 버튼을 눌러 개인PC에 파일을 받은 후, GITHUB에 올리는 방법이 있고, 아니면 GITHUB에서 프로젝트를 옮긴 후 개인 PC로 다운로드 받는 방법이 있습니다. 저는 후자의 방법을 이용해 볼게요.
위처럼 자신의 GITHUB 아이디.github.io 로 변경한 후 [Rename]버튼을 클릭해주세요. 저는 easydevd가 아이디이기 때문에 easydevd.github.io 로 Rename했습니다.
여기까지 따라하면, 위의 도메인으로 접속했을때 아래같은 블로그를 볼 수 있습니다 :)
3. GIT BASH, GIT 과 연결하기
github 사이트에서도 파일을 수정하거나 코딩하는 등의 작업을 충분히 할 수 있지만, commit작업만 가능합니다. 파일을 만들면 무조건 커밋해야 하기 때문에 저는 github사이트에서 직접 작업하지 않고, ATOM에서 작업한 후 Git Bash를 통해 Commit하는 방식으로 개발할 예정입니다.